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:
Push this file to your GitLab project so you have one file inside of it.
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.
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 push, merge requests, and automatic updates for production domains.
Deployments For Each Push
Now, visiting your commits page in GitLab, you will see something like this:
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:
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.
A 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".
After you commit and create the merge request, you will get a new view that will start a deployment pipeline for your changes:
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.
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:
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.