Relative path setup notes

This is taken from an Issue that was filed, but I want to make it more obvious here in the Wiki:

Relative Path Modifications

Example: http://localhost/backbone-demo

For anyone with a local HTTP server (WAMP/XAMP/MAMP/LightHTTP/Apache etc) the demo won't work if you are running it in a sub-directory on the server. This really just has to do with Backbone's Routes and HTML's relative/absolute pathing. Here's how to fix it.

First, make sure everything in the demo is using relative paths:

• assets/css/index.css instead of /assets/css/index.css
• app/templates/example.html instead of /app/templates/example.html

Next, make sure your Backbone routes are set relative to the web root path:

routes: {
  "backbone-demo/": "index",  // instead of "": "index",
  "backbone-demo/:hash": "index"  // instead of ":hash": "index",
}

** I also believe there is a root argument for the history start:**

Backbone.history.start({ root: "backbone-demo/" });

*** in app.js the url needs the protocal and host like this

`return $.ajax({ url: app.root + path }).then(function(contents) {`

TO:

`return $.ajax({ url: location.protocol + "//" + location.host+ '/' + app.root + path }).then(function(contents) {`

---

Another possible way only needs to change two places:

• 1. In the index.html, change to , this will get all the assets correctly.
• 2. In the app.js, change root: "/" to root: window.location.pathname, will get the relative paths for templates and routing.

Tried with my own app which lies under XXX:8080/myApp/, also tested under one more level, XXX:8080/examples/myApp/, using Tomcat Server.