Why React Application doesn't work in hosting subdirectory? - reactjs

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>

Related

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

what should I put in the .htaccess file to deploy my site on hostinger?

I'm deploying my first project on Hostinger. It's a React app created according to the basic config given on reactjs.org. I have uploaded my entire folder to the server via FileZilla and am now trying to configure my .htaccess file but I am only getting 500 errors back. I put this file in my folder called react-portfolio but nothing works. The whole project is stored in the react-porfolio folder.
here is what I tested first
DirectoryIndex /react-portfolio/public/index.html
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)$ react-portfolio/public/$1 [L]
</IfModule>
here is the second file
<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>
Thank you

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?

Setting .htaccess file for my react project

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>

Angular 2 app on Apache server

I have an angular 2 app served on Angular 2. On the host, it is located at the document root and everything is working fine. I have an .htaccess file with:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Problem:
On my laptop, i have an Apache server (xampp) with document root as "
c:\users...\WebProjects
When i develop the site, i put the files in c:\users...\Projects\Projects1\dist
In this directory, i cannot get the website to work due to files/folders called not being in the root. ie Server is trying to load \css\app.css when it should be loading Projects1\dist\css\app.css
Can i write a specific .htaccess to be able to serve the app from that directory? (or something else without having to change the httpd.conf document root?)
thanks
you need to add the path in your .htaccess file and your index.html file like so:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /your/path/here/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
In index.html, you need to update the base href aswell to reflect the path like so:
<base href="/your/path/here/">
And that should do the trick :)

Resources