The Vercel for GitLab integration provides you with automatic deployments for each push to a project, automatic preview URLs for pushes to the default branch, and instant rollbacks for reverts.
This guide will walk you through how to set up the Vercel for GitLab integration for your projects.
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.
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".
From the account settings section where you connected your GitLab account, or from the GitLab tab on https://vercel.com/import, select your GitLab project from the dropdown and click "link" to link it.
With a project linked, no further setup is required on Vercel.
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.
Merge requests are a way to submit changes to a project without pushing directly to the default 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.
There are multiple ways to create a merge request, 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.
Pushing or merging to the default 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 dashboard, these deployments will be automatically available at your configured destination.
When you push this change to the default branch, this and all subsequent commits to the branch will have the following comment, letting you know that your deployment is live 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 default branch, your changes are updated for the production domain.