Deploying React to Vercel

4 min readFeb 25, 2024

This article is a part of Individual Review PPL CSUI Even Semester 2023/2024.

Source: https://logowik.com/vercel-vector-logo-9512.html

In the first week, our team decided to use React as our frontend library. There are two different ways to deploy React Application to Vercel.

Vercel for Git

Push your code to git repository (GitHub, GitLab, BitBucket).
Import your React project (git repository) to Vercel through Vercel Dashboard.

Vercel will detect your project and will enable the correct setting for your deployment automatically. Then, your application is deployed. It is indeed the simple way.

Vercel CLI (Command Line Interface)

Vercel CLI can be used to deploy React Application. This involves installing the Vercel CLI, logging in to your Vercel account, and running some related commands.

First, add CI/CD Pipeline Script to .gitlab-ci.yml :

default:
  image: node:16.16.0

deploy_preview:
  stage: deploy
  except:
    - master
  script:
    - npm install --global vercel
    - vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
    - vercel build --token=$VERCEL_TOKEN
    - vercel deploy --prebuilt  --token=$VERCEL_TOKEN

deploy_production:
  stage: deploy
  only:
    - master
  script:
    - npm install --global vercel
    - vercel pull --yes --environment=production --token=$VERCEL_TOKEN
    - vercel build --prod --token=$VERCEL_TOKEN
    - vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN

This pipeline has two jobs, that is deploy_preview that will run in all branches except the master branch, and deploy_production that will run only in master branch. So the two triggers are:

One that creates preview environments on commits pushed to a git branch
Another that creates production environments on commits to the master branch

Then, add the required values from Vercel as CI/CD variables in GitLab repository.

To do this, there are some things to do.

Retrieve your Vercel Access Token.

From your Personal Account Dashboard, go to Settings Tab. Then, navigate to Account Tokens page.

Click Create to open the create token modal.
Enter a descriptive name and click Create Token.
Choose the scope of access for the token from the dropdown.
Make a note of the token created as it will not be shown again.

2. Create new project through Vercel CLI.

To install Vercel CLI, run the following command in your Command Prompt (assumed you use npm):

npm i -g vercel

To confirm that the download has finished successfully, you can verify it by executing this command:

vercel --version

If the output displays the version of the Vercel CLI similar to the following, then the download has been successful:

Next, you’ll need to log in with your preferred account. Please use the following command:

You can continue based on your preferred account.

After logging in, navigate to the directory of your project where you want to deploy it using the Command Prompt, and then execute the following command:

vercel link

Running this command will initiate the creation of a new Vercel project. During this process, you’ll be prompted to enter some configuration settings based on your project requirements. After completing the configuration, a new .vercel folder will be created in your project directory. Inside this folder, you'll find a README file and a project.json file. Be sure to save the projectId and orgId from the project.json file.

3. In the GitLab repository, add CI/CD variables as follows:

CI/CD Variables in Senarai Frontend Repository

Key: VERCEL_TOKEN, value: Vercel Access Token
Key: VERCEL_ORG_ID, value: orgId value
Key: VERCEL_PROJECT_ID, value: projectId value

It is quite complex than the first way, because some manual configuration is needed in the repository.

Our project were deployed using Vercel CLI, because our frontend repository is in GitLab CSUI, not the basic GitLab, we can’t just import the repository to Vercel. After doing some research, we can actually deploy repository from GitLab CSUI, as a self-managed GitLab, to Vercel, that is using Vercel CLI to create new Vercel project.

Deploying a React application to Vercel using the Vercel CLI helps me to understand more about deployment process, including configuring deployment settings and managing environment variables. I become more familiar with a few commands in the Vercel CLI. I also have a better understanding of setting up continuous deployment workflows, where changes pushed to specific branches automatically trigger deployments to Vercel, ensuring a seamless development and deployment process.

References:

Deploying React to Vercel

Written by Rahma Adinda Putri