Using Vercel to instantly deploy web applications

Have you built a new web project recently and wanted to show it off to the world? Most likely, you run into this desire as a developer and discovered that the deployment process is long and laborious. Even simple automation tools like GitHub Actions are riddled with complexity and can take a while to understand.

Enter Vercel, a platform as a service product that enables developers to showcase their projects with just a few clicks. Oh, and its free too, by the way. Today, I'll show you how you to leverage Vercel to deploy two styles of applications: a NodeJS application and an 11ty static site.

Why use Vercel?

In the world of application deployment, you may need to deal with servers, VMs, containers, Docker, networking, Terraform, AWS, Jenkins, Ansible...

The list could go on forever.

Vercel seeks to avoid complexity by abstracting away infrastructure entirely. It uses a "Functions as a Service" or FaaS approach, which essentially means that you can upload your code (the functions) and Vercel will build an environment around that. If this sounds like AWS Lambda, that's because Vercel uses Lambda's engine under the hood to provide this functionality to its users. Vercel further abstracts Lambda's configuration process to provide an approachable environment to serverless compute.

Getting started with Vercel

The first logical step would be to create an account. As I mentioned previously, Vercel is incredibly easy to work with. Most developers use some type of version control (i.e., GitHub) during the development process, and Vercel integrates with many to connect your repositories right to their build pipeline. You can use GitHub, GitLab, or BitBucket to set up your account.

After setting up your account, you're ready to start deploying your projects. From the Vercel dashboard, select the New Project button.

From there, you can take one of two paths:

1. Import a Git repository: This is ideal for finished projects, or projects that you've already created a GitHub repository for. During the creation process, you'll create the first deployment of your app using the main branch of your repository. You don't need to use a specific framework for this method. Another consideration: when connecting your account to version control, you are able to install Vercel across all public repositories on your account, or limit the installation to specific repositories. In the Vercel dashboard, You are only able to access projects that you have installed Vercel into.

2. Clone Template: This is ideal for new projects, after you've decided on a framework to use. Some available options are Next.js, Nuxt, 11ty, and Remix, amongst other options. Cloning a template will clone the starter project repository to your version control of choice, then install Vercel into that repository.

After selecting your path, you will be given some configuration options for the build/deployment of your application. When you're ready, select the blue Deploy button, and you're off to the races! You'll see deployment progress, and a live output of the build right from the Vercel site.

Environment variables: Often, environment variables are required to store API Keys, database connection information, or other sensitive data. These values can be saved to Vercel via the "Environment Variables" section. If you need to add them after deployment, you can do so under ${Project} > Settings > Environment Variables. These values can then be accessed in code via process.env.${variableName}.

11ty on Vercel

Example 1 - Hello Horses!
Example 2 - 11ty Base Blog
Example 3 - hax11ty

Developers often leverage static site generators (like 11ty) to spin up quick sites from template files, like markdown, that are easy to write. Left with these files, it can be a hassle to set up a web server, configure Nginx, copy the files, set up HTTPS, and configure a domain for the world to see. GitHub Pages helps to take away some of this configuration by automating the deployment process, but the configuration of GitHub Actions is still required, and some nice features like parallel preview builds are complex or missing.

Vercel runs your eleventy build command and completes all of the grunt work required to generate a public URL for the world to see with near zero configuration. It even allows users to deploy the same application from different branches so that new features can be test driven before production.

One issue that I ran into was a configured pathPrefix variable in my .11ty.js configuration. This generated non-existent paths for my assets and links on the site. If you've deployed a site to GitHub pages, you likely have this configured. To solve this issue, I modified my .11ty.js configuration to include the following in the module.exports function:

  //support for deployment on both Vercel and GitHub Pages
  let deployPath = '/';
  if (process.env.deployEndpoint != 'vercel'){
      deployPath = '/11ty-base-blog/';
  }

Then, I set module.exports to return pathPrefix: deployPath

I also included the deployEndpoint environment variable and set it equal to 'vercel' in my deployment settings on Vercel.

NodeJS Applications on Vercel

Example

In addition to serving static content, Vercel provides server-side processing via Functions as a Service (FaaS). In the example above, the site utilizes micro-frontend components that process data via Vercel's serverless functions.

Serverless functions in Vercel are created via files in the /api directory of a project. There are a number of supported backend languages, including JavaScript, which we used for this project. Within the file, a "handler" function is defined via the syntax below:

export default function handler(request, response) {
  const { name } = request.query;
  response.status(200).send(`Hello ${name}!`);
}

The above function defines a handler

The image above shows a JavaScript function that defines a Serverless Function within Vercel. This function creates a HTTP endpoint at domain.com/api/hello. This Function takes a query parameter of name, and returns Hello ${name} to the requesting client.

No additional configuration was required to acheive this functionality, simply creating handler functions in the /api/ directory created the defined functions when the project was built and deployed.

Case Study: Shoelace CSS on Vercel

Mock Client
Codebase

Vercel enables users to utilize "preview branches" of their applications to test new features or application updates without pushing them to production. This is a feature not possible in simple deployment platforms like GitHub pages. Through this case study, I will demonstrate how to use preview branches when testing out changes to a web component library.

1. Create a new branch in version control Vercel automatically identifies your main branch in your version control platform. In this example, my main branch is called main and my preview branch is called mayormaier/future. This page shows components that are sourced from the main (production) branch, served at https://shoelace-mayormaier.vercel.app. Vercel treats all other branches in version control as preview branches.

2. Push changes to the new branch When changes are pushed to non-main branches, mayormaier/future in this case, a preview deployment is created.

Because any non-main branch can trigger a preview deployment, one application can have seemingly endless numbers of preview deployments, each to test out new features. In this example, the preview deployment is found here. It is also referenced on this page, where the script tags in the <head> of the page reference the preview deployment. Notice the underlined text in the components, the "new feature" that we wanted to test drive.

<link
    rel="stylesheet"
    href="https://shoelace-git-mayormaier-future-mayormaier.vercel.app/themes/dark.css"
    onload="document.documentElement.classList.add('sl-theme-dark');"
    />
    <script type="module" src="https://shoelace-git-mayormaier-future-mayormaier.vercel.app/shoelace.js"></script>

Conclusion

Ship applications at blazing speeds with Vercel, a service that abstracts much of the configuration details away for their Serverless Functions. Use of vercel is free for most "Hobby" use cases, however it is subject to certain limits on execution time and bandwidth. Enterprise applications may need additional firepower or control. Vercel has a paid tier that unlocks additional performance, but for fine grained control configuring AWS Lambda yourself may be necessary.