Azure Static Web App ignores staticwebapp.config.json and routes.json

Question

I've got a static web app containing an Angular SPA. I'm attempting to have all traffic redirected to the index.html in order to have the app handle navigation client-side and allow for site refreshes. AFAIK this is a fairly common practice in Azure Static Web Apps.

My CI process is based on github actions:

• npm install
• npm build --prod
• az strorage blob upload-batch to $web container

All in all, I'm doing my best to follow the documentation as specified here: https://learn.microsoft.com/en-us/azure/static-web-apps/configuration

I've deployed routes.json & staticwebapp.conf.json to the site's root (server-side)
(routes.json should be ignored if the other file is present)

https://reset0ger0d0web.z1.web.core.windows.net/routes.json
https://reset0ger0d0web.z1.web.core.windows.net/staticwebapp.config.json

The site loads properly, however if I navigate and refresh or navigate to a url directly from a browser: https://reset0ger0d0web.z1.web.core.windows.net/kim-jestesmy I get a 404 returned by the underlying storage.

Can anyone explain what's wrong here?

Answer 1

Hi @Maciej Misztal ,

The doc you are referencing doesn't apply to your circumstance. You're uploading your site content to Azure storage; https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website-host, the configuration doesn't apply here.

Luckily, it's hard to switch. First, remove/disable your existing CI/CD workflow. Create a new Static Web App and use the Sign in with GitHub button to associate your static app with your GitHub repo.

Once you hit Review + create, a new GitHub action will be created in .workflow folder in the root of your repo along with .yml. Your config should be processed then. If you run into any issues, feel free to comment below.

Regards,
Ryan

Answer 2

Hey @Ryan Hill

Thanks for your reply. You made me realize there are 2 different resources to achieve this

Hey @Maciej Misztal

I have the same situation as you where my SPA was hosted in blob as static site. I got over this by setting index and error documents' path to the same 'index.html' file. That way any request to my www.mysite.com/* will be redirected to the index.html page where the SPA is hosted and your JS framework will apply the routing. I think it also works when going to www.mysite.com/incorrect/path. I will still check it.

Not the best solution, but for now will get me working till I get some time to use a different infrastructure resource.

Hope this helps.