CODEWITHSUNDEEP
angulargoogle-app-enginegoogle-cloud-platforminternationalizationangular-i18n
user2010955
user2010955

Reputation: 4011

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!

Upvotes: 4

Views: 1221

Answers (1)

Thierry Falvo
Thierry Falvo

Reputation: 6290

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

  • Add an index.html inside this folder (to redirect to default locale depending on browser preferences or by let user choosing).
  • Deploy entire folder as one app in GAE.
  • Each localized app will be sub-folders, and then served by GAE as https:///xxxx.appspot.com/en/...

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...

Upvotes: 4

Related Questions