logo
Tech Ninja
Published on

How to Deploy Your Project on Vercel with GitHub Integration — A Step-by-Step Guide

Vercel provides you an option to choose the project template from the avaiable range of templates which are fully optimized and ready for instant deployment, which also saves your time by making you skip basic setup which is time consuming and let you get straight into development.

Step 1: Browsing Vercel Templates

  1. visit vercel.com/templates
  2. You'll find a wide range of template options which are categorized by framework:
    • Next.js (perfect for SSR/SSG projects)
    • Nuxt
    • Gatsby
    • vite
    • Remix
    • React, Vue, and more
  3. You can also search or filter templates by category, framework, or features (e.g. with TypeScript, with Tailwind CSS).
  4. choose the template from the avaiable options.
Template

Step 2: Deploying the Template

Once you select the template, you can now easily deploy it to Vercel. Follow these steps:

Click on “Use Template”

Once the template is selected, click the “Use Template” button to start the deployment process. Now it will show you the option to link your project(selected templated) with your GitHub repository.

Choose GitHub as the Source

After clicking "Use Template", Vercel will give you option to select a source for your project. Choose GitHub as the source control system.

Github

Connect Your GitHub Account

If GitHub account is not linked to Vercel yet, link your Github account with Vercel and choose the Github Repository that you want to deploy.

Deploying the Template

Now that the Github account is Linked, project deployment process will start and you can now see the real-time deployment progress.

Step 3: Deployment Options

After deploying your template, you can configure your project’s deployment settings, that may include selecting the different branches for production and development.

Set the Production Branch

Inside project settings of selected project, you can select which branch will be used for the production environment. By default, Vercel uses the main branch for production. However, you can change this if you'd like to use a different branch.

Set the Development Branch

you can configure your development branch for the project same as you did for production branch. Development branch let you test your code changes before pushing code to production branch.

Deployment Progress

Triggering Deployments

Once these branches are set, every push to the designated production or development branches will trigger a new deployment on Vercel.

Step 4: Domain

Linking your project with a Domain will enchance user's experience with professional feel, branding, and also improves SEO. You can either buy a new domain or use an existing one if you already have to link attach domain with your project.

Following are the steps to buy new domain if you don't have already

  • In you vercel, visit https://vercel.com/domains
  • There you will find text box which says "search for domains..." Type the most relateable name that matches your website.
  • You will get the list for domains that you entered. From that list choose your domain
  • Enter payment details and confirm your purchase
domain

Now Attach Domain with your Project

Select your Project->Domains->Add Domain

add domain

Step: 5 Environment Variables

You can set environment varibale on vercel which you can either set for all projects on vercel (publicly accessible by all projects in vercel) or you can set project specific environment variable (which can only be accessed by the particular project for which it was set).

When creating environment variables, you can choose for which "Environment" (Production, Preview, Development) you want to set that variable for.

For Local Development you can set your environment variable in .env file which you have to create at the root level of your project.

To create environment variable for Next.js Project, which are intended to be used by client-side you need to add prefix as "NEXT_PUBLIC_".

After adding new environment variable you need to redeploy your project so that project can make use of the newly created variable.

Following is an image for project specific setting environment variable for preview environment.

set env

Below is an image for viewing all environment variables and their Enviroment.

all env

To load environment variables from vercel into your project, you can use following command in command prompt of your project root directory

  • Globally install vercel 
    npm install -g vercel
  • verify it is properly installed using 
    vercel --version
  • Locally link your project with vercel
    vercel link
    and follow the further prompts shown on the screen to link your project.
  • Get environment variables from vercel using either of command below 
    vercel env pull
    OR 
    vercel env pull .env.local

If used vercel env pull this will automatically create .env file with key value pair from vercel environment in your project root directory.

If used vercel env pull .env.local this create .env.local file with key value pair from vercel environment in your project root directory.

You can now use process.env. to access environment variables.

.env file will be automatically be included in .gitignore so that environment variables are not commiting to project repository.

You can also import .env file from your project into your vercel dashboard. When you follow this step, enviroment variables from .env file from project will be automatically used by vercel.

Following image shows where you can perform this step

all env

To Redeploy your project from vercel, follow below reference shown.

redeploy

Step 6: Successful Deployment

After completing the setup and pushing your code to the chosen branch, Vercel will automatically deploy the application. You can monitor the deployment progress and confirm that everything is running smoothly.

Build Logs and Live URL

Once the deployment process is started, you can see the build logs in real time. These logs provide important information about the build process, so you can troubleshoot if needed. After the build is successful, Vercel will generate a live URL for your deployed project.

Triggering New Builds

After the initial deployment, any new changes pushed to the specified production or development branches will trigger new builds. This allows you to keep your application updated automatically with every change you make to your GitHub repository.

Deployment Status

You can also monitor the status of your deployment from the Vercel dashboard. If the deployment is successful, it will show a green status, and if there’s an issue, you will see a red status with error messages indicating the problem.

deployment status