title: Backbone, multi-language and root
body: <p>I'm using backbone to manage my routing. I need to implement multi-language on my website as following :</p>
  
  <ul>
  <li>in french : www.example.com</li>
  <li>in english : www.example.com/en</li>
  </ul>
  
  <p>Moreover I have an additional root on my url on production, so it gives www.example.com/dev or www.example.com/dev/en</p>
  
  <p>The root is provided through my web server (node). It's retrieved through the &lt;%- prefix %> variable in the example below.</p>
  
  <p>It works well on localhost, but as soon as I pass on my server with a url with the additional root, the pages are not found. I'm looking for a generic solution to manage both situations (with or without root).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  ...
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script type="text/javascript"&gt;
  
  window.onload = function()
  {    
      let prefix = '&lt;%- prefix %&gt;'.substr(1);
  
      var BaseRouter = Backbone.Router.extend({    
          routes: {
  
              [prefix + 'imgfocus/:imgid'] : 'imgfocus',
              [prefix + 'skymap/:obsids'] : 'skymap',
              // ...
              },
  
          imgfocus : function(imgid)
          {
              navservice.loadScreen({page : 'imgfocus', imgid : imgid});
          },
          skymap : function(obsids, stateid, tourid)
          {
              navservice.loadScreen({page : 'skymap', obsids : parseInt(obsids) === 0 ? undefined : obsids, stateid : stateid, tourid : tourid});
          },
          /// ...
      });
  
  
      let br = new BaseRouter();
  
      for (let i = 0; i &lt; navservice.languages.length; i++)
          {
              if (navservice.languages[i] !== '')
              {
                  for (let key in br.routes)
                  {
                      br.routes[navservice.formatUrl(key, navservice.languages[i]).substr(1)] = br.routes[key];
                  }
              }
          }
          // language retrieval
          var language = navservice.getUserLanguage();
  
          Backbone.history.start({pushState : true, root: '/' + (language ? language : '')});
      }
  
      $(document).on("click", "a:not([data-bypass])", function (evt) {
          var href = { prop: $(this).prop("href"), attr: $(this).attr("href") };
          var root = location.protocol + "//" + location.host + Backbone.history.options.root;
          if (href.prop &amp;&amp; href.prop.slice(0, root.length) === root) {
              evt.preventDefault();
              var route = href.attr;
  
              // language retrieval
              var lang = navservice.getUserLanguage(route);
  
              if(lang &amp;&amp; route.slice(0,lang.length+1) === "/" + lang) {
                  route = route.slice(lang.length+1);
              }
  
              Backbone.history.navigate(route, {trigger : true});
          }
      });
  }
  
  &lt;/script&gt;
  </code></pre>