DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode
  • 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"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
]
Enter fullscreen mode Exit fullscreen mode

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:

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay