# Managing multi language **URL:** \ **Category:** Design\ **Created:** [April 5, 2016, 8:49pm UTC](https://discuss.emberjs.com/t/managing-multi-language/10358 "2016-04-05T20:49:24Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![Maelstrom](https://avatars.discourse-cdn.com/v4/letter/m/b5e925/32.png) [@Maelstrom](https://discuss.emberjs.com/u/Maelstrom)\ **Post date:** [April 5, 2016, 8:49pm UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/1 "2016-04-05T20:49:24Z")
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](https://github.com/jamesarosen/ember-i18n/wiki) module. I have set up the basics, the first trads and a few routes. I want URLs following this pattern: [mysite.com/lang](http://mysite.com/lang) = index/home page [mysite.com/lang/page](http://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: - [mysite.com](http://mysite.com) → [mysite.com/en](http://mysite.com/en) - [mysite.com/page](http://mysite.com/page) → [mysite.com/en](http://mysite.com/en) - [mysite.com/zh/somepage](http://mysite.com/zh/somepage) → [mysite.com/en/somepage](http://mysite.com/en/somepage) (I also installed [this](https://github.com/kellyselden/ember-i18n-inject) for injection). Here is my question: where do I put my redirection script? Should I reopen the Controler class? The Route class? Thank you. ---
**Author:** ![uitgewis](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/uitgewis/32/12205_2.png) [@uitgewis](https://discuss.emberjs.com/u/uitgewis)\ **Post date:** [April 6, 2016, 8:50am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/2 "2016-04-06T08:50:23Z")
I’m using [ember-intl](https://github.com/jasonmit/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. ---
**Author:** ![Maelstrom](https://avatars.discourse-cdn.com/v4/letter/m/b5e925/32.png) [@Maelstrom](https://discuss.emberjs.com/u/Maelstrom)\ **Post date:** [April 6, 2016, 3:53pm UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/3 "2016-04-06T15:53:54Z")
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 ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [April 17, 2016, 10:36pm UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/5 "2016-04-17T22:36:52Z")
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](https://guides.emberjs.com/v1.10.0/routing/#toc_specifying-a-root-url). 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. ---
**Author:** ![Garrick](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/garrick/32/12156_2.png) [@Garrick](https://discuss.emberjs.com/u/Garrick)\ **Post date:** [August 26, 2016, 7:50pm UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/6 "2016-08-26T19:50:34Z")
@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. ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [August 27, 2016, 5:37am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/7 "2016-08-27T05:37:33Z")
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. ---
**Author:** ![varto](https://avatars.discourse-cdn.com/v4/letter/v/46a35a/32.png) [@varto](https://discuss.emberjs.com/u/varto)\ **Post date:** [June 28, 2017, 10:24am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/8 "2017-06-28T10:24:19Z")
@jasonmit hi man did you create addon maybe 🙂 I am trying to add :lang to main index route. But I am getting error 😕 . 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… ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [June 29, 2017, 5:11am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/9 "2017-06-29T05:11:29Z")
@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. ---
**Author:** ![varto](https://avatars.discourse-cdn.com/v4/letter/v/46a35a/32.png) [@varto](https://discuss.emberjs.com/u/varto)\ **Post date:** [June 29, 2017, 8:31am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/10 "2017-06-29T08:31:25Z")
Is there any way to assing locale from localeStorage to rootURL ? 😕 Because I am storing language there… ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [June 29, 2017, 8:45am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/11 "2017-06-29T08:45:53Z")
```nohighlight // app/router.js const Router = Ember.Router.extend({ rootURL: '/' + localStorage.getItem('lang') + '/' }); ... ``` Should work just fine. ---
**Author:** ![varto](https://avatars.discourse-cdn.com/v4/letter/v/46a35a/32.png) [@varto](https://discuss.emberjs.com/u/varto)\ **Post date:** [June 29, 2017, 11:47am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/12 "2017-06-29T11:47:32Z")
> [@jasonmit](#): > > rootURL: ‘/’ + localStorage.getItem(‘lang’) + ‘/’ 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… ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [June 30, 2017, 3:27am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/13 "2017-06-30T03:27:20Z")
Hard for me to help without seeing the project. ---
**Author:** ![varto](https://avatars.discourse-cdn.com/v4/letter/v/46a35a/32.png) [@varto](https://discuss.emberjs.com/u/varto)\ **Post date:** [June 30, 2017, 1:57pm UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/14 "2017-06-30T13:57:07Z")
> [@jasonmit](#): > > rootURL: ‘/’ + localStorage.getItem(‘lang’) + ‘/’ I know 😕 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. ```` This is not working `{{...}}` this syntax in html document ---
**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\ **Post date:** [June 30, 2017, 7:20pm UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/15 "2017-06-30T19:20:35Z")
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](https://www.emberjs.com/blog/2016/04/28/baseURL.html) ---
**Author:** ![varto](https://avatars.discourse-cdn.com/v4/letter/v/46a35a/32.png) [@varto](https://discuss.emberjs.com/u/varto)\ **Post date:** [July 3, 2017, 11:06am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/16 "2017-07-03T11:06:51Z")
Great I have problem now only when I refresh page and update with new selection from dropdown 😕 .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') + '/' ``` ![](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/2X/5/5538cd15d26830e6f0d617f6e493a729d9d98c3e.png) ---
**Author:** ![BenediktD](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/benediktd/32/10897_2.png) [@BenediktD](https://discuss.emberjs.com/u/BenediktD)\ **Post date:** [October 16, 2018, 8:01am UTC](https://discuss.emberjs.com/t/managing-multi-language/10358/17 "2018-10-16T08:01:41Z")
How do you approach this with a fastboot server? Do you set the locale within the instance-initializer?