Vercel Preview Deployments - A Quick Intro

If you’re reading this article, you probably don’t need an introduction to Vercel. But just in case - Vercel is a service that helps developers develop, preview, and ship their work. Vercel is a platform for frontend frameworks and static sites that is built to integrate with headless content, commerce, or databases. They help developers with things like: instant deployments, automatic scaling, and serving up content.

They offer a range of great features, and many Vercel users use the built-in CI/CD to automatically deploy pull and merge requests. These deployments can either take the form of production deployments, or “preview deployments”.

‘Preview Deployments’ allow you to preview changes to your app in a live deployment without merging those changes to your Git project's production branch. These preview deployments are deployed to a unique URL that can then be shared with the rest of the team.

The fact that Vercel has made their preview deployments feature a part of their core offering is a good indication of how development workflows have evolved in recent years.

It’s become increasingly common today for teams use on-demand, ephemeral environments for testing a specific git branch before it gets merged. These ephemeral environments provide immediate, short-lived exposure to the current state of the PR, enabling quick review of a specific feature or bug fix before deploying it to production. It also removes the need to worry about the overhead of a staging server or similar.

It’s no surprise then, that there are a seemingly endless list of PaaS and hosting solutions out there offering preview environment solutions to support virtually any tech stack and app configuration.

Why Preview Deployments are (potentially) So Valuable

So what exactly are preview deployments good for? Why are more teams adopting them and what are they hoping to get out of using them?

The short answer is: increased development velocity by facilitating collaboration.

PR Preview environments make it easier for other members of the team to review and test the latest changes and features.  By using preview environments, teams essentially move their review and testing process to an earlier stage in the workflow (before the new code is merged). This makes it easier to isolate bugs, make quick changes and ensure stability of new features before things move to staging or production.

Preview environments provide a controlled structure and context for product teams to rapidly progress between coding, reviewing, providing feedback and resolving issues.

This is, in fact how Vercel presents the value of the deploy previews on their site: “Share and collaborate - Avoid surprises by iterating with your entire team. Test from the perspective of your users, on every platform.”

The Challenge in Using Preview Deployments to Collaborate

At first glance, this sounds amazing. Increased development velocity. Better collaboration. Higher quality code.

But actually using the deploy previews to achieve these goals in real life workflows in a lot more challenging.

The first part of the process is straightforward enough. Every Git branch and PR receives a live, production-like URL that can be shared. This utility gives potential exposure to the latest code changes.

But what happens next?

In order to achieve the streamlined workflows as advertised, all relevant stakeholders need to be included in the review process. This means, not just the developers, but also designers, QA, PMs, marketing and management. A review process that is handled in a function-specific silo (say, just the developers reviewing the code amongst themselves) will eventually run into friction when the other stakeholders inevitably need to sign off on the changes before they go live.

And this is the part that's missing from the deploy previews out of the box.

The reality is that many of the stakeholders who need to be included in the PR review workflow are less-technical folks who are not active Vercel users. This limits their ability to access, review and comment on the deploy previews that are created.

Furthermore, even those team members who are active Vercel users will still need a way to communicate their feedback in a clear and comprehensive way. Vercel doesn't manage this natively in a comprehensive way, and so this feedback usually overflows into multiple platforms like GitHub, email, Slack, shared documents and task management tools. And this just creates more work and a longer backlog of feedback to review.

And so, while the deploy previews are a great start, they do not do enough to natively to achieve the level of cross-unit collaboration that teams need. is required to review PRs quickly, and they do nothing to streamline the feedback process that increases the velocity of the overall workflow. Relying on the out-of-the-box capabilities alone inevitably leaves dev teams feeling frustrated with an uncoordinated and incomplete review processes that increases friction and delays product deliveries.

Adding Contextual Collaboration to Vercel Deploy Previews

Thankfully, Vercel users now have a way to fill this gap by installing the Livecycle SDK.

Livecycle’s SDK connects with your PR deploy previews to enable Figma-like comments on top of the product UI. This turns the siloed, read-only deploy previews into collaborative playgrounds where the whole team can review the latest product changes together.

When the deploy preview link is opened, the Livecycle tools are overlayed on the product UI, allowing each reviewer to  leave their comments in context and to see the other comment threads and overall status.

Livecycle maintains the comments per-playground, and everything is also synced back to Git so that code owners can see the relevant feedback in their preferred context. And supported integrations with other platforms like Slack, Jira, and Linear allow you to speed up your workflow without adding steps or changing tools.

Livecycle essentially extends the value of your Vercel deploy previews by making them a context for contextual reviews and inclusive collaboration. This allows teams to achieve the streamlined workflows and increased velocity that they are aiming for.

What Livecycle Brings to Your Workflow

Livecycle gets the workflow started by automatically distributing the link to the preview environment to all the relevant collaborators on the team. And even if someone is missing from the list, you can add them at any time to join the project.

When a team member opens the preview environment, the Livecycle tools are readily available for collecting feedback in full context, including:

• Screenshots for highlighting specific areas of the UI
• Video capture to record a particular user sequence
• Element editor for making suggested changes to HTML and CSS elements
• Text-based Comments
• Tagging team members, emoji reactions and status designation per-comment make sure everyone is kept in the loop

Since these tools are built-in to the preview environment itself, reviewers can give better feedback by marking up the actual product UI. And the code owners can understand the feedback faster and address it sooner, without needing to coordinate more meetings.

Livecycle maintains the comments per-playground, and everything is also synced back to Git so that code owners can see the relevant feedback in their preferred context

And supported integrations with other platforms like Slack, Jira and Linear allow you to speed up your workflow without adding steps or changing tools.

Get Started in Less than 5 Minutes

There are two actions that need to be done in order for Livecycle to work properly with your existing preview environments:

• Add Livecycle SDK your web application - Livecycle needs to be added either by script or as an npm package, and needs to be initialized with LivecycleSDK.init() on application load.
• Link your preview environment to Livecycle - Livecycle needs to be notified on any new preview environment to serve the right collaboration context. The details for the preview environment includes the git context (repository, branch, sha, etc...) and the environment status (state, url, etc...)

Adding the Livecycle SDK

Adding the Livecycle sdk as a script is pretty straight-forward. Just add these two lines to your page header:

<script src="https://unpkg.com/@livecycle/sdk@stable/dist/browser/index.js"></script>
<script>
  LivecycleSdk.init().catch(console.error)
</script>

It can also be done via Google Tag Manager or other script injection solution.

It's also possible to install Livecycle SDK as an npm package ([@livecycle/sdk](https://www.npmjs.com/package/@livecycle/sdk)). This option gives you a bit more flexibility but may require some tweaking in different frameworks (check out the framework installations examples for reference)

Link Your Preview Environments to Livecycle

There are two ways to set up automated for preview environment linking to Livecycle.

• Livecycle will search for relevant preview environment details by analyzing your PR - Livecycle can detect preview environments and generic Github deployments that are created via Github API. The configuration for PR auto-linking is triggered in Livecycle's installation wizard once a preview environment is detected.
• Preview environment linking using Livecycle CLI - Livecycle CLI can be used to link preview environments to Livecycle in your CI process. You can check out some examples of CI integrations, and the CLI documentation on npm for more info.

Once the auto-linking is set up, every new preview environment will be linked to Livecycle and include Livecycle’s in-app collaboration tools overlaid on the product UI.

Here's a quick walkthrough of the SDK setup:

Conclusion

Vercel's Deployment Previews can help development teams - but not necessarily right out of the box. By adding Livecycle's SDK, you can extend the value of these preview environments and create a truly collaborative workflow for your team. By enabling everyone to review and comment on the latest product changes in context, you'll benefit from less workflow friction, fewer context-switches and higher quality code deployed to production faster than ever.