angularazureubuntugithub-actionshttp-status-code-404

Refresh 404 - How to configure Url re-write for an Angular app on ubuntu hosted on Azure


I've deployed an Angular 14 app to an Azure App Service and need to setup re-write rules so that refreshing routes doesn't throw 404 errors. Hitting the site root (index.html) works fine, the app functions normally until you try to navigate directly to a route withing the app such as /orders for example.

I deploy using github actions and have setup to run on ubuntu and it's a mystery whether Apache or Nginx are serving pages. I setup a staticwebapp.config.json with navigationFallback rules but this appears to be something used by Azure 'Static Web App' services rather than 'App Services'. Online documentation for this is sparse and there is a ton of info on IIS web.config. SSH doesn't seem to reveal much either. This can't be that difficult unless something huge is missing !

I've tried hunting in SSH, I've tried inspecting response headers on the app, watched videos etc, what's missing ???


Solution

  • As it turns out we don't get url re-writes in Azure Ubuntu / Linux hosted Angular sites in Azure if the Startup command isn't crafted exactly the right way.

    The documenation online for this is very frustrating but here's the issue

    Originally in the Azure App Service Configuration -> General Settings -> Startup Command should look like this

    pm2 serve /home/site/wwwroot --no-daemon --spa
    

    I had omitted the last '--spa' argument and was then sent chasing down how to do rewrites that 'fallback' to index.html.

    --spa does that automagically and there is no need to worry about webserver configurations