Working with Vercel

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 repository and adding an .env file with the following contents:

Importing a Repository

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

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!

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

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 you go!

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:

Here and here are my other two blogs I deployed through Vercel, and what they look like:

• 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 article by Michael Potter, or just check out his Red Hat page here! Thanks for reading! :)