.htaccess for subfolder of AngularJS app with HTML5 mode

Question

Overview :

I have an AngularJS application that uses $locationProvider.html5Mode(true) and it is served from an Apache ser

Answer 1

Inside public_html => /app => .htaccess try this :

RewriteEngine On

RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ dist/index.html [L]

Note : HTML <base> tag should be point to the dist folder. I hope this solution will work as per your expectations.

Answer 2

I'll assume that inside the /dist directory you have index.html with the updated URLs which point to the minified resources and the correct <base> tag. Note that the <base> tag must point to the /dist folder - just append /dist to the value you're using for the uncompressed index.html and you'd be fine.

With those things in order, here's the updated .htaccess file:

RewriteEngine On

# Don't rewrite files
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^ - [L]

# If the ALPHA_USER cookie is set, serve the uncompressed files
RewriteCond %{HTTP_COOKIE} ALPHA_USER [NC]
RewriteRule ^ index.html [L]

# Rewrite everything
RewriteRule ^ dist/index.html [L]

You'll notice two things:

• I've removed RewriteCond %{REQUEST_FILENAME} -d as most likely you don't need to serve whole directories

• I've added the ALPHA_USER cookie which would redirect the users to the uncompressed files. This cookie can have any value you desire.