Launching a Web App Using Vercel

In this tutorial, I'll teach you how to launch a web application with an Express.js backend. This tutorial is intended for intermediate web developers with limited knowledge of deployment and hosting their applications. This tutorial also works for applications that don't have a backend. The tutorial involves using Vercel, a free hosting platform that automates deployment using CI/CD. It can auto detect languages and cater the deployment to whatever languages and frameworks you choose to use, but this tutorial uses React and Express.js. The deployment process only takes a few minutes and requires minimal configuration, so it is the perfect platform for launching your latest and greatest web application. This tutorial also assumes the user is using a Mac. Git CLI is a little more convoluted on Windows, but a quick Google search can provide a translation between operating systems for certain steps. I am not qualified to provide instructions for Git CLI on Windows, but I know Git Bash is an application that can emulate the Mac Terminal on Windows machines.

By the end of this tutorial, you will be able to:

• create a git repository
• push a git repository to Github
• launch a web application on the Vercel hosting platform

Supplies

Computer

A web application you want to deploy to the Internet

Git

Github Account

Vercel Account

Step 1: Git Installation

Overview

Vercel works best when used with Github, Gitlab, or Bitbucket. If you have a Github account, you can skip to Step 3.

For those who are unfamiliar, all of these platforms are Version Control Systems that allow programmers to keep track of their code in online repositories. The base of these VCS platforms is Git, the local version which keeps track of your versioning history solely on your machine. Git can be used with a Graphical User Interface or even through your favorite IDE, but I will use the command line version to reduce the number of necessary installations.

Git Installation

To install Git on your machine, visit https://git-scm.com and click the Download button shown in the image above. Double-click on the download and follow the instructions to complete the installation. You can verify that Git is installed by opening a Terminal window and running the "git status" command. If you see the message "fatal: not a git repository (or any of the parent directories): .git", then you have installed Git!

git status

Initializing your First Repository

Now that Git is installed, you can initialize your first repository in the root directory of your web application. In a Terminal window, navigate to the root of your web application. Run the command "git status" to ensure you are not already within a git repository. If you see the "fatal: not a git repository (or any of the parent directories): .git", then you are all good to go. To initialize your repository, type the command "git init" into your Terminal. You can confirm this has worked correctly with the output provided, which should read "Initialized empty Git repository in {your project directory}.

git init

Your First Commit

Once this has been verified, we want to make our first commit. This is like a point in history for Git; a checkpoint. Our latest commit is what Vercel will push to our deployment, and it will automatically update any time we make a new commit in Git and push to it Github; more on that later.

Commits can be made by first adding files using "git add <filename1> <filename2>", or just "git add ." to add all files. If you already have a web application finished, feel free to add all files so long as they don't contain sensitive information (such as API keys). To check what files are in the Git staging area, you can run "git status" at any time.

git add myfile1.txt myfile2.txt
git status

If all of the staged files look ok, then you can make your first commit by using "git commit -m 'initial commit'. The message can be whatever you want, but it is usually best practice to start with an initial commit message. This will commit your changes to the Git history and allow us to revert to this version or point in time in the future.

git commit -m 'initial commit'

Once this commit has been made, we can verify its existence using "git log --oneline". This shows a breif commit history with messages, branches, and commit hashes. For our purposes, we are only concerned that the commit was made and can be pushed to Github. If you see your message in the output, then you are good to go!

git log --oneline

Step 2: Github Setup and Pushing to Github

Overview

We use Github to push out local Git history to the Internet. This way the whole world can see or access our code (given they have permission). Github makes pushing existing Git repositories to the platform really simple. First, we need to ensure you have a Github account. Again, if you have a Github account, you can skip to Step 3.

Setting up Github

Navigate to https://github.com and sign up for an account using your preferred email. Github will require you to set up some command line authentication before you can push local code to a repository; follow the official Github documentation on this process.

Creating a Github Repository

Next, navigate to your profile page and find the "Repositories" tab. Click the green "New" button in the top right to create a new repository.

Name the Github repository the same thing as your project's root directory. This helps to prevent confusion when making pushes. You can keep the repository public or private, whatever you prefer as Vercel will work with either. Don't worry about the .gitignore or README for now. Click "Create repository" to create your first Github repository!

Connecting our Local Repository to Github

Github will prompt you to either create a new git repository on your local machine OR to push an existing repository. This tutorial assumes you already have a web app you want to push to Vercel, so you can use the second, shorted list of commands. Click the clipboard icon on the right to copy the CLI commands and paste them into your Terminal. Make sure you are in the root directory of the project, then click enter to push your repository to Github. You should see some loading output, then the URL to your repository towards to bottom of the Terminal output. If you follow this URL, you can see your project structure on the Github page for you project.

Once this is done, we can move on to using Vercel to launch our web app.

Step 3: Deploying With Vercel

Vercel Account Creation

Vercel account creation can be done using Github with one button click. Navigate to https://vercel.com/login and click the “Continue with Github” button. This will log you in and allow you to access your Github repositories to push to the Vercel hosting platform.

Creating your Project

Next, click the “Add new…” button near the top right corner of the Dashboard page, then select “Project” from the drop down menu. You will be prompted with something like the first image above.

Vercel Permissions

From here, we need to add access to our Github repositories. Github works on a need-to-know basis, so by default, all of your repositories require special permissions for 3rd-party sites to access their data.

Click “Adjust Github App Permissions”. You will be prompted to authenticate via either Microsoft Authenticator or Password. From there, you can select what repositories Vercel has access to in the pop-out window. Make sure you select the project you intend on hosting.

Importing our Repositories

Then, you can revert back to the Vercel page above and click the blue “Import” button to import the repository. On the deployment staging page, you can name the project, pick a project template, pick a root directory, set environment variables, and configure build output. If you are reading this tutorial it is likely the build output is irrelevant, but configure these options as you see fit/as needed. Vercel will auto-detect many frameworks (like React), so there is often no configuration needed. Also, for our purposes, we will use the default root directory. 

Deploying our Project

When your configuration is all set, you can click “Deploy” at the bottom of the staging screen. This will trigger a pipeline that runs automatically to push the repository to the Vercel servers. Once the pipeline is finished, you will be ported to a project snapshot page. Click on the “Go to Dashboard” button to retrieve your page’s URL and view the status of the web page. 

Maintenance

If you ever need to make updates to the web application, you can just commit changes to the main branch of your Git repository and push the changes to Github. Vercel will detect these changes and automatically update your deployment.

Step 4: Backend Deployment

If you only have a frontend to your web app, you can skip Step 4. This tutorial also includes an express backend. For the backend, you can repeat Steps 1-3, but there is one extra step. A vercel.json file is needed to override certain default configuration. The boilerplate code I recommend using for the vercel.json file you should create in your root directory is below.

{
   "version": 2,
   "builds": [
     {
       "src": "server.js",
       "use": "@now/node"
     }
   ],
   "routes": [
       {
         "src": "/(.*)",
         "dest": "server.js"
       }
     ]
 }

Once this has been added, you can create the git repository, Github repository, and Vercel project for your backend. Following the steps outlined above will work just fine.

When configuring your express server, you need to make sure you make it listen on the correct host. Use your Vercel URL and any open port. Also, make sure your frontend URL is included in your CORS options object (unless you allow all incoming requests using “*”). With this configuration, you can deploy your Vercel app and check to make sure your front end and back end are connected. Now, your beautiful web app is accessible from anywhere in the world! Congratulations! I highly suggest making useful projects, posting them to Github and deploying them using Vercel. Employers love seeing passion projects, and the utility of these projects is an added bonus.