Getting Started with Vercel Based Development
Tags: vercel, beginners, tutorial, webdev
Published: 2022-03-13 02:17:32

#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. 

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

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.

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

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.


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

#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`.

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

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


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


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

#Platform Links to Content
For more content about read an article by Michael Potter: [Red Hat Article.](https://www.redhat.com/architect/micro-frontend-architecture)

More reading on Vercel:
[Vercel Reading #1.](https://vercel.com/docs/concepts/projects/environment-variables)
[Vercel Reading #2.](https://vercel.com/docs)

#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.](https://dev.to/taylorbracone/getting-started-with-11ty-17ap)

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

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

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

#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.

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

#Thank You!