React app navigationFallback not working
- Dominant language
- No language data
- Stars
- 346
- Forks
- 67
- PR merge metrics
- No merged PRs in 30d
Description
I have my react application deploying to a static web app but if I try to refresh the page I get a 404. I have read through the documentation around `navigationFallback` and have my staticwebapp.config.json configured as below:
```json
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/assets/*"]
},
"responseOverrides": {
"404": {
"rewrite": "/index.html",
"statusCode": 200
}
}
}
```
My pipeline is configured to create the build artifact in one stage and deploy it in a separate stage. A step in the build stage copies the `staticwebapp.config.json` into the `dist` path that I publish using the task `PublishBuildArtifacts@1` so that it can be used in the following deploy stage.
The deploy stage looks as follows:
```yaml
- stage: DevDeploy
displayName: Dev_WebApp_Container_Deploy
dependsOn: uibuild
variables:
- template: variables-dev.yaml
jobs:
- job:
displayName: app-1 Deploy
condition: and(eq(stageDependencies.uibuild.build.outputs['setVariable.app1'], 'Yes'), and(succeeded(), or(eq(variables['Build.SourceBranch'], 'refs/heads/develop'), startsWith(variables['Build.SourceBranch'], 'refs/heads/feature'))))
steps:
- checkout: none
- task: DownloadBuildArtifacts@1
inputs:
buildType: 'current'
ArtifactName: WebApp
- script: npm i -D @import-meta-env/cli
- script: npx import-meta-env -x $(System.ArtifactsDirectory)/WebApp/app1/.env.example.public -p $(System.ArtifactsDirectory)/WebApp/app1/*
- task: AzureStaticWebApp@0
inputs:
ConnectionType: 'AzureRM'
azureSubscription: '...'
workingDirectory: '$(System.ArtifactsDirectory)/'
app_location: '/WebApp/app1'
output_location: '' # Leave this empty
skip_app_build: true
skip_api_build: true
azure_static_web_apps_api_token: '$(app1_token)'
```
**To Reproduce**
Steps to reproduce the behavior:
1. Create Static Web App
2. Create React app and deploy to SWA
3. Refresh page
4. See error
**Expected behavior**
`navigationFallback` works and client side routing works.
**Additional Info**
I know my `staticwebapp.config.json` is being picked up as I see this in the output from `AzureStaticWebApp@0`:
```
Using 'staticwebapp.config.json' file for configuration information, 'routes.json' will be ignored.
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.