2

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.com/resource but anything deeper, like www.mydomain.com/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.com/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.

Thomas
  • 5,736
  • 8
  • 44
  • 67
  • I didnt understand all, but it seems like you could use the html base tag like this: use full hostname for IE compatibility(dot in http for breaking url to display real text) – Tearsdontfalls Jun 02 '12 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 Jun 02 '12 at 21:03

2 Answers2

7

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 accomplishes the same thing.

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

Alamgir Mand
  • 319
  • 3
  • 7
  • Hey Thanks! This helped me out. I did run into trouble though, because I am using abstract views and when I hit refresh on one of the sub views it only loads up the immediate view and not the abstract version meaning I loose all of my navigation items. Any idea how to fix that issue? – trixtur Jul 20 '16 at 03:01
  • leading slash "/" works for html, but be careful if you have for example PHP include or require. The root is different for that, so you need to specify the correct root in the path. for example like this: include $_SERVER['DOCUMENT_ROOT']."/path/to/the/resource.php"; – koubin Aug 19 '19 at 09:44
2

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 comment 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 comination of that technique and the rewrite rules might do the trick.

laurelnaiad
  • 4,558
  • 4
  • 20
  • 18
  • I thought about this again. It sounds like you're saying that your different environments use different paths *below* the domain. E.g. http://production.com/index.html equates to http://development.com/mySite/index.html or something of that nature. If that is the case, then it sounds like what you're asking for is not so much about how to rewrite URLs for the html pages (as the answers here so far do), but to rewrite the ones for the *.js files. In that case, you might want to tell us where the js files live in your various environments and see if we can figure out some rules for you. – laurelnaiad Apr 18 '13 at 20:03