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>
Related
I have a Wordpress site with a headless React frontend. With the default .htaccess file that Wordpress puts up on install, the site was not correctly handling requests to any page other than the root. Those requests ignored React altogether. I modified the .htaccess to point all requests to the index.html file like the following...
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
This loads the React site just fine on all requests, but it's also failing on any api request to either wp-json or more importantly graphql. This means the page loads, but the content is essentially absent. How can I set up the .htaccess file to allow requests to those api endpoints on top of allowing the initial requests going to the index.html?
This seems to be working so far...
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^graphql(.*)$ index.php?url=$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Stole part of this from this answer...
How to redirect all API requests using .htaccess, while keeping asset requests intact?
I'm not sure I need that url=$1 part since I'm not using it elsewhere, but I'm not that good at regex and at least the request are getting handled correctly.
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'm currently running php on an apache server locally, with a React frontend.
This is how my current .htaccess is laid out:
Options -MultiViews
RewriteEngine On
RewriteRule ^api/(.*)$ api/$1\.php [L]
RewriteCond %{REQUEST_URI} !^/api.*?
RewriteRule ^ index.html [QSA,L]
The bottom condition is so that routing works in my React app. I'm then taking the production build and copying it into my htdocs.
The routing works, however, I want to be able to call the .php files inside my /api directory without using the file extension. So I want anything that comes after /api/ to be redirected to whatever is entered, followed by .php.
E.g. /api/authentication would go to /api/authentication.php, and /api/register would go to /api/register.php, and so on.
With this current setup, I'm getting a 500 internal server error when making requests to /api/authentication etc.
Is there something wrong with my .htaccess file?
Your first rule is looping as you're matching .*. You may use:
Options -MultiViews
RewriteEngine On
RewriteRule ^index\.html$ - [L,NC]
RewriteCond %{REQUEST_URI} !\.php$ [NC]
RewriteRule ^api/(.+)$ api/$1.php [L,NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule !^api index.html [L,NC]
RewriteCond %{REQUEST_URI} !\.php$ [NC] will skip rewriting when a URI ends with .php.
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 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 :)