Hassan Sani
Hassan Sani (inidaname)


Hassan Sani (inidaname)

How to deploy your Angular project to Vercel

How to deploy your Angular project to Vercel

Hassan Sani's photo
Hassan Sani
·Apr 8, 2021·

2 min read


I need to stop doing this, anyway, this is a series on how to deploy your Angular application to cloud servers for free.

Using Vercel

Vercel is one of the simplest tools specially built for frontend projects, I don't even know what else to say about it. So without so much ado, I give to you...

Before I start with how you can use the service, here are the prerequisites

Log into your vercel account, on the profile page click on New Project Profile page of vercel

This will navigate to the New Project page with a list of git and template to use, in our case we are using github.com, click on Continue with Github. New Project Page

Authorize and install Vercel's service to your GitHub profile. Github authorization page

You will see the list of your repositories from github profile choose the repo you want to deploy. I am deploying cloud-free (Please ignore my naming, I didn't take a class for that), click on import. List of available repos in git profile

Select the scope of your project, if you have a team account to manage you can use that but in this case I want to manage it on my personal account, so I will choose Personal Account. Vercel scope page

At this stage, you will notice Vercel has auto-detect the framework and you can continue, click on Build and Output Setting. Framework detected

This will dropdown the configuration settings for Build and Output directory, I always recommend changing the output directory to the app name Configuration commands

Now, take a break and watch your project build into the wilderness Building logs

You are done, click on visit Successful deployed

Thank you.

Share this