I'm having trouble getting my create react app build to properly route to my components on my server.
I have a .htaccess file
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
so that it always routes to my index.html
the url to my site is .com/project and my homepage option in my package.json file is homepage: '/project'
I have ran out of things to do.
Because of my htaccess it's always routing to my index.html but the router is always loading the 404 component. What am I missing.
This occured because the base routing was wrong so it was constitently routing to the 404 page.
Setting the <Router basename="/<Directory>"> and adding the homepage option to my package.json file fixed this problem.
For me worked with this .htaccess:
RewriteEngine On
RewriteBase /project
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ index.html?$1 [L,QSA]
Related
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]
i have hosted my react app on domain example.com
when i hit example.com/blog i want to load my wordpress site.
For that i have placed wordpress in folder named blog inside public folder of react app
for that i have placed .htaccess file in public folder to handle that
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog1
RewriteRule ^blog1$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ./blog1 [L]
</IfModule>
but that doesn't worked for me.
may be i am using the wrong approach to achieve this,as i don't have much experience in react.
The easiest way that worked for me:
You need to have a PHP server.
Build your react app and upload via FTP to public_html.
Upload wordpress to public_html/blog folder and setup db for it.
Update your .htaccess file for React routing:
<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>
Default wordpress .htaccess file after install in subdirectory:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /blog/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
</IfModule>
# END WordPress
Without knowing more about the problem.
You may need ensure that the react app and WordPress app use different uri paths if they both run on the same domain.
You need to link outside the app when you are making a request to the WordPress theme and vice versa when you link to your react app. Using an a tag rather than the typical react link.
e.g. using the traditional tag rather than the component
You will probably need to use a reverse proxy file and configure it to be able to run two apps on one server.
You could use a specific react library developed for WordPress called Frontity. This page might help clarify things. Frontity Connection to Wordpress
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 have a pair of apps which will be running on a shared Apache host. The apps are housed in a common directory on the server. Each application is housed within a "build" directory within its main directory. The client directory should be the default display, while admin should display at example.com/app/admin. And, to further complicate matters, admin uses React Router for its internal routing.
Here's a visual representation of the goal:
admin
|- build
|- index.html (example.com/app/admin, example.com/app/admin/page1, etc.)
client
|- build
|- index.html (example.com/app)
.htaccess
So I need to load the target pages while also enabling React Router to handle the routing for admin. I've tried about every combination of RewriteCond and RewriteRule I can think of in the .htaccess, but no luck so far. I feel like I'm getting closer with the rules below, but I'm still not quite there.
// .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/admin/build
RewriteRule ^admin$ admin/build [L]
RewriteCond %{REQUEST_URI} !^(/client/build|/admin)
RewriteRule ^(.*)$ client/build [L]
</IfModule>
This shows /build in the address bar, and any request to /admin/(.*) fails to redirect the .css and .js file requests to the build folder (so it is instead looking for /admin/static/css/ instead of /admin/build/static/css), although they load successfully on requests to /admin.
EDIT: Changed "App1" to "client" and "App2" to "admin"; masking those serves no purpose, and the fact that the directory shares a name with the page might somehow be relevant.
Finally got this sorted out. Final rewrite below.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} -f
RewriteRule .* - [L]
RewriteCond %{REQUEST_URI} !^/app/admin [OR]
RewriteCond %{REQUEST_URI} ^/app/admin/build
RewriteRule .* - [S=2]
RewriteRule admin/\w*/?$ admin/build/index.html [L]
RewriteRule admin/(.+)$ admin/build/$1 [L]
RewriteCond %{REQUEST_URI} !^(?:/app/client/build|/app/admin/build)
RewriteRule ^(.*)$ client/build/$1 [L]
</IfModule>