4

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!

Thierry Falvo
  • 5,892
  • 2
  • 21
  • 39
user2010955
  • 3,871
  • 7
  • 34
  • 53

1 Answers1

4

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...
Thierry Falvo
  • 5,892
  • 2
  • 21
  • 39
  • Thank you @thierry so inside my dist / Angular folder in my PC I should have all the folders generated by ng build for each language (e.g dist/en, dist/fr, dist/es), then I should configure the app.yaml to deploy to GAE all the dist folder with its subfolder, correct? And then what else? I suppose I should change the base href according to /en, /fr etc ... – user2010955 Jul 01 '19 at 16:11
  • 1
    You're right! I've just updated my answer with more details. – Thierry Falvo Jul 01 '19 at 17:03
  • Thanks, in few hours I'll try it and let you known – user2010955 Jul 01 '19 at 18:02