Create an Angular App That Builds and Deploys with Vercel

Angular is a popular JavaScript framework for building apps across all platforms; web, mobile web, native mobile, and native desktop.

In this guide, we will deploy an Angular app with Vercel like the following: https://angular.now-examples.now.sh/

Step 1: Set Up Your Angular Project

The most straightforward way to set up an Angular project is to use the official Angular CLI tool. The CLI tool interactively generates an Angular app that works out of the box.

If you don't have the Angular CLI installed globally, use the following command to install it:

npm i -g @angular/cli

Installing Angular CLI global to the system user with npm.

Once the installation is complete, run the following command in your terminal to create a new Angular app:

ng new my-new-app

Creating a new Angular app within a terminal.

Once you run the command, the Angular CLI presents the following options:

• Adding Angular Routing to the project.
• The Stylesheet format to add to the project: css, sass, less, stylus.

For the first option, if you choose Yes, the CLI tool adds routing automatically to the project. Then, you can select your preferred stylesheet format for the second option. Once selected, Angular CLI provides the selected stylesheet format for the project.

After a successful scaffolding, cd into my-new-app directory and run the following command to serve your app in the browser:

ng serve --open

Running your Angular app locally

Your browser will automatically be launched with the served Angular app at http://localhost:4200/

Step 2: Deploy Your Angular Project with Vercel

To deploy your Angular app with a Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following: https://angular.now-examples.now.sh

Set up a Angular app with a few clicks using the Deploy button, and create a Git repository for it in the process for automatic deployments for your updates.