How can I make Aurelia routing work when the application is not at the root of the host

Question

I am building an Aurelia application that will not live at the root of the web site. Its URL will be something like this http://mycompany.com/neatoApp.

I have a route configuration that looks like this

{route:['','index'], name:'index',moduleId:'index' nave:true, title: 'neato app home'},
{route:['news'], name:'news',moduleId:'news' nave:true, title: 'neato app news'}

I have System.js configured so that it knows /neatoApp is the baseURL and it downloads all the scripts and things properly. I have a <base href="/neatoApp" /> element in the head of my app html and I'm using pushState for routing.

The problem is when I navigate to mycompany.com/neatoApp Aurelia reports 'Route not found: /neatoApp'

Router has a baseUrl property that doesn't seem to matter what I set its value to because the route recognizer doesn't use it.

I really don't want to put neatoApp in all my routes for a few good reasons: As the app gets deployed in various places (dev, test, etc) that base path will change making that a headache to maintain. It's not the developers responsibility to know where the app is going to be deployed in various environments and it's not the operations guy's responsibility to update the code to include that base URL when he deploys it. When I do include neatoApp in the routing config it makes navigating behave strangely like generating a link that points to /neatoApp/neatoApp.

Does anybody have a solution to this problem?

I have created a plunker to demonstrate the issue: http://plnkr.co/edit/HPEzClAlncvQkSzjw6ph?p=preview

Answer 1

For my MVC 5 app, I use this in my Index.cshtml:

<script src="~/jspm_packages/system.js"></script>
<script>
    System.config({ baseURL: "@Url.Content("~/")" });
</script>
<script src="~/config.js"></script>
<script>
    System.import('aurelia-bootstrapper');
</script>

And have commented out the baseUrl in config.js. BaseUrl needs to be set in the first call to System.config().

System.config({
  //baseURL: "./",
  defaultJSExtensions: true,
  ...

Answer 2

Check out this plunker to see what needs to be done:

http://plnkr.co/edit/0j6vhbTf4LZw4vOLOUka?p=preview

When you are doing something like a virtual directory where your site looks like this http://mywebsite/subfolder you want to preface your routes, stylesheets, and the baseURL in config.js to have "./" for example:

baseURL: "./"

And index.html would typically look like this:

<script src="./jspm_packages/system.js"></script>
<script src="config.js"></script>

Same with app.js which should look like this:

  { route: "", moduleId: "./src/routes/home", title: "Home", nav: true, name:"home" },

If you are publishing to the root of a web site then you can drop the "./" and just use "/" although technically you can leave the routes with "./" and just change the baseURL and it will still work.