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]
Related
i have a react app and a single normal html page in a directory in the app
like this:
/
react things..
landing (folder) | thats the normal html it contains css files and index.html
index.html (react index.html file)
`
!
RewriteEngine On
RewriteRule ^index.html$ - [L]
RewriteCond %{HTTP_HOST} !^www. [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
!
!
AddHandler application/x-httpd-ea-php81 .php .php8 .phtml
!
`
thats my htaccess file and i want to redirect the slash endpoint to another endpoint
like https://www.example.com/ to https://www.example.com/landing/
without changing the url and go to the uri!
i tried:
RewriteRule ^//$ /landing/
and it didn't work..
i'll be thankful if anyone help me <3
I have one of react app working with apache server.
Here is my .htaccess file
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
and i want to redirect www.domain.com requests to domain.com,
anyway how can i redirect requests www to non-www with htaccess ?
Thanks!
You can use this :
Options -MultiViews
RewriteEngine On
#www to non-www redirection
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule (.*) https://%1/$1 [NE,L,R=301]
#rewrite non-files to index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
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?
I have deployed two react builds on cpanel, basically one is admin panel and second website like this:
admin folder consist of build of admin panel working on /admin route.
client folder consist of build of website working on / route.
My .htaccess Code:
<IfModule mod_rewrite.c>
RewriteEngine on
# first check if request is in /client/
RewriteCond %{DOCUMENT_ROOT}/client%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}/client%{REQUEST_URI} -d
RewriteRule ^(.*)$ /client/$1 [L]
# then check if request is in /admin/
RewriteCond %{DOCUMENT_ROOT}/admin%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}/admin%{REQUEST_URI} -d
RewriteRule ^(.*)$ /admin/$1 [L]
</IfModule>
After long searching I found this code as solution for my app as two react apps are deployed in cpanel. The problem is that whenever I refresh on any route page gives 404 error although routes work perfect. Please Help.
I'm using these rules for my react applications, in my cases I have one react application not two
<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>
I've got an Angular app using html5mode, but it's currently sitting within a sub-folder of a site: http://somesite.com/za/
So I've managed to rewrite the url to direct to my assets folder correctly, but I'm still getting 404s when I hit refresh or navigate directly to a page.
So this works: http://somesite.com/za/assets/js/bundle.js
This doesn't work, 404: http://somesite.com/za/home
.htaccess
RewriteEngine On
#This apparently creates a redirect loop for angular
RewriteRule ^(.*)/$ /$1 [L,R=301]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(za/.*) /za/index.html [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(?:[^/]*/)*([^/.]+\.(?:jpe?g|gif|bmp|png||css|js))$ za/assets/$1 [R=301,L,NC]
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
So where is the rewrite failing to redirect to index.html when I hit or refresh a page?
Solved it with a more elegant rewrite rule:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /za/index.html [NC,L]
However, this does give read access to other files and directories, so it can have security issues.