How to deploy Angular app to Azure
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Azure Static Web Apps provides seamless deployment for Angular applications with automatic builds from Git, global CDN distribution, and built-in authentication. As the creator of CoreUI, a widely used open-source UI library, I’ve deployed Angular applications to Azure throughout my 11 years of Angular development. The most efficient approach is using Azure Static Web Apps service with GitHub integration for automatic deployments on every commit. This method includes free SSL certificates, custom domains, and preview environments for pull requests without manual configuration.
Create an Azure Static Web App and connect your GitHub repository for automatic deployments.
# Install Azure Static Web Apps CLI
npm install -g @azure/static-web-apps-cli
# Login to Azure
az login
# Create Static Web App
az staticwebapp create \
--name your-app-name \
--resource-group your-resource-group \
--source https://github.com/your-username/your-repo \
--location "East US 2" \
--branch main \
--app-location "/" \
--output-location "dist/your-app-name" \
--login-with-github
Or create via Azure Portal and add staticwebapp.config.json:
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/assets/*", "/*.{css,js,png,jpg,svg}"]
},
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
]
}
Here the az staticwebapp create command sets up automatic deployment from your GitHub repository. The –app-location specifies the root directory, while –output-location points to Angular’s build output directory. The staticwebapp.config.json file configures route handling, ensuring all routes redirect to index.html for Angular Router to handle client-side navigation. The navigationFallback excludes static assets from rewriting, serving them directly for better performance.
Best Practice Note:
This is the Azure deployment approach we recommend for CoreUI Angular applications requiring Microsoft ecosystem integration. Use staging environments to test changes before production, leverage Azure’s built-in authentication providers for easy OAuth integration, and configure custom domains with automatic SSL certificate provisioning for professional deployments.
