Unable to configure a navigation fallback per route with staticwebapp.config.json

[stephanecodes]

I use the same Azure Static WebApp to host multiple docs.
Each doc is an Angular application maintained by a team.

I have a pipeline that deploys every doc dist in the docs directory of the Azure Static WebApp :

/docs/angular-app-1
/docs/angular-app-2

My Azure pipeline looks like this :

   - task: AzureStaticWebApp@0
     inputs:
       is_static_export: true
       app_location:docs
       skip_app_build: true
       skip_api_build: true
       azure_static_web_apps_api_token: SOME_TOKEN

The baseHref of each Angular application varies:

angular-app-1: baseHref="/angular-app-1/"
angular-app-2: baseHref="/angular-app-2/"

To prevent 404 error when refreshing a page, a navigation fallback to index.html of each Angular app is required.
To achieve this, I added a routes.json file into docs directory:

{
   "routes": [
     {
       "route": "/angular-app-1/*",
       "serve": "angular-app-1/index.html",
       "statusCode": 200
     }
     {
       "route": "/angular-app-2/*",
       "serve": "angular-app-2/index.html",
       "statusCode": 200
     },
   ]
}

It works as expected but routes.json is deprecated since months in favor of staticwebapp.config.json.

Is there a way to configure a navigation fallback per Angular application with the new configuration file ?

{
     "navigationFallback": {
         "rewrite": "index.html"
     }
}

In my case navigationFallback.rewrite should be :

• angular-app-1/index.html for angular-app-1
• angular-app-2/index.html for angular-app-2

I have tried putting a staticwebapp.config.json file with the appropriate navigation fallback in each Angular application distribution, but without success.

I can't figure out how to convert routes.json configuration to staticwebapp.config.json

[blowsie]

Have you checked the file is in the root of the deployment files?

[stephanecodes]

Have you checked the file is in the root of the deployment files?

Hi, what file are you talking about exactly and what would be the contents of this file?

[blowsie]

The staticwebapp.config.json need to be deployed to the root of your application

[stephanecodes]

The staticwebapp.config.json or routes.json (obsolete) must be deployed in the directory corresponding to the app_location parameter of the Azure pipeline. This is indeed the case, it is well detected but the problem is that we cannot configure several navigation callbacks, which was possible in routes.json. If you read my question again, that's exactly what I'm asking 😇.

[GaryParr]

Can't you just use the rewrite property for each route?

{
   "routes": [
     {
       "route": "/angular-app-1/*",
       "rewrite": "angular-app-1/index.html"
     },
     {
       "route": "/angular-app-2/*",
       "rewrite": "angular-app-2/index.html"
     },
   ]
}