question

MaciejMisztal-9659 avatar image
0 Votes"
MaciejMisztal-9659 asked bisoh-9078 answered

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

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://docs.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?


azure-static-web-apps
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ryanchill avatar image
0 Votes"
ryanchill answered

Hi @MaciejMisztal-9659,

The doc you are referencing doesn't apply to your circumstance. You're uploading your site content to Azure storage; https://docs.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.

82408-image.png

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


image.png (93.9 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

bisoh-9078 avatar image
0 Votes"
bisoh-9078 answered

Hey @ryanchill

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

Hey @MaciejMisztal-9659

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.

82881-image.png



image.png (34.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.