Preview Deployments

The recommendation is to use short-lived feature branches and aim to merge them to your main branch as quickly as possible. This approach follows guidelines from trunk based development as well as a git-based workflow such as Github flow.

You can use preview deployments to automatically deploy and preview changes in a non user-facing live environment before merging them to your main production branch.

Key benefits

Safe, production-like environment for testing before deploying to production

Shorter feedback loops to iterate faster

Provides an environment to run automated quality assurance tests

Preview deployments are temporary, isolated environment that allow developers and stakeholders to preview, test, and interact with changes in a production-like environment. They are useful to validate your changes and iterate quickly on designs or bug fixes before they are deployed to production.

When developers create a pull request from a feature branch, your continuous integration (CI) pipeline automatically deploys the changeset to a preview environment and provides a way to access (typically a unique URL) it in a comment in the pull request. After the pull request is merged or closed, the preview environment is removed.

Workflow

1. Developer opens a pull request from a feature branch.
2. CI pipeline creates a preview environment and provides the URL in a comment in the pull request.
3. Developers and stakeholders review the changes on the preview environment and provide feedback.
4. Pull request is merged or closed.
5. Preview environment is removed.

Recipes

Your setup

Many popular hosting providers offer preview deployments out of the box so check their documentation to see if they do. When that’s not the case for you or if you have your own custom deployment, you can use the following recipie:

1. Check the current production deployment of your website.
2. Copy the workflow and adapt it to also run on pull requests to your main branch
3. Make sure to create a preview environment that is isolated from your production environment
4. Adapt the preview environment resources as you probably do not need as much as you use for production
5. Automatically create a comment in the pull request with the preview environment URL using the github/gitlab API.
6. Remember to remove the preview environment when the pull request is closed or set a short time to live like 3 days.

Vercel

If you’re deploying your application using Vercel, you’re in luck as Vercel provides preview deployments out of the box including creating a comment in pull requests with the preview URL.

Cloudflare Pages

If you’re deploying your application using Cloudflare Pages, you’re in luck as Cloudflare Pages provides preview deployments out of the box but you will have to go to your Cloudflare dashboard to find your preview URL.

Netlify

If you’re deploying your application using Cloudflare Pages, you’re in luck as Netlify provides preview deployments out of the box including create a comment in pull requests with the preview URL if you have deploy notifications enabled.

If you need support to setup your preview deployments, reach out!