.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 server. Until now I used the source code to be accessed from the others and I just needed a redirect to index.html for the angularJS's HTML5 mode. So I had this for the .htaccess file for my /app folder.

.htaccess :

<IfModule mod_rewrite.c>

    RewriteEngine on

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

    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]

</IfModule>

Modifications :

I then added Grunt for minifying the whole solution that is generated in the /dist folder of the app(so now the minified solution is found at /app/dist). I would now like to route the whole traffic of my app to the minified version, without making the users change the link. So, in practice I would like to redirect every call from /app to /app/dist.

Directory Structure now :

app
    dist
        minified versions(css,html,js)

I tried using some conditions from here in /app's .htaccess and moved the other .htaccess file in /app/dist, but with no success. I don't even know if the two can be combined in this way. I know I can use the dist folder as /app instead, but I wouldn't really want this, as /app is a repo and it is way easier to keep it updated. So how can I manage to achieve this with redirecting?

Also, as a second thing, is it possible to put a flag somehow so I let alpha users use the normal (not-minified) version for better debugging?

Update:

I added a sample project for this here. I just kept the initial .htaccess files that i showed above and you can check that both versions(/test and /test/dist) work as stated above. Also, it probably has some unused code and dependencies, but I just cut the other parts from my project(don't judge :D).

For this I used the initial configuration with AngularJS 1.4.8 that could generate some errors like the one stated here and here. Feel free to update the AngularJS version to 1.5.8(the last stable release of Angular 1), but take in consideration the comments on Cosmin Ababei's post as well. Also, the project uses npm for installing grunt(and other extensions for grunt), bower for angular and some other basic components and grunt for building the minified version(actually, it's just concatenating resources in same files for now). If you need to change the dependencies, please don't forget to run bower install. If you want to regenerate the dist folder, don't forget to run npm install and grunt build.

Ah right, I overlooked that. Well, at this point I'm reduced to Googling myself, but this looks like it could work for your situation (it's about wordpress, but it's a good clean description): codex.wordpress.org/… — Fasermaler
– Fasermaler, Commented Aug 29, 2016 at 11:51
RewriteCond %{HTTP_HOST} ^(www.)?localhost/app$ RewriteRule ^(/)?$ dist [L] this isn't working — Radu Vlad
– Radu Vlad, Commented Aug 29, 2016 at 12:35
Do you already a .htaccess inside app/dist/? If yes then show it here? What rules are you using to serve minified resources? — anubhava
– anubhava, Commented Sep 1, 2016 at 17:35

Cosmin Ababei · Accepted Answer · 2016-08-30 04:06:45Z

1

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.

edited Aug 30, 2016 at 4:06

answered Aug 30, 2016 at 4:01

Cosmin Ababei

7,0722 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Radu Vlad Over a year ago

It still doesn't work, I receive the following error: "app.src.js:20938 Uncaught TypeError: Cannot read property 'replace' of undefined". I'm trying to debug and come here if I get what's wrong. Also, yes, in the dist folder the base tag has /dist and if i enter on localhost/app/dist with the old .htaccess in /dist folder everything works.

Radu Vlad Over a year ago

After some research on stackoverflow.com/questions/29261782/… and github.com/angular/angular.js/issues/11091, I updated the angular to 1.5.8 and it works. Unfortunately, now I get to access the localhost/app/dist by link, probably the angular redirects me. Can I somehow hide this? Or should I set the url by hand in the angular app, described as a possibility in the first stackoverflow link?

Cosmin Ababei Over a year ago

The <base> url must point to the absolute url on your server. For example, if by now you had your app at www.my-domain.com/app, you must update it www.my-domain.com/app/dist. I'm not sure I understand how would you have localhost in your URL.

Radu Vlad Over a year ago

Well, for the moment i'm trying to host it on my local machine with an apache server. The problem I have now is that when I enter on http://localhost/app/ I get redirected to http://localhost/app/dist/login instead of http://localhost/app/login. This happens with both <base href='http://localhost/app/dist/'/> and <base href='/app/dist/'/> in the index file.

Rohìt Jíndal · Accepted Answer · 2016-08-31 16:38:22Z

0

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.

edited Aug 31, 2016 at 16:38

answered Aug 31, 2016 at 13:14

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

3 Comments

Radu Vlad Over a year ago

fails with ERR_TOO_MANY_REDIRECTS.

Rohìt Jíndal Over a year ago

@RaduVlad see this post i was also having same issue few days back..stackoverflow.com/questions/39026692/…

Radu Vlad Over a year ago

thanks, but i can't figure out what i'm doing wrong :(.

Collectives™ on Stack Overflow

.htaccess for subfolder of AngularJS app with HTML5 mode

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related