How to deploy Angular app to Vercel
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Vercel provides seamless deployment for Angular applications with automatic Git integration, preview deployments for pull requests, and instant global distribution via edge network. As the creator of CoreUI, a widely used open-source UI library, I’ve deployed Angular applications to Vercel throughout my 11 years of Angular development. The most efficient approach is creating a vercel.json configuration file and connecting your Git repository to Vercel. This method enables zero-config deployments with automatic framework detection and optimized performance.
Create a vercel.json file with rewrite rules and connect your repository to Vercel.
{
"buildCommand": "npm run build",
"outputDirectory": "dist/your-app-name",
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
Here the buildCommand runs npm run build which executes Angular’s production build. The outputDirectory specifies dist/your-app-name where Angular outputs the compiled application (replace your-app-name with your project name from angular.json). The rewrites configuration ensures all routes rewrite to index.html, allowing Angular Router to handle client-side navigation. This prevents 404 errors when users directly access routes like /dashboard or /profile.
Best Practice Note:
This is the deployment solution we use for CoreUI Angular applications requiring instant global performance. Configure environment variables in Vercel dashboard for different deployment environments, leverage Vercel’s preview deployments to test changes before merging, and use Vercel Analytics to monitor Core Web Vitals and application performance in production.
