CODEWITHSUNDEEP
reactjswordpress.htaccesssubdomainfrontity
D p
D p

Reputation: 103

load the wordpress website on particular route of react app

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.

Upvotes: 0

Views: 894

Answers (2)

Patryk
Patryk

Reputation: 51

The easiest way that worked for me:

  1. You need to have a PHP server.
  2. Build your react app and upload via FTP to public_html.
  3. Upload wordpress to public_html/blog folder and setup db for it.
  4. 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

Upvotes: 3

Noah Kanyo
Noah Kanyo

Reputation: 550

Without knowing more about the problem.

  1. You may need ensure that the react app and WordPress app use different uri paths if they both run on the same domain.
  2. 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
  3. You will probably need to use a reverse proxy file and configure it to be able to run two apps on one server.
  4. You could use a specific react library developed for WordPress called Frontity. This page might help clarify things. Frontity Connection to Wordpress

Upvotes: 1

Related Questions