Azure / Azure/static-web-apps

Clarification regarding correct staticwebapp.config.json settings for React

Open
#438 16 comments 3 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.