To deploy an Angular app on Azure, the usual path is Azure Static Web Apps: push the Angular project to GitHub, create a Static Web App resource pointing at the repo, and set the build output location to Angular’s dist folder - Azure then builds the app on every push and serves it from a global edge. The one catch that trips everyone is SPA fallback routing, and once you understand that, the same knowledge applies to hosting Angular anywhere.
The Azure portal walkthrough is five steps. The step that actually matters - and the one that produces the mysterious 404 on refresh - is the SPA fallback, so this leads with it.
Table of contents
- The deploy on Azure Static Web Apps
- Getting the build output right
- The SPA fallback catch
- Rules for hosting any Angular SPA
- Where RunxBuild fits
- FAQ
The deploy on Azure Static Web Apps
Push your Angular project to a GitHub repository. In the Azure portal, create a Static Web App resource and connect it to that repo and branch. Azure asks for two build settings: the app location (usually the repo root) and the output location, which for Angular is the dist/your-app-name folder that ng build produces.
Azure wires up a GitHub Actions workflow automatically, so every push builds the Angular app and deploys it to a global edge network. The first deploy writes the workflow file into your repo; after that, it is continuous. There is also a free tier suitable for personal and small projects.
Getting the build output right
The single most common setup mistake is the output location. ng build emits to dist/ under a folder named after your project, and that inner folder - the one containing index.html - is what Azure must serve. Point the output location one level too high and you get a blank deploy; point it at the right folder and the app appears.
It is worth running ng build locally once and looking at exactly what is inside dist/ before configuring the host. The path you see there is the path the host needs. This is true on every static host, not just Azure - the name of the setting changes, the requirement does not.
The SPA fallback catch
Angular is a single-page application: the router handles routes in the browser, and the server only ever has one real file, index.html. Load the site at the root and it works. Navigate to /dashboard inside the app and it works, because Angular’s router handles it client-side.
But refresh the page on /dashboard, and the browser asks the server for /dashboard - a path that does not exist as a file. Without configuration, that is a 404. The fix is SPA fallback: tell the host to serve index.html for any route that is not a real file, so Angular’s router can take over. On Azure Static Web Apps this is the navigationFallback rule. Every Angular deploy needs this, and forgetting it is the classic refresh-breaks-the-app bug.
Rules for hosting any Angular SPA
Strip away the vendor specifics and hosting an Angular app comes down to three rules. Build to the correct output folder and serve that. Configure SPA fallback so deep links and refreshes serve index.html. And set cache headers so the hashed build assets cache long while index.html does not, or users get stale apps after a deploy.
If a backend API is involved, it is a separate concern - the Angular app is static files that call it over HTTPS, and CORS plus the API’s own hosting are handled independently of the static deploy. Keep those two things separate in your head and Angular hosting stops being mysterious.
Where RunxBuild fits
RunxBuild hosts an Angular build as a static site from your GitHub repo, and SPA fallback is a first-class setting rather than a hand-written rule file - it is documented under static/spa, alongside custom domains, headers, redirects, and rewrites. 120GB of bandwidth is included before any per-GB charge.
When the Angular app talks to an API you own, you deploy that backend as a Node, Python, or Docker service on the same platform, with a managed database beside it, so the SPA and its API share one dashboard and one domain. The static front end stays fast and cheap; the API is a separate service it calls - which is exactly the separation the hosting rules above describe.
How this fits the rest of the stack
The cost of a project is the sum of its line items, not the headline number, and the RunxBuild hosting calculator is the right place to add them up: the service, the database, the storage, the bandwidth, each a separate figure. Model it before committing, not after the first invoice. The RunxBuild dashboard is where the running project shows its real usage in one place.
Useful related references:
- Static site generators with Angular
- Jamstack websites
- SPA fallback
- Static introduction
- Services introduction
FAQ
How do I deploy an Angular app to Azure?
Use Azure Static Web Apps: push the project to GitHub, create a Static Web App resource connected to the repo, and set the output location to the dist/your-app folder that ng build produces. Azure adds a GitHub Actions workflow and builds and deploys on every push.
Why does my Angular app 404 on refresh?
Because Angular is a single-page app with only one real file, index.html, and its router handles routes in the browser. Refreshing a deep link asks the server for a path that is not a file. The fix is SPA fallback - configure the host to serve index.html for any non-file route.
What is the build output folder for Angular?
ng build emits to dist/ under a folder named after your project, and that inner folder containing index.html is what the host must serve. Running ng build locally and inspecting dist/ shows the exact path to configure as the output location.
Is Azure Static Web Apps free for Angular?
There is a free tier suitable for personal and small projects, with a paid tier for production needs. The free tier covers the common case of deploying and serving an Angular build with a custom domain and automatic HTTPS.
Where does the Angular app’s API go?
The API is a separate concern from the static deploy. The Angular build is static files that call the API over HTTPS, so the backend is hosted independently as its own service, with CORS configured to allow the static site’s origin.