Working with Vercel
Tags: beginners, webdev, javascript, programming
Published: 2022-03-17 03:05:11

## What is Vercel?
Vercel allows users to circumvent the deployment process within GitHub (which of course we all love and enjoy very much) and deploys these websites much more quickly and efficiently. 

## Lets Start!
To begin, you will want to create an account with Vercel; be sure to link it to your GitHub account so that you are easily able to import any of your previous projects and repositories as projects in your Vercel account. 

You may also want to download Vercel onto your personal computer, which you are able to do with this line of code in terminal:
`npm i -g vercel`

Lastly, for beginners' sake, I began with cloning [this](https://github.com/heyMP/ist-vercel-demo) repository and adding an `.env` file with the following contents: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yc2lt6odwv356ka15k90.png)

## Importing a Repository
Once you connect your GitHub, you should be able to import from your repositories as shown here:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k21igubb04ukohug6drs.png)

Once you select a repository and click "import", you will then click "deploy". If you're like me, you will get an error about one minute into this deployment. But don't fret, there is an easy fix! If you go into the project's settings, shown in the image below, you simply need to click the override switch for "Output Directory" and enter "dist" in the blank to ensure your project is being outputted into the right folder, and save. This took me a long time to figure out, but lucky you, I am just going to tell you! 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zr5fvyce914vodxurmav.png)

This is what my site looked like after the deployment went successfully:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9b5pdf18f5387mjqiper.png)

## Other Repositories
After you master this beginner project upload in Vercel, you will be able to do this with any of the repositories on your GitHub that your heart desires. If you wanna take a peek at an example of mine, [here](https://github.com/hek5118/11ty) you go! 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbz59d6ji0cy8boz8nwm.png)

You should also be able to see something like this in the top left corner of your repository on GitHub once you deploy it in Vercel:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adrsks4vlzlcr97vxl11.png)

[Here](https://github.com/hek5118/11ty-hax) and [here](https://github.com/hek5118/11tyHello) are my other two blogs I deployed through Vercel, and what they look like:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwlxwici53zdsp3u6l31.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysqvlon94ps136cibfgr.png)

* Note, the latter one did not display correctly because of an issue with our original project, not Vercel or the deployment.

And Voila! We are done! If you'd like some more background into micro frontends, feel free to look at [this](https://www.redhat.com/architect/micro-frontend-architecture) article by Michael Potter, or just check out his Red Hat page [here](https://www.redhat.com/architect/users/michael-potter)! Thanks for reading! :)