How can I configure the .htaccess file so that it takes care of both the Angular routes and HTTPS redirecting?

Viewed 781

We have and Angular app (front-end only) hosted on a CPanel hosting. I changed the .htaccess file to account for Angular routes.

RewriteOptions inherit

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php73” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php73 .php .php7 .phtml
</IfModule>

# php -- END cPanel-generated handler, do not edit


The problem is, when I add the code for redirecting to https, it shows the error 'too many redirects'. It seems that I can only have on of https and routes, despite both being very important. Also, I know that this question has been asked before, but the answer to that did not help me.

Also, I am open to using redirects or something else...

UPDATE

I changed the code to this:


RewriteOptions inherit

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d

RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]


# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php73” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php73 .php .php7 .phtml
</IfModule>

# php -- END cPanel-generated handler, do not edit
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-SSL} !on
RewriteCond %{HTTP_HOST} ^playbrackets\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.playbrackets\.com$
RewriteRule ^/?$ "https\:\/\/playbrackets\.com\/index.html" [R=301,L]


It redirects to https some of the times, especially in Incognito window, or when I clear the browser cache. It doesnt actually FORCE the redirection.

2 Answers

Enabling HTTPS redirect in cPanel for all sites

First check if your .htaccess file is in the correct directory. The following is a generic solution:

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]

This block enables rewriting capabilities, verifies that the initial request does not already have a https:// and rewrites the entire requested URL, replacing http:// with https://

(e.g. http://example.com/subfolder/index.html will be replaced with https://example.com/subfolder/index.html)

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

This block works the same way as the previous one, just with the help of a different syntax. It is possible to use either of the above mentioned rewrite rules in order to redirect all sites within cPanel.

There is a cool tool to help you out here. See this link.

It will help you to generate your htaccess file. The following output should do the trick.The first rewriterule does 301 permanent redirect from http to https. The second first checks for the existence of an actual file or directory. If the request if not for a file or directory, it redirects everything to index.html.

# Generated with ngx-htaccess-generator v1.0.7
# https://julianpoemp.github.io/ngx-htaccess-generator/


<IfModule mod_rewrite.c>
  RewriteEngine On
  
  # Redirection to HTTPS:
  RewriteCond %{HTTPS} !on
  RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
  
  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -s [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  # Redirect all non-file routes to index.html
  RewriteRule ^(?!.*\.).*$ index.html [NC,L]
</IfModule>

You can use madewithlove's htaccess tester to see whether it works.

Here is the redirect to https:

enter image description here

Here is the redirect to index.html:

enter image description here

Related