Vercel

More recently, I learned about Vercel and what is has to offer. Companies such as Netflix, TikTok, Hulu, and Uber to name a few use Vercel's platform. Vercel is a platform that creates for a smooth creation and deployment of applications. It enables a more efficient way to develop, preview, and ship. It is great for productions because it has automatic deployments. Getting started with Vercel is pretty simple and easy.

How to Get Started with Vercel

Once a repository is created through a GitHub account, make sure that all code is pushed. The first thing about Vercel is to make sure that it is hooked up to you GitHub account. From there you can import by creating a new project from the Git Repository. The import could take seconds up to minutes. From there is should be deployed and become a .vercel.app.

When you open it in an IDE such as VSCode, there should be a folder created within the directory .vercel with a project.json file that contains the project and org ID.

Another important aspect when working with Vercel is to note that in the .gitignore file .vercel is added. These are files that are ignored when added to version control in a GitHub repository.

Vercel Example to Build

When first running the Vercel example project (ist-vercel-demo), I ran into a few issues that prevented a smooth deployment. One of the errors that I received pertained to the Output Directory "public" that was documented to be found after the Build was completed. It is important to note also the direction it is pointed out and following the commands that follow vercel dev.

This could be resolved by the Project Settings, in Advanced enable Directory Listing and override the Output Directory in General.

Platform Links to Content

For more content about read an article by Michael Potter: Red Hat Article.

More reading on Vercel:
Vercel Reading #1.
Vercel Reading #2.

Other Sites on Vercel Deployed

Following the steps above, Vercel can be used to deploy. It is easy in just a few button clicks once registered to get a deployment. Below shows the visualizations of the 11ty site(s) that I have been working on recently to better comprehend and understand. This can be read more in the article: 11ty Article.

1:

2:

3:

CI/CD Pipeline

The pipeline steps would be to build, test, release, and deploy. Below shows a visualization. Vercel has Build and Output Settings that allow the configuration of the project build. Within GitHub, there are GitHub Actions which provide the CI/CD pipeline that updates in real time. The set up, while different, is also simple and allows for a smooth way to maintain and not need to run manually. This all creates the eXperience.

Thank You!