Vercel & Eleventy

# What is Vercel & Developer’s Experience

Vercel is a Function-as-a-Service(FaaS). Traditionally, developers would need to create CI/CD pipelines to build and then host their applications somewhere on the internet. This pipeline would require input for the commands to compile the project, package the project as a container, load and run the container, as well as setting up the hostname and paths for the site/application. Vercel basically takes care of that whole process for you and well “it just works”. Vercel will create serverless AWS Lamba functions, compile and host your application, and do most of the configuration for you.

Deploying your first project

For this demonstration we will be doing everything inside of the (Vercel GUI)[https://vercel.com/] with (this GitHub repo)[https://github.com/liljimmyk99/ist-vercel-demo]. The thing can be accomplished by local code and the Vercel CLI.

Once you have created a new account, you will want to intergrate your GitHub/GitLab account as this will automatically pull your repositiories. When this is done, select New Project and you’ll see the following screen. Navigate to the repositiory you’d like to deploy, in my case it is ist-vercel-demp, and select import.

If you are using a framework that is natively supported like Eleventy, React, Vue, or Angular just to name a few, most of these setting will be filled in for you. Since my project is none of those, it is a web-component, I have to manually change these settings. I know from testing this locally, my built project is in a dist folder that is created. Thus my Output Directory must be overrided and switched. I don’t need to change the Build Command or Install Command as the presets are correct for my situation. Your situation may not use the defaults and can be overrided. My application also has environmental variables that are required, but I can easily add them here. When you are satisfied with the settings, you can click Deploy

You will have to wait a couple seconds/minutes for the build and deploy routines to run. You can follow and skim through the logs as the process goes on. On the project is complied, you click a button and it leads you to your project’s page.

Here you can see deployments of your projects, it’s domain name, the branch it used for the deployment, the logs from Build, the logs for serverless functions in the application, and domains created for the application. Satisfied with your information, select Visit to be taken to your website!