Azure Static Web Apps multi language websites that use microformat (eg en-GB , it-IT )

379 Views Asked by At

It is possible to cleanly support URLs such as

https://www.myawsomeapp.com/en-GB/ https://www.myawsomeapp.com/it-IT/

routes are angular routes and we need the fallback to fallback to the countries content.

the file system has a folder for each microformat and each folder has the translated index.html with accompanying translated JavaScript files.

to make it work you would need two fall backs, one for en-GB and one for it-IT.

You can sort of get it to work with the following

"routes" : [
        {
            "route": "/it-IT/search",
            "rewrite": "it-IT/index.html"
        },
        {
            "route": "/it-IT/customer",
            "rewrite": "it-IT/index.html"
        },
        {
            "route": "/it-IT/about",
            "rewrite": "it-IT/index.html"
        }
]

Where search, customer and about are routes within the app, but for the above you need to repeat this for every language and every route so you soon hit the max file size / max routes for the config.

It would be better if we could do something with fallbacks maybe add baseref and have a collection or allow exclude on the route.

eg

  "navigationFallbacks": [
      {
          "navigationFallback": {
              "baseRef": "en-GB",
              "rewrite": "en-GB/index.html",
              "exclude": [
                  "*.css",
                  "*.js",
                  "*.ico",
                  "*.txt",
                  "*.xml"
              ]
          }
      },
      {
          "navigationFallback": {
              "baseRef": "it-IT",
              "rewrite": "it-IT/index.html",
              "exclude": [
                  "*.css",
                  "*.js",
                  "*.ico",
                  "*.txt",
                  "*.xml"
              ]
          }
      }
  ]

or allow excludes

    "routes" : [
        {
            "route": "/it-IT/*",
            "rewrite": "it-IT/index.html",
            "exclude": [ "*.{js,css}", "/assets/*"]
        }
      ]

My less than perfect work around is to have a route entry in the config for every route but we will soon run out, we could also use # fragments rather than / eg #/about rather than /about but this is less than ideal.

1

There are 1 best solutions below

0
On

This is a known limitation and is discussed here

https://github.com/Azure/static-web-apps/issues/527

I hope it will be resolved as it does limit the use of Static Web Apps