End-to-end preview deployment workflows with Xata and Vercel

Preview deployments have changed the way we work. Xata's integration with Vercel brings the data layer directly into that workflow.

Written by

Alex Francoeur

Published on

April 26, 2023

Vercel is a complete paradigm shift in how modern developers build applications. Together with an integrated GitHub app, the efficient workflows unlocked by preview deployments are redefining how teams build products. The one missing piece? The data layer.

At Xata, we believe that previews will replace pre-production environments completely. With our latest release, we are introducing preview branches, a Vercel integration and an application for GitHub. The combination of these features complete the workflow Vercel has made so popular by pairing each pull request and Vercel preview with a preview branch of your production database.


Working with preview branches and Vercel

In Xata, a preview branch is a branch of your main database that is automatically populated with data from it. A preview branch is created with each pull request in GitHub, which results in a number of benefits to your development workflow.

  • Safely iterate on your application with production data knowing you won’t impact your production environment and end users.
  • Freely modify schema and code changes alongside your application in an isolated preview environment.
  • Obfuscate sensitive data and PII for individual developers who do not have the appropriate permissions (this is coming soon).

Let’s walk through adding a one out of five star rating to each product review in an ecommerce application. Here’s what the full end-to-end workflow would look like.

A screenshot of a preview branch and GitHub comment
A Xata preview branch for every preview deployment in Vercel
git checkout -b review_stars
xata branch create review_stars

Create a branch for local development as you normally would. xata branch will create a new branch off of your main database in Xata.

A screenshot of adding a column in Xata
Adding a column to a new branch in Xata

We’ll add a new column review_rating for our new review ratings.

xata pull review_stars

xata pull will pull the changes locally, along with a ledger and migration file to make sure the branch can stay in sync with any changes made to main. This mirrors the typical git workflows.

git add .
git commit -m 'add rating column to db'
git push --set-upstream origin review_stars

Following your typical development workflow, push the changes up to your remote branch and create a pull request. When this pull request has been created, you’ll see a comment with the current state of your preview branch alongside the Vercel comment.

A screenshot GitHub comments for Xata in Vercel
A comment with the latest status of the Xata preview branch

Each preview branch will be automatically populated with data from main. In this example, our preview branch would include an empty column for review_ratings. With our Vercel integration, every preview will automatically use the preview branch from Xata. This provides a secure and isolated environment to iterate and ship for every pull request.

Alright, code changes are in and it’s time to turn that pull request purple.

A screenshot of the checks made for the pull request
Checks performed by Xata before merging

If you are not making changes to your database, you’ve benefited from having your own personal staging environment for your pull request and don’t need to worry about migrating any changes in your database.

If you are making changes to your database, you still don’t need to worry about migrating any changes. Xata will perform a number of checks with each commit to ensure your pull request does not have any migration errors. In case errors are detected, Xata will provide a comment with details and block the merging of the pull request until the migration failures have been addressed.

With the simple addition of a column in this example, there are no errors. On merge, Xata will migrate the schema changes from the preview branch into the main database with zero downtime. The preview branch will automatically be deleted along with the Vercel preview deployment.

And that’s it. Without any changes to your current workflow, you’ve added in an isolated database branch for each preview deployment.

Xata is a serverless database that is built for modern development. Powered by industry proven technologies such as Postgres and Elasticsearch, Xata provides all your data needs behind a sleek type-safe SDK for both JavaScript and TypeScript frontend frameworks.

To get started with this new workflow, sign up and follow these step-by-step instructions to install the GitHub and Vercel integrations. If you have any questions or want to chat data, feel free to reach out to the Xata team in Discord.

We can’t wait to see what you build 🦋

Start free,
pay as you grow

Xata provides the best free plan in the industry. It is production ready by default and doesn't pause or cool-down. Take your time to build your business and upgrade when you're ready to scale.

Free plan includes
  • 10 database branches
  • High availability
  • 15 GB data storage
  • 15 GB search engine storage
  • 2 GB file attachments
  • 250 AI queries per month
Start freeExplore all plans
Free plan includes
  • 10 database branches
  • High availability
  • 15 GB data storage
  • 15 GB search engine storage
  • 2 GB file attachments
  • 250 AI queries per month
Add column to table

Sign up to our newsletter

By subscribing, you agree with Xata’s Terms of Service and Privacy Policy.

Copyright © 2024 Xatabase Inc.
All rights reserved.


RoadmapFeature requestsPricingStatusAI solutionsFile attachments