Deploying Your Angular v19 Site to Vercel

Vercel’s free hosting platform provides an easy way to host your website. This guide focuses on deploying a personal Angular v19 site using only a vercel.json file for configuration.

1. Prepare Your Angular Project

Start by ensuring your Angular project is production-ready:

• Run the following command to generate a production build:

ng build --configuration production

• The build will output files to the dist/<project-name> directory.

2. Set Up a vercel.json File

The vercel.json file defines your Angular project’s build and routing configurations. Create this file in the root of your project with the following content:

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist/<project-name>/browser"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Replace with the name of your Angular project as it appears in the dist directory.

3. Deploy Your Project

• Push your Angular project to a Git repository (e.g., GitHub, GitLab, or Bitbucket).
• Go to Vercel’s website and log in.
• Create a new project and link it to your repository.
• Vercel will automatically detect and use the vercel.json…