What should be in .htaccess for Angular Universal app on Apache web host server?

Question

This question is related to the question I asked here, but this is a more specific question, so I'm asking it separately.

I have an Angular Universal web app that I want to deploy on an Apache web server. I installed pm2 to start the app and keep it alive. It's listening on port 4000. It shows no errors in the logs, but I'm getting a 403 when I go to the website.

I think something in the .htaccess file is incorrect or something needs to be configured in the httpd.conf file. I'm confused as to what exactly needs to be in those files, because several links/articles I've read show different configurations. Some say you only need the .htaccess file. Other say you also need to configure a virtual host in the httpd.conf file (which I can't reach, because I don't have root privileges on the server).

This is how the folder structure looks like:

domains
    - appname.com
        - public_html
            - .htaccess
            - browser
                - index.html
                - other files...
            - server
            - server.js
            - package.json

And this is my current .htaccess file, which should work for https and redirects to browser/index.html:

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 %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}/browser/index.html

I also tried this configuration which places a virtual host inside the .htaccess file, but that doesn't work.

To summarize my question: What exactly needs to be in the .htaccess file for Angular app to work? Is the virtual host tag supposed to by in the .htaccess as well or does that only work from the httpd.conf file?

Update

I contacted my web host. They said it's not possible to add the virtual host to the .htaccess file. So all I need is the redirect rewriteRule, taking https in consideration.

score 0 · Accepted Answer · answered Oct 24 '19 at 17:35

Together with my web host I got it to work. So what they put in the httpd.conf file were the proxy settings for both ports (80 for http and 443 for https). My app runs on port 4000 so that's why they had to add proxy settings to that port. The httpd.conf file now probably looks something like this:

<VirtualHost *:80>
 ServerName domainname.com
 ServerAlias www.domainname.com
 <Proxy *>
  Order allow,deny
  Allow from all
 </Proxy>
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / http://localhost:4000/
 ProxyPassReverse / http://localhost:4000/
</VirtualHost>

<VirtualHost *:443>
 ServerName domainname.com
 ServerAlias www.domainname.com
 <Proxy *>
  Order allow,deny
  Allow from all
 </Proxy>
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / https://localhost:4000/
 ProxyPassReverse / https://localhost:4000/
</VirtualHost>

So you should add your domain name to the serverName and serverAlias variables and set the proxy to localhost:4000, or whatever angular is running on.

And I moved the .htaccess file to browser folder where my index.html is located and changed it to this:

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) /index.html [NC,L]
</IfModule>

What should be in .htaccess for Angular Universal app on Apache web host server?

1 Answers1