How to Deploy Angular to Vercel: Step-by-Step Guide

To deploy an Angular app to Vercel, first build your app using ng build --prod to create static files in the dist/ folder. Then, initialize a Vercel project in your Angular root folder and run vercel to deploy the dist/your-app-name folder as a static site.

Syntax

Deploying Angular to Vercel involves these main steps:

• ng build --prod: Builds your Angular app for production, creating static files in the dist/your-app-name folder.
• vercel: The Vercel CLI command to deploy your project.
• vercel.json (optional): Configuration file to specify build and output settings.

bash

ng build --prod
vercel

// Optional vercel.json example
{
  "builds": [
    { "src": "dist/your-app-name/**", "use": "@vercel/static" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

Example

This example shows how to deploy an Angular app named my-angular-app to Vercel.

First, build the app for production. Then, deploy using the Vercel CLI.

bash

ng build --prod
vercel --prod

Output

Vercel CLI [6.x.x]
? Set up and deploy "my-angular-app"? [Y/n] Y
? Which scope do you want to deploy to? YourUsername
? Link to existing project? [y/N] N
? What’s your project’s name? my-angular-app
? In which directory is your code located? dist/my-angular-app
🔗  Linked to YourUsername/my-angular-app (created .vercel)
🔍  Inspect: https://vercel.com/YourUsername/my-angular-app/abcdef1234
✅  Production: https://my-angular-app.vercel.app

Common Pitfalls

Common mistakes when deploying Angular to Vercel include:

• Not building the app before deploying, so dist/your-app-name folder is missing.
• Deploying from the wrong directory instead of dist/your-app-name.
• Missing vercel.json configuration causing routing issues with Angular's client-side navigation.

To fix routing, use a vercel.json file with a rewrite rule to index.html.

json

/* Wrong: Deploying root folder without build */
vercel

/* Right: Deploy after building and specify dist folder */
vercel --prod --cwd dist/my-angular-app

/* vercel.json for SPA routing */
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Quick Reference

Summary tips for deploying Angular to Vercel:

• Always run ng build --prod before deploying.
• Deploy from the dist/your-app-name folder.
• Use vercel.json to handle Angular routing with rewrites.
• Use vercel --prod to deploy to production.
• Check your deployment URL to confirm the app loads correctly.

Key Takeaways

Build your Angular app with ng build --prod before deploying.

Deploy the static files from the dist/your-app-name folder using Vercel CLI.

Use a vercel.json file with rewrites to support Angular's client-side routing.

Run vercel --prod to deploy your app to production on Vercel.

Verify your deployment URL to ensure the app works as expected.