Developer Experience with Vercel
Published: 2022-03-13 20:36:21

## What is Vercel? ##
Vercel is a platform that allows you to import existing applications or make new ones from a template and deploy them easily. Vercel is based on UI functions which makes the developer experience much easier, and it offers many customization options.

Companies like Marvel, McDonald's, IBM, and more use Vercel for use cases such as marketing, news, and ecommerce. In this article, we will walk through deploying a basic application and 11ty sites with Vercel, as well as discuss why Vercel may be the best choice for your application's CI/CD pipeline. For further reading on Vercel, check out their [documentation](https://vercel.com/docs), or [this article](https://www.redhat.com/architect/micro-frontend-architecture) by Michael Potter at Red Hat.

## Deploying an application with Vercel ##
To get started, be sure to have a GitHub account as it will need to be linked to your Vercel account. An existing repository with an application is also necessary to continue. Once your accounts are linked, go to your Vercel Dashboard and click `+ New Project`. Import the application repository from your GitHub account, give this project a name. You are free to change the settings shown in the following screenshot.
![project settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szxx0ihz5kp5sciyxcoy.png)
One setting I recommend altering is the `Output Directory` to ensure the project builds and deploys correctly. In my case, my application's output directory is called `_site`. It can be left at default, but I found issues with building the project with Vercel in doing so.

Click `Deploy`, and Vercel will take care of building and deploying your application! To update the build or to get it to run initially, push code to your Git repository and Vercel will do it automatically.
![deployed demo app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ec4ork05ncblhnub77m9.png)

## Deploying 11ty Sites with Vercel ##
Deploying an 11ty site is just as easy! Follow the same steps: import your Git repo with the 11ty site into Vercel, change any settings or leave the defaults, and hit `Deploy`. This shows how easy Vercel is to use, and how versatile it can be with different types of applications.
![demo blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk3657dxno0fni0bgeun.png)
![template blog 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ldj0wc7vzrun3fyigzq.png)
![template blog 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xzkob5cz9t4a0mqffxz.png)

## CI/CD Pipeline Comparisons ##
In the CI/CD pipeline, Vercel is the quickest and easiest to work with that I have used. In combination with GitHub actions, Vercel works automatically every time you push code to the connected repo, and the build and deployment is fully customizable through a user interface. In the past, I used code in a YAML file in my CI/CD pipeline. This works, but the user interface Vercel has makes this much easier to maintain. The developer experience with using Vercel is great since it is so versatile, customizable, and "just works" for any of your applications.