Redirect all non-root routes to index.html on Amazon Linux 2 and Apache

Question

An Amazon Linux 2 instance is using Apache to host an Angular 7 app. The Angular 7 app includes not just index.html, but also several .js files and a subdirectory named assets.

What specific syntax do I need to use in order to ensure that requests to Apache for all non-specified routes get redirected to the index.html located in the DocumentRoot? Note that the required syntax needs to also allow all the .js files and the contents of the assets directory to be served as secondary requests when the client browsers are loading index.html.

For example, if a remote web browser requests mydomain.com/randomCharacters, I want Apache to return index.html the same way that Apache would respond to a request to mydomain.com with index.html. And then index.html must be able to get access to the .js files and the contents of the assets subdirectory.

(In this case, DocumentRoot is a directory entitled /var/www/mydomain.com/public_html. Also, the /var/www/mydomain.com/public_html directory includes 1. index.html, 2. several .js files, and 3. an assets subdirectory containing things like images, etc.)

I would like to use RedirectMatch inside of a VirtualHost block to keep the configuration as clean as possible. Here is what I have in mind. How does the following need to be modified?

<VirtualHost *:80>
    ServerName www.mydomain.com
    ServerAlias mydomain.com
    DocumentRoot /var/www/mydomain.com/public_html
    ErrorLog /var/www/mydomain.com/error.log
    CustomLog /var/www/mydomain.com/requests.log combined
    RedirectMatch 302 ^/(?!index.html$).+ http://mydomain.com  
</VirtualHost>

---

Forensic Analysis of Results:

---

When try the above with the Network Tab in the Developer Tools of Firefox open and I make a request to http://mydomain.com while the RedirectMatch 302 ^/(?!index.html$).+ http://mydomain.com is in the VirtualHost, the result is that all requests to / are shown to have given a 304 response, while all requests to named files like scripts and stylesheets are shown to have given 302 responses.

Also, when I view the html page source for the same request, I see that the contents of index.html were indeed served correctly, but that the browser remained empty because the code in index.html was not able to access the .js files or the contents of the assets subdirectory.

So the problem is that RedirectMatch 302 ^/(?!index.html$).+ http://mydomain.com needs to be re-written to allow for the .js files and for the contents of the assets subdirectory. What specific syntax is required to resolve this so that Apache can successfully server up the Angular 7 app no matter what character string is added after http://mydomain.com?

Answer 1

You can use a RewriteRule like this in a VirtualHost context:

RewriteEngine On
# if not a regular file
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
# and not a directory
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-d
# then rewrite to index.html
RewriteRule ^.*$ /index.html [L]

I you want to keep your config "as clean as possible", then don't do stuff like this and let Apache return a HTTP 404 as it should.