How to deploy Angular app to Netlify
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Deploying Angular applications to Netlify provides automatic builds from Git repositories, instant rollbacks, and global CDN distribution without server configuration. As the creator of CoreUI, a widely used open-source UI library, I’ve deployed Angular applications to Netlify throughout my 11 years of Angular development. The most straightforward approach is connecting your Git repository to Netlify with proper build settings and a netlify.toml configuration file. This method enables automatic deployments on every commit with zero-downtime updates.
Create a netlify.toml file with build settings and connect your repository to Netlify.
[build]
command = "npm run build"
publish = "dist/your-app-name"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Here the build command specifies npm run build which executes ng build for production. The publish directory points to dist/your-app-name where Angular outputs compiled files (replace your-app-name with your actual Angular project name from angular.json). The redirects section ensures all routes redirect to index.html, enabling Angular Router to handle client-side routing properly. Without this redirect rule, direct navigation to routes like /about would return 404 errors.
Best Practice Note:
This is the deployment approach we recommend for CoreUI Angular templates requiring fast, global distribution. Set environment variables in Netlify dashboard for production API URLs, enable automatic branch deploys for preview environments, and use Netlify’s built-in form handling and serverless functions for backend features without separate API servers.
