Quick and Easy Deployment with Vercel
Tags: vercel, faas, webdev
Published: 2022-03-13 19:56:39

Recently, I learned about a platform called [Vercel](https://vercel.com/home), which allows for fast and accessible deployment of static sites and frontend frameworks. Given how much legwork can be involved in getting a site deployed, a system like this can be a game-changer for developers who don't need an overly complex deployment of their frontend. 

Businesses have started to see the value in this too, as the platform now has a ton of customers, including: McDonald's, The Washington Post, Facebook, Patreon, Uber... The list is impressively long and filled with household names. 

So, what makes Vercel so special? Let's find out. 

## What is Vercel? ##
Simply put, Vercel is a [Function as a Service](https://www.redhat.com/en/topics/cloud-native-apps/what-is-faas#how-does-faas-work) (FaaS). This essentially means that the platform handles most of the extra stuff involved with deploying a website, so developers don't have to. That "extra stuff" could be infrastructure such as servers or the extensive CI/CD configuration needed to deploy a site, both of which take some work on the developer's end to get set up and maintained.

What makes Vercel so great? It's super good at the whole FaaS thing and makes it really easy for developers to go from localhost to having a site anyone can access. Vercel provides a short and easily-repeated process for developers to deploy their sites through the platform, allowing for additional configuration but taking care of most of it already--making life a lot easier for someone (like me) who just wants a quick and easy way of deploying a site. It also automatically scales due to its offer of serverless deployment for users, and allows developers to customize integrations and setup for their projects.

## Getting Started ##
To better understand Vercel, let's import a project into Vercel from GitHub. To do so, first set up an account with Vercel (it's free) and link your GitHub account in Vercel. On your Vercel Dashboard, you'll see a **New Project** button. Click that, and you should see the following screen:

![Create Project Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rpslenobv20nudwjb7l.png)

As you can see, I have the option to import from a Git Repo on the left and Vercel has access to my GitHub projects. Before importing a project to deploy, make sure your project is up-to-date in GitHub. When you click the **import** button, you'll have some configuration to do with your project:

![Configure Project Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy6lr4vu95zfgp9ywxxc.png)
 
> In most cases, you won't have any issues here. If your **Framework Preset** box on this page is set to "Other," your project isn't using a framework that Vercel automatically supports. That's perfectly fine, you may just need to update the "Output Directory" dialog box in the **Build and Output Settings** to match your specific project's expected output directory (often "_site" or "dist". If you notice your project is not deploying properly, this can also be done in the **Settings** tab of your project once it's set up.

As long as you like the name of your project, you can hit the **Deploy** button! When you do, you'll probably see a page like this, and you're good to go!

![Success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8j891nfveoi8g33jay18.png)
 
Now, your site is deployed through Vercel and you can access it any time from the link the platform provides. Any time you update the `main` branch of the GitHub repository you linked Vercel, the site automatically updates to reflect your changes. 

> _If you'd like to see more, Vercel also has a very useful [docs](https://vercel.com/docs/get-started) page with demos of how to set up quite a few commonly-used frontend frameworks._ 

## My Experience Thus Far ##
Using Vercel, I've already deployed four websites! 

The first three were 11ty demos I discussed in [this article](https://dev.to/dronk6/static-site-generation-working-with-eleventy-3l9p), all of which were incredibly easy thanks to Vercel's support for 11ty. Even the last demo in my 11ty article, which fought me tooth and nail when I tried to deploy it using GitHub Actions, deployed with ease using Vercel. 

The last demo site I deployed was from RedHat's Michael Potter, which can be found [here](https://github.com/btopro/ist-vercel-demo). As the demo uses [Lit](https://lit.dev/), I had to clone the project locally via GitHub, install Vercel globally, run `npm install`, and run `vercel dev` to get the project properly tied to Vercel. I also had to override the "Output Directory" dialog box in the **Build and Output Settings** and set it to "dist" for the project to successfully deploy. These extra steps seem to be a common thing for frameworks outside those automatically supported by Vercel, but I could be wrong.

Included below are the links to all four projects, as well as screenshots of how they look on Vercel:

### 1. 11ty: Getting Started Guide ###
**GitHub:** https://github.com/dronk6/11ty-sample
**Vercel Site:** https://11ty-sample-seven.vercel.app/
**How it looks on Vercel:**
![11ty Getting Started Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnp6vxjbtmlly25szhxw.png)
 
### 2. 11ty: Base Blog ###
**GitHub:** https://github.com/dronk6/11ty-base-blog
**Vercel Site:** https://11ty-base-blog.vercel.app/
**How it looks on Vercel:** 
![11ty Base Blog Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/079ylk0r7km1ks0absub.png)
 
### 3. Malte Ubl x Google: Eleventy High Performance Blog ###
**GitHub:** https://github.com/dronk6/11ty-high-performance-blog
**Vercel Site:** https://11ty-high-performance-blog.vercel.app/
**How it looks on Vercel:**
![High Performance Blog Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/meyd6p2tnmnp60kuj7vm.png)
 
### 4. IST Vercel Demo ###
**GitHub:** https://github.com/dronk6/ist-vercel-demo
**Vercel Site:** https://vercel-demo-blond-psi.vercel.app/
**How it looks on Vercel:** 
![Vercel Demo Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipfq46n4h910w33bw930.png)
 
### The Developer Experience ###
One of Vercel's main goals is to improve DX, and I'd say they do so successfully. Where other CI/CD offerings such as GitHub Actions require most of the setup to be manually done by the developer, Vercel abstracts a lot of this and only asks for input from the developer where absolutely necessary. This allows for faster feedback loops during development and less confusion for the developer, which I really appreciated. Where I felt like I was a little in the weeds with GitHub Actions and was basically just guessing at what needed to be fixed when I ran into an issue, Vercel was guiding me in the right direction by default and offering me the option to do more once we got a basic setup. I really appreciated this kind of experience as I am not well-versed with site deployment.