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 file for the deployment configuration.

• Once the deployment is complete, Vercel will provide a live URL for your application (e.g., https://your-project.vercel.app).

4. Sample Deployed Angular Site

Here is an example of my Angular site deployed to Vercel: angularcrosstabchat.vercel.app

Use this as inspiration for your deployment.

5. Handle Angular’s Routing

The vercel.json file ensures that all unknown routes are redirected to index.html, making Angular’s client-side routing work seamlessly. This is achieved with the routes configuration:

"routes": [
  {
    "src": "/(.*)",
    "dest": "/index.html"
  }
]

This setup ensures that your Angular Router handles the routing for all paths.

Conclusion

Leveraging the vercel.json file can simplify the deployment of your Angular v19 site to Vercel. This file handles build configurations and routing, ensuring a smooth deployment process. Once set up, your site will be live and ready to use with minimal effort!

---

I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/
• Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs