Apache 2 - Reroute specific namespace to index.html of SPA
I have an Angular 10-SPA that I serve from an Apache 2.4.29 HTTP server, and very little actual experience with HTTP Servers in general bar getting this one to run and serve a WSGI application-server in the past. Since that HTTP Server also serves my Backend (A Django application server via WSGI that connects via Django-Rest-Framework to my Database), my SPA is not the recipient of all requests that come in, only ones that start with a given prefix, e.g. www.mypage.com/prefix/
. I've been trying to configure it so that essentially every URL that has this /prefix
directly after the domain is served my SPA's index.html
located in frontendfolder
, which hopefully then immediately starts building the page for that specific route.
I've read through the Angular documentation about deployment with apache2 and the documentation of apache2's RewriteRule and RewriteCond directives. This is what I have in my sites-available/mypage.conf. Everything in the Directory-tag is a modified copypaste from angular.io :
DocumentRoot /path/to/frontendfolder
#DocumentRoot is not a typo, I'm not sure if DOCUMENT_ROOT calls that variable or not,
#but there is nothing else called like it in neither the mypage.conf file, nor
#apache2.conf, nor envvars
Alias /prefix /path/to/frontendfolder
Alias /prefix/ /path/to/frontendfolder/index.html
<Directory /path/to/frontendfolder>
Require all granted
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 ^/prefix - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^/prefix /index.html
</Directory>
This allows me to load at least my index.html when I'm on my mypage.com/prefix
URL. If I go mypage.com/prefix/page1 and hit refresh I get Apache's "404 Not Found".
What is wrong with my config?
I was under the impressions that this RewriteRule ^/prefix /index.html
would route everything that starts with /prefix to my index.html unless this url leads to a valid file, so why is that not happening?
Your configuration seems - please forgive me - confused.
Correct, DocumentRoot isn't a typo. It's a basic Apache directive, that maps the URL space into your file system. So it tells Apache where to go to answer requests, except where you override it with Alias, RewriteRule, or something else.
I'm not sure exactly what URL space mapping you're trying to achieve. My best advice is to start by removing all of the Alias
and RewriteRule
directives, leaving just the DocumentRoot
. Then see if that gives you the URL mapping you want. For example, with just
DocumentRoot /path/to/frontendfolder
then requests to example.com/prefix
will be routed to /path/to/frontendfolder/prefix
in your file system. If that's a directory, and if it contains for example a file index.html, then the request will be answered by /path/to/frontendfolder/prefix/index.html
.
That's the starting point. If it doesn't meet your needs, then you can start to override it where you need to, with Alias and RewriteRule directives. Alias is simpler and more fundamental, so try to use it first, and fall back to RewriteRule for more complex needs.
Good luck!
BTW although the documentation for RewriteCond mentions DOCUMENT_ROOT
, it doesn't say what its value is. But we can assume that it's the value of the DocumentRoot directive.