Clarification regarding correct staticwebapp.config.json settings for React
- Dominant language
- No language data
- Stars
- 346
- Forks
- 67
- PR merge metrics
- No merged PRs in 30d
Description
With no `staticwebapp.config.json` file, my React app runs, and is able to perform its own URL rewriting for internal routing. However as soon as a rewritten URL is reloaded (Ctrl-R) I get a 404.
I've tried iteratively all the suggestions I can find about adding `routes` and `navigationFallback` sections, but to no avail... I only manage to make things worse to the point where my app fails to load with the browser console complaining about things such as `Refused to apply style from 'https://xxx.azurestaticapps.net/static/css/xxx.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.` In other words, it's like it's completely ignoring the contents of the `exclude` key of the `navigationFallback` section.
The documentation is remarkably unclear about this. There's still more out there that talks about the old `platformErrorOverrides` than about `navigationFallback`, and there's nothing at all I can find that's React-specific.
Can someone please clarify what I need to make reloads & direct navigation to internally routed pages work?
Below is what was utterly breaking my app, assembled over many iterations from snippets of advice found here and via web searches. The `mimeTypes` section got added to try to get around the MIME type errors, but to no avail. Deleting the `staticwebapp.config.json` file at least returned me to the original problem.
```json
{
"routes": [
{
"route": "/*",
"rewrite": "/index.html"
}
],
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/static/js/*", "/static/css/*", "*.json"]
},
"mimeTypes": {
".json": "text/json",
".js": "text/javascript",
".css": "text/css"
}
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.