Automatic Deployments with Vercel for GitLab

The Vercel for GitLab integration provides you with automatic deployments for each push to a project, automatic preview URLs for pushes to the Production Branch, and instant rollbacks for reverts.

This guide will walk you through how to set up the Vercel for GitLab integration for your projects.

Step 1: Set Up a Vercel for GitLab Project

To deploy a project with Vercel for GitLab, you must first have a project on GitLab.

Create a new GitLab project with a file called index.html with the following contents:

<body>
<h1>Hello World</h1>
</body>

Push this file to your GitLab project so you have one file inside of it.

A GitLab project setup.
A GitLab project setup.

Step 2: Connect Vercel to Your GitLab User and Project

For Vercel to make automatic deployments and preview URLs, it needs access to your GitLab account and its associated projects.

Connect your GitLab account through your account settings.

If you don't have a Vercel account, visit https://vercel.com/signup and click "Sign Up with GitLab".

Link Your GitLab Projects

From the account settings section where you connected your GitLab account, or from https://vercel.com/new, select your GitLab project from the dropdown and click "link" to link it.

Linking a GitLab project.
Linking a GitLab project.

With a project linked, no further setup is required on Vercel.

Step 3: Using Vercel for GitLab

With configuration done, all future commits from your linked projects will have automatic deployments for each pushmerge requests, and automatic updates for production domains.

Deployments For Each Push

Now, visiting your commits page in GitLab, you will see something like this:

A deployed commit using Vercel for GitLab.
A deployed commit using Vercel for GitLab.

This green status symbol indicates that Vercel successfully deployed your commit.

Clicking the commit itself, you will see a comment that holds a unique deployment URL to test and share the specific commit build:

A unique URL for an individual commit.
A unique URL for an individual commit.

Each commit will result in a unique URL just like the above.

Deployments and Preview URLs for Merge Requests

Merge requests are a way to submit changes to a project without pushing directly to the Production Branch. This comes in handy when you're working on a feature that is either in progress or needs a review before being launched into production.

merge request can be created in multiple ways, however, to test, create a merge request by editing the index.html file, edit the target branch, and then click "Start a new merge request".

Creating a merge request from GitLab's UI.
Creating a merge request from GitLab's UI.

After you commit and create the merge request, you will get a new view that will start a deployment pipeline for your changes:

A merge request deployment pipeline success message.
A merge request deployment pipeline success message.

The pipeline information shows the status as Vercel builds your app. In this case, it has successfully built. It will show a different icon when Vercel is building the app.

Below the pipeline message, a comment will present a preview URL that updates each time the merge request is pushed to, so you can share this link with others without having to worry about sharing the latest update.

A preview URL created from a merge request.
A preview URL created from a merge request.

You can test this by creating another commit for the merge request and accessing the preview URL. You will notice that, once the commit is deployed, the preview URL will have been updated with the changes.

Deploying to Production

Pushing or merging to the Production Branch will result in a deployment, like any other branch or push. However, if you have a production domain set in the Domains section of your Project Settings, these deployments will be automatically available at your configured destination.

Note: You can read more about adding domains, both preview and production, to deployments in the custom domains documentation.

When you push this change to the Production Branch, this and all subsequent commits to the branch will have the following comment, letting you know that your deployment is available in Production:

A preview URL created from a merge request.
A preview URL created from a merge request.

In Conclusion

Through this guide, you should now have a bulletproof deployment pipeline for all of your GitLab projects, using Vercel for GitLab.

With every push, an automatic deployment. With every merge request, a unique preview URL. And with every update to the Production Branch, your changes are updated for the Production Domain.

Couldn't find the guide you need?