Azure / Azure/static-web-apps

React app navigationFallback not working

Open
#1,077 3 comments 1 reaction 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.