vhosts conf for single page app

Question

I have an angular app that I'm serving locally using apache. My vhosts.conf is:

<VirtualHost *:80>
  ServerName my.app.com
  DirectoryIndex index.html
  DocumentRoot /export/www/app
  <Directory "/export/www/app">
    order allow,deny
    allow from all

    RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteRule ^(.*)$ index.html/$1 [L]
  </Directory>
</VirtualHost>

If I go to the root of the app everything loads fine. I do some navigation within the app which brings me to my.app.com/some/location and still no problem.

However if I reload the page at this point I get a 404 error. To get back to the point I want I need to either go back to the root and navigate via the app again or else search by url my.app.com/#/some/location

Is there something that I can do with a rewrite rule so that I don't need the hash to reload the route? I tried to edit my existing rule to:

RewriteRule ^(.*)$ index.html/#/$1 [L]

Any ideas greatly appreciated C

Answer 1

The issue was that I was using a newer version of apache where the config rules have changed. My updated vhosts now reads

<VirtualHost *:80>
  ServerName my.app.com
  DirectoryIndex index.html
  DocumentRoot /export/www/app
  <Directory "/export/www/app">
    order allow,deny
    allow from all

    RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) /index.html [NC,L]
  </Directory>
</VirtualHost>