http to https automatically with reactjs react-router application - reactjs

I am trying to configure my reactjs react router application to automatically redirect the user to a secure url.
http://url.com -> https://url.com
I currently have this configuration in my htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
I have try this solution :
https://stackoverflow.com/a/60474317/19574875
But, I have an "ERR_TOO_MANY_REDIRECTS" error.
Do you have any ideas ?
Thank you in advance

Related

Why React Application doesn't work in hosting subdirectory?

I have a React app with the react router.
After build I try to start react app on my hosting server.
App is working in root directory /example.com correctly.
But I want to run it at subdirectory like /example.com/sub and it doesn't work.
It's possible, problem in .htaccess file.
Here's .htaccess content
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

Throw 403 error after page refresh on NextJS

I have an app with Next.js. It has some routes (pages).
I place the app on the static hosting. Everything works fine, but when I resfersh any page except home page, I get 403 error..
I place the .htaccess in root dir with code:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
But no result.
Please help me fix this propblem...

.htaccess - redirect between two react apps

I have two react apps in the same subdomain - in different directories.
app.domain.com
app.domain.com/login
For react router to work I have existing .htaccess rules to redirect all traffic to the app (index.html)
RewriteEngine On
#Redirect to https
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteBase /
#Not sure what this does
RewriteCond %{QUERY_STRING} ^open&guid=
RewriteRule ^ ? [R=301,L,NE]
#Not sure what this does
RewriteRule ^index\.html$ - [L]
#Redirect all to index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
I want to allow to load the react app in directory /login and redirect all /login/* requests to /login/index.html.
How can I apply these rules using .htaccess?
Kind regards /K
Your existing .htaccess is fine. Just create another .htaccess under /login/ directory as this:
RewriteEngine On
#Redirect all to index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
This will route every non-file and non-directory /login/* request to /login/index.html
With your shown samples, could you please try following. Please make sure you clear your browser cache before testing URLs.
RewriteRule ^login/?$ login/index.html [NC,L]
OR uri has starting login with having other things in uri.
RewriteRule ^login(?!=index\.html) login/index.html [NC,L]

React Router Dom and htaccess

I built my React App; when I try to go to my URL and visit pages of my App, everything is okay.
But when I try to go to directory on my server, that redirects me to the 404 page that I made.
I know that it's because my .htaccess is not configured as it should be.
Actually, my .htaccess is:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
Thanks to this code, I can navigate on my App but I can't visit other directory that there not build with React. How can I change that to what I want?

htaccess ignore rewrite to api url

I’ve build the front end of a site using angular and have created the cms through Kirby. Kirby allows you to build a json api from the structure you create with the cms, like so.
What I’m trying to do now is use the api provided by Kirby which is:
address.com/projects/api
within my angular app. I’m using html5 and htaccess to rewrite my urls so I dont need to use a hash within the url and page refreshes on a subpage get redirected to the appropriate angular view.
address.com/work
address.com/about
address.com/single-project
my htaccess looks like this
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html
Kirby requires its own htaccess to serve pages also, so my question... Is it possible to allow access to my json template at address.com/projects/api and still preserve the angular clean urls?
If I'm understanding you correctly, you want to ignore /projects/api? Then you can do this
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/projects/api [NC]
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]
You can add more exclusions in your negative RewriteCond:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !/(index|projects/api) [NC]
RewriteRule ^ index.html [L]
Solved it shortly after posting #facepalm.The additional line that did the trick for anyone in the same or similar situation
RewriteRule (api) index.php
I have the same issue but none of the above solved my problem.
My current .htaccess is as shown below:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^app.mydomain.com [NC]
RewriteRule ^(.*)$ http://www.app.mydomain.com/$1 [L,R=301]
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
my API folder path is http://www.app.mydomain/api

Resources