load the wordpress website on particular route of react app

Question

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.

Patryk · Answer 1 · 2022-05-27T11:28:21.690

3

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

edited May 27 '22 at 11:28

answered May 27 '22 at 07:59

Patryk

51
4

1

What does WordPress insert into .htaccess when installed in a subdirectory? Can you add it to your answer and show that the WordPress stuff in .htaccess would need to come before the react routing? – Stephen Ostermiller May 27 '22 at 10:13
Ok, I added .htaccess for wordpress. – Patryk May 27 '22 at 11:29
Please what about handling a case that the react is hosted on a platform like Netlify? – Arinzehills Aug 22 '22 at 07:18

Noah Kanyo · Answer 2 · 2020-11-27T18:51:21.263

1

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

edited Nov 27 '20 at 18:51

answered Nov 27 '20 at 16:31

Noah Kanyo

500
1
3
8

it will be helpful if you describe point 2 & 3 with example, thanks – D p Nov 27 '20 at 18:42
I updated the post after doing some research. It seems you need to funnel the requests using a reverse proxy. This way, you will have same endpoint for accessing both the wordpress site and the react app. You just need to specify routes for which app to access. ex: localhost:80/app1 points to localhost:8000 and localhost:80/app2 points to localhost:8001 – Noah Kanyo Nov 27 '20 at 18:55
`code` ServerName react.local ProxyPreserveHost On ProxyPass /blog http://localhost:80/ ProxyPassReverse /blog http://localhost:80/ ProxyPass / http://localhost:3000/ ProxyPassReverse / http://localhost:3000/ `code` done this setting in conf file of apache but stil it just port to 3000 port only – D p Nov 29 '20 at 05:20

load the wordpress website on particular route of react app

2 Answers2