forward slash point to file without changing the url ( .htaccess ) - reactjs

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

Related

.htaccess How to redirect to index.html with params but the param value is same as a folder name

The routing url is like 'my_website/:param'
But my location contain a folder name is as same as the params.
So when I browse with http://my_website/apple.
The browser will display the folder instead of pass the value 'apple' to the web.
How should I set the .htaccess?Thanks
The following only work when the folder with same value is not exist.
<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>
Based on your shown samples, could you please try following. Please clear your browser cache before testing your URLs.
RewriteEngine ON
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/?$ index.html [L]
OR if you are looking only for link which starts with apple then try following.
RewriteEngine ON
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^apple index.html [NC,L]
Problem in OP's tried code: RewriteRule ^(.*) index.html [NC,L] will create an loop because there is no condition mentioned, so its going true each time for each uri.

.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?

Rewrite url for Angular app within sub-folder

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.

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