Getting Started With Vercel
Tags: webdev, vercel, tutorial
Published: 2022-03-14 03:39:47

Are you sick and tired of configuring your Github pages yet still failing to deploy your project? If you are, I got a solution for you. 
 
## Vercel
As you know, there is sometimes always a solution to our problems. With Vercel, we can skip the tedious GitHub pages workflow and build and deploy projects faster and more scalable. 
![Image description of meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ltkkq76bkx4tplj5kn0.png)
So what is Vercel? [Vercel](https://vercel.com/docs) is a platform for building front-end frameworks for static sites that developers can integrate with headless content, commerce, or database applications. With their frictionless developer experience, they handle the hard stuff, like deploying, scaling automatically, and providing personalized content worldwide.

A couple of weeks ago, I struggled to deploy a recent lab to Github pages, and their workflow was just complicated and time-consuming. When I found out about Vercel, I quickly imported the repo and deployed my project faster than I could've ever thought. An excellent user experience, in my opinion.

So enough chit chatting, let's deploy a project using Vercel. 

## Getting Started

1. First, [create an account](https://vercel.com/signup) with Vercel.

2. Fork and clone this [repository](https://github.com/btopro/ist-vercel-demo) onto your local machine. 

3. There is a .env file needed for this to work locally. Create a .env file in the git repo you cloned down locally.
![Creating a file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zritzbt5eulpgqgc7dgb.png)

4. Inside this file add this content and commit your changes: 
![Image description of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbntp9qf77e1th4sv076.png) 

5. In your Vercel account create and import your repo. 
![Image description of vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73yceb5svciyfh17udnk.png)

6. Quickly configure your project, override the output directory with `dist`, and deploy the project.
![Image description of output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytb2wu8ogh39e988v579.png)

---
Once you have successfully deployed your project, a confetti animation will display, showing you the Vercel site and link you can access anytime from anywhere. 

![Image description of vercel site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/082n2weot5qjrh06qtka.png)[View Vercel site](https://ist-vercel-demo-red.vercel.app/)

## Thoughts?
There's a big difference when deploying your CI/CD pipeline in Vercel comparing Github. 

I found it very useful and deployed three other recent labs I have accomplished. Please take a look at them and view how effectively Vercel is. 

**11ty**
Vercel site: https://eleventy-seven-orpin.vercel.app/
![Image description of 11ty](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqolbtj77tossli77mjz.png)

**hello-world-11ty**
Vercel site: https://hello-world-11ty.vercel.app/
![Image description of 11ty-hello-world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtanrwbk6vchar5nm4q2.png)

**11ty template**
Vercel site: https://11ty-template.vercel.app/

![11ty temp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2snpo0t5yrmt0rtfggsw.png)
 
---
Now that you have a view and deployed your project with Vercel, I would like to know your thoughts on your overall experience. Would you consider deploying projects in Vercel instead of Github?

Also, if you're curious, I have been lately learning micro frontend architecture and its benefits. If you would like to learn more about it, please check out this article by Michael Potter on [How to use micro frontends to architect web apps](https://www.redhat.com/architect/micro-frontend-architecture).

---
**Resources**
1. https://www.redhat.com/architect/micro-frontend-architecture
2. https://vercel.com/docs