For a single-page app, I have the following RewriteRule in my .htaccess file to direct all traffic to index.html so that a JS can parse the URL and fire controllers accordingly.

  # html5 pushstate (history) support:
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !index
  RewriteRule (.*) index.html [L]

This works fine for top level urls like, www.mydomain/resource but anything deeper, like www.mydomain/resource/123, breaks the value of the current directory ('.') while in index.html.

For example, a script tag in my index.html like this

<script src="js/app/config.js"></script>

would translate into src="resource/app/config.js"

Or, for a url like 'www.mydomain/more/nested/resource/123' the src on that same js file would be interpreted as "more/nested/resource/app/config.js".

Needless to say, those files don't exist and the app breaks.

Can anybody shed any light to what is going on here? Thanks.

For a single-page app, I have the following RewriteRule in my .htaccess file to direct all traffic to index.html so that a JS can parse the URL and fire controllers accordingly.

  # html5 pushstate (history) support:
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !index
  RewriteRule (.*) index.html [L]

This works fine for top level urls like, www.mydomain./resource but anything deeper, like www.mydomain./resource/123, breaks the value of the current directory ('.') while in index.html.

For example, a script tag in my index.html like this

<script src="js/app/config.js"></script>

would translate into src="resource/app/config.js"

Or, for a url like 'www.mydomain./more/nested/resource/123' the src on that same js file would be interpreted as "more/nested/resource/app/config.js".

Needless to say, those files don't exist and the app breaks.

Can anybody shed any light to what is going on here? Thanks.

• javascript
• apache
• mod-rewrite
• single-page-application

• I didnt understand all, but it seems like you could use the html base tag like this: <base href="htt.p://yourdoma.in/" /> use full hostname for IE patibility(dot in http for breaking url to display real text) – Tearsdontfalls Commented Jun 2, 2012 at 20:00
• The problem with this is that I need relative urls to work in my .html files because this site is continually moving between multiple local, stage, test, and production domains. – Thomas Commented Jun 2, 2012 at 21:03

2 Answers 2

I got it to work and this is how:

When you give the following as the src:

<script src="js/app/config.js"></script>

you're right in that Apache correctly reroutes to index.html (or whatever fallback URL you have) and then tries to access resources relatively according to nested path in the URL.

To correct this, you need to have a leading "/" to signify the root directory, as follows:

<script src="/js/app/config.js"></script>

Once I did this for my js libraries, css sheets, etc, it worked perfectly fine and backbone.js handled all URLs from there out.

Note: In Apache 2.2+, you can now use FallbackResource instead of mod_rewrite, it requires fewer lines and acplishes the same thing.

Another thing remended is to use absolute URLs whenever you can.

I'm using this for html5 history support -- anything in the js, css, img, or svc directories is unmodified. Everything else goes to index.html:

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteRule ^(js|css|img|svc)($|/) - [L]
RewriteRule ^(.*)$ index.html [L]

Note, I just saw your ment below. If you reference your scripts as

<script src="/js/myscript.js"> 

then you shouldn't need to worry about the base location of your html. Note the slash before "js". I realize this was pointed out in another answer, but the ination of that technique and the rewrite rules might do the trick.