0

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?

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.

  • Please have a look at the edit I just made to the OP. – CodeMed May 6 at 21:32
  • OK. Your approach works. But why do you think that I should allow Apache to return a 404 here? The result of your code is that now the Angular 7 app running in the browser is able to return its own 404 page for every route after mydomain.com that is not defined in the Angular app. This allows separation of concerns, so that the Angular app can manage all the routes not specified on the server. What is wrong with this? – CodeMed May 6 at 21:40
  • Your RedirectMatch simply doesn't catch all the paths you want. You could modify it and add lots of exceptions for every file you add somewhere to your DocumentRoot. But I don't think this is a good idea. The solution above rewrites all URI paths to /index.html which are not found in your DocumentRoot. If your app only needs files inside the DocumentRoot and has no other rewriting or proxying, then this could work for you. – Freddy May 6 at 21:40
  • I said if you want your config "as clean as possible"... What's wrong with a "page not found" if the page is not found? Sorry, I have no idea how your Angular app works. – Freddy May 6 at 21:49
  • For one thing, the approach desired in the OP and given in your answer isolates all the views in the browser app, so that the server can focus on serving a complete app instead of having the server try to be a UI app in addition to simply being a server. Thank you and +1 for answering the question in the OP. – CodeMed May 6 at 21:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.