angulargoogle-app-enginegoogle-cloud-platforminternationalizationangular-i18n

How to deploy Angular multilanguage application on Google App Engine


I've built my Angular 8 application, with angular/cli and i18n multilanguage support (with translations for English, Spanish, French).

So that I can build my app multiple times, one for each language and the build is saved in dist/my-app/en, dist/my-app/es, dist/my-app/fr and so on...

Now I'd like to deploy my app on Google App Engine, but I cannot understand what I should do/configure to deploy all my lang specific versions of my app.

I've already published my default (English) version on GAE and it works, but I don't know how/where to deploy all the other versions (es, fr, etc).

Should I use the dispatch file? What's your best way to do that?

Thanks!


Solution

  • You can consider dist/my-app as your root folder regarding AppEngine.

    To build multiple application with multiple locales, check Angular official docs.

    Each href should be set to locale:

    "baseHref": "/en/",
    

    Then, update app.yaml and handlers to serve all sub-folders.

    For instance, this should looks like :

    handlers:
    - url: /fr/(.+)
      static_files: app/fr/index.html
      upload: app/fr/index.html
    - url: /en/(.+)
      static_files: app/en/index.html
      upload: app/en/index.html
    - url: /(.+)
      static_files: app/index.html
      upload: app/index.html
    - url: /
      static_files: app/index.html
      upload: app/index.html
    

    But I'm not an expert of handlers regexp, so it could be optimized I'm sure.

    Deploy folder should looks like :

    deploy
      app.yaml
      app
        index.html // page to propose user to select locale or auto redirect
        fr
          index.html
          bundles.js...
        en
          index.html
          bundles.js...