Managing multi language

Design
1

Good day people!

I am kinda new to Ember, I have read the doc quite a few times but without yet the opportunity to experiment it. I just started a new personal project and I am looking forward for advices to design my app correctly.

I am going to use multi language for my site, after some research, I found i18n module.

I have set up the basics, the first trads and a few routes.

I want URLs following this pattern: mysite.com/lang = index/home page mysite.com/lang/page = other pages Hence, my router is looking something like that:

this.route('lang', { path: '/:lang' } , function() {
    this.route('index', { path: '/' });
    this.route('404', { path: '/*wildcard' });
    this.route('somepage', { path: '/somepage' });
});

Now I want to manage the default language, I created the script that will prioritize: URL > Navigator > default (in config). I now have to define where to include it.

Say, locales are en & es. zh is not a supported locale. en is the default language.

It needs to be executed everytime I am accessing a route:

(I also installed this for injection).

Here is my question: where do I put my redirection script? Should I reopen the Controler class? The Route class?

Thank you.

2

I’m using ember-intl, but some of the things I do might help you too.

I would advise against the dynamic segment in the URL. AFAIK you’ll probably need to proxy all requests (much like the 404 page) to a route that will forward requests on to other routes programmatically.

What I did was to detect(in application route) and use the UA language where possible. I also add a default locale for plain ol’ english if no the user doesn’t accept any languages the application has available.

3

Hello, I quickly looked into this addon, it seems interesting, I will check further and see if I could use it. Editing the App Route seems a good place indeed, I will certainly do that.

If you don’t use a dynamic segment, do you have the language in the URL at all? How do you handle SEO?

Thanks

5

I’ve been meaning to put together a tutorial on this. The gist is, I mount an express router on every language prefix , /en, /fr, /nl, etc.

When the request is made to serve up the ember app, I thread the prefix through to Ember as a global that is used to set the router’s rootURL.

This way, your routes within Ember-land do not need to know about :lang it’s just implied as the prefix for every route. Side note, this is also how I preload the document with the requested language’s translations instead of blocking to fetch the translations or building the translations with the app code.

I may eventually publish an optional addon as part of the ember-intl suite to make this easy to adopt.

6

@jasonmit I’m interested in how you’re doing the threading. I’m not running express though.

I’d considered creating a lang route that acts as the parent to the rest of the routes, but I don’t like that approach because it requires that every user transition to a lang route, even if the user is visiting the default.

7

Any webserver that is serving up the index.html document would be sufficient. The TL;DR; I enumerate over all the locales/siteroots (en, fr, fr-ca, etc.) and mount an express router and register a middleware that contains the translations and siteroot in scope of the middleware function. When a request is made to /fr/*, I know the siteroot is fr and to send down just the French translations in the document.

This is done using any templating engine (like lodash-template). I then write serialize them into the document and upon initialization of the Ember app it retrieves them, sets the rootURL, and registers the translations.

1 Like
8

@jasonmit hi man did you create addon maybe :slight_smile: I am trying to add :lang to main index route. But I am getting error :confused: . Is it possible to add lang in url without addind new route that wrapping all my routes (more then 50). So I can avoid changing all link-to helpers, methods transitionTo & transitionToRoute…

9

@varto1488 I haven’t spent the time to abstract this out into its own addon.

However rootURL may cover what you’re asking. For one of our apps, we dynamically set the rootURL based on the incoming request. This way, our route names remain the same.

1 Like
10

Is there any way to assing locale from localeStorage to rootURL ? :confused: Because I am storing language there…

11 
// app/router.js
const Router = Ember.Router.extend({
  rootURL: '/' + localStorage.getItem('lang') + '/'
});

...

Should work just fine.

12

I tryed that already I dont receive errors but I dont see any changes in url the same as before http://localhost:4200/#/movies should be http://localhost:4200/#/en/movies when I check localStorage I have value there. I also tryed to concatenate in index path but that failed sadly xd @route 'index', path: '/' + rootURL. I also dont know is that rootURL related with url what is present there, because if I set hardcoded string 'blalala' to rootURL I also dont see that in URL maybe is my Ember version… its 1.11 or my locationType: ‘hash’ I dont know what else to try…

13

Hard for me to help without seeing the project.

14

I know :confused: it is big project. I found the way to see language in url (change locationType to be history insted of hash) but then my assets receive 404 error do you know where to change path for them I already tried in index.html. As per official ember guide but maybe I dont have that in Ember 1.11. <link rel="stylesheet" href="{{rootURL}}assets/vendor.css"> <link rel="stylesheet" href="{{rootURL}}assets/app-name.css"> This is not working {{...}} this syntax in html document

15

You likely do not need the {{rootURL}} in your template and can simply use / in place of it (in majority of the cases). rootURL has gone through a bit of changes in ember-cli. See: Upcoming deprecation of baseURL in Ember CLI 2.7

16

Great I have problem now only when I refresh page and update with new selection from dropdown :confused: .So I am able to go in different routes but on refresh this error happens. Why its trying to find folder with language name.

in config/environment.js I have this:

locationType: 'history',
baseURL: '/',

and in router.js

Router = Ember.Router.extend
  location: config.locationType
  rootURL: '/' + localStorage.getItem('locale') + '/'

1722×1040 55.6 KB

17

How do you approach this with a fastboot server? Do you set the locale within the instance-initializer?