How to properly deploy an Angular i18n app on Azure Static Web Application?

Question

I have things mostly working, but this staticwebapp.config.json is causing me more trouble than a typical nginx or apache configuration.

This is an Angular 15 Application with i18n configured.

My project.json (NX project) has the appropriate i18n configuration and baseHref. This all seems to be working.

"i18n": {
  "sourceLocale": "en-US",
  "locales": {
    "es": {
      "translation": "/locale/messages.es.xlf",
      "baseHref": "/es/"
    },
    "en": {
      "translation": "/locale/messages.xlf",
      "baseHref": "/en/"
    }
  }
}

When my build process completes, it builds each translated copy of the app in a sub directory.

dist/
  myapp/
    en/
      <all app files>
      index.html
    es/
      <all app files>
      index.html

in order for Azure SWA to be happy with that output, i added a touch dist/apps/myapp/index.html to my pipeline.

My staticwebapp.config.json looks like this... (the idea is to default to english, and have the application check the browser locale and/or database value for selectedLanguage and then reroute accordingly)

{
  "trailingSlash": "auto",
  "routes": [
    {
      "route": "/",
      "rewrite": "/en/index.html"
    },
    {
      "route": "index.html",
      "rewrite": "/en/index.html"
    },
    {
      "route": "/en/*",
      "rewrite": "/en/"
    },
    {
      "route": "/es/*",
      "rewrite": "/es/"
    }
  ],
  "navigationFallback": {
    "rewrite": "/en/index.html",
    "exclude": ["/en/.*", "/es/.*"]
  }
}

As far as I'm concerned https://[mydomain]/en/ works. https://[mydomain]/es/ works. Each application is properly translated and working. However, if I add anything more to the url and refresh, I am met with a blank white page.

https://[mydomain]/en/profile for example, will not work.

How do I update this staticwebapp.config.json file to keep everything working correctly, but also address all the app routes in their given base hrefs.

Answer 1

For me, this was a three-part solution:

1. it wasn't obvious, but the staticwebapp.config.json file did not end up in the root dir during the build and deploy pipeline. (Even though the pipeline showed this log message Using 'staticwebapp.config.json' file for configuration information, 'routes.json' will be ignored.) I solved this by adding && cp apps/myapp/staticwebapp.config.json dist/apps/myapp in my package.json (I will replace this as a pipeline step itself.)
2. Azure SWA requires an index.html file at the root dir, and there isn't one when you build with i18n. So again I solved this by adding && touch dist/apps/myapp/index.html (Also will be replaced as a pipeline step.)
3. Used the following staticwebapp.config.json

{
  "trailingSlash": "auto",
  "routes": [
    {
      "route": "*.{js,json,css,jpg,png,ico,webmanifest}"
    },
    {
      "route": "/",
      "rewrite": "/en/index.html/"
    },
    {
      "route": "/en/*",
      "rewrite": "/en/index.html/"
    },
    {
      "route": "/es/*",
      "rewrite": "/es/index.html/"
    }
  ]
}