Configuring .htaccess file to serve angular and api routes

Question

I am lost with the configuration of my .htaccess file. I have a website serving the client part (angular.js app) and api routes, which are handled with the slim framework.

My html pages are served with the ui-router, but in order to handle the page refresh, I have to do an url rewrite.

That's my file so far :

DirectoryIndex index.html index.php

#
# Redirect all to index.php
#
RewriteEngine On

# if a directory or a file exists, use it directly (static assets)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

#if route starts with "api", route to index.php (slim framework)
RewriteRule ^api/ index.php [L]
#else (it means we are serving the angular routes)
RewriteRule ^(.*) /index.html [NC,L]

It's, of course, not working. The real problem is that I don't know if my logic is good at first (or I am far far far far away...), and then how to write it (I am new to apache syntax and I don't really understand everything).

Robin Thoni · Accepted Answer · 2016-08-27 22:33:37Z

1

With 2 virtual hosts

API htaccess:

RewriteEngine On

# Redirect Trailing Slashes
RewriteRule ^(.*)/$ /$1 [L]

# Redirect Root
RewriteRule ^$ api.php [L]

# Handle API Requests
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ api.php [L]

Front virtual host:

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html (html5mode)
RewriteRule ^ /index.html

# Redirect /api to API virtual host
<Location /api>
  ProxyPass http://127.0.0.1:8090 # Change here to the API virtual host binding
</Location>

The front virtual host will serve the requested file if it exists (except for /api/*), or will serve index.html if it does not. All /api requests will be forwarded to API virtual host. The API virtual host will serve any existing file, or will rewrite to api.php, which will handle your API calls.

With 1 virtual host

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

RewriteEngine On


# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]


RewriteCond %{REQUEST_URI} ^/api/
RewriteRule ^ api.php [L]

# If the requested resource doesn't exist, use index.html (html5mode)
RewriteRule ^ /index.html [L]

Same behavior as above

WARNING: trying to include a non-existant file into the angular app may produce an infinite loading loop (index.html will load, then it will load the non-existant file, which will be index.html due to html5mode, etc...)

edited Aug 27, 2016 at 22:33

answered Aug 27, 2016 at 21:50

Robin Thoni

1,74114 silver badges23 bronze badges

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

3 Comments

krakig Over a year ago

I can't use multiple virtual hosts, I only have access to the .htaccess file (OVH host)

krakig Over a year ago

Thanks! I had to add the following DirectoryIndex index.html index.php so my '/' route would be found, do you know why? I get a 404 not found error either way

Robin Thoni Over a year ago

OVH server configuration may not have included it. As your main file is index.html, you can remove index.php from the DirectoryIndex

Collectives™ on Stack Overflow

Configuring .htaccess file to serve angular and api routes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related