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

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.

Create branches for local development

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.

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.

Create a pull request with your changes

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.

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.

Merge the pull request to main

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

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.

Adding Xata to your workflow

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 🦋