Why React and WordPress
WordPress and React are a killer combination to develop web apps.
With WordPress you get:
- easy content management for help pages, your landing page, your blog, and your other marketing activities
- secure and proven user management
- over 100.000 plugins
- a lot of flexibility over time to change the character of your site
React brings you the largest ecosystem to build great rich JavaScript apps that allow a simple data model, good performance and are easy to test.
For example, if we want to write a new revolutionary email app, we can write the interface of the email client with React, but for everything else use WordPress. So while you’re developing your app, you might want to:
- choose and install a theme
- create a landing page for your app
- add a form to collect email addresses
- create a blog and publish your posts on Twitter to promote your app
- optimize your site for search engines
Later it might be useful to
- offer a paid membership
- create a forum or FAQ
- create separate landing pages
- all this can easily be done with WordPress, without writing a single line of code.
Embedding a React app into WordPress with ReactPress
While there are other ways to integrate React with WordPress, the ReactPress plugin is the easiest to embed a React app into a WordPress page and lets you use create-react-app without any custom build configurations.
Not only does ReactPress automate the React integration for you, but it also ensures a seamless development experience, through running your local React dev server with the theme of your WordPress site.
Why not just using headless WordPress with SSR
I know that headless WordPress with Next.js, Gatsby, or Frontity is all the rage right now, but with these solutions, you add a layer of complexity to your app, and more importantly, you lose a lot of the benefits of the WordPress ecosystem (themes and plugins).
The steps from development to deployment are:
- Setup your local dev environment.
- Install ReactPress on your local WordPress installation
- Create a new React app from your WP installation
- Create a new React app
- Use create-react-app from the command line (recommended)
- Create a new React app from your local WP admin
- Develop your React app
- Build the app
- Install ReactPress on live WordPress site
- Create the same React app there
- Upload the build of your React app to your live site to deploy it.
Repeat steps 3, 4 and 7 until your app is finished.
Setup your local dev environment.
To develop React apps your WordPress installations needs access to:
- the PHP function
shell_execandexec - and a POSIX compatible system
Optionally, to create React apps directly from the WordPress admin it needs also:
- the
nodejspackage managernpmversion 6 or higher
This means you can’t create React apps from the WordPress admin if you use Local by Flywheel, but you can create your app from the command line with npx create-react-app my-app.
For Windows users we recommend using WSL-2.
Install ReactPress on your local WordPress installation
In your local WordPress go to plugin installation, search for ReactPress, install and activate the plugin.
Create a new React app
There are 2 ways to create a new react app with ReactPress. You can use the command line or you can use the admin page of ReactPress.
We recommend using the command line because you more control and feedback about what is going and you can use WordPress development environments like Local without worrying about npm access of your WordPress instance.
Creating a React app from the WordPress admin is now deprecated and only present for legacy reasons.
Use create-react-app from the command line (recommended)
To create a new app from the command line open a terminal and navigate to apps directory of the ReactPress plugin.
Use npx create-react-app [your-app-name] in the apps directory.
Then go to the ReactPress page in your WordPress admin. If you already opened the ReactPress page before, reload it.
You then will see the new app in the admin. Next, choose a URL Slug for your app. This will create a new page with the given slug. Make sure the slug you choose is not taken by any other page/post of your site.
Go back to your console, start the React app with npm start or yarn start. Your React app should be running with the styles of your WordPress site.
Create a new React app from your local WP admin
In the admin of your WP installation, click on ReactPress in the sidebar. There you should see a form to create a new React app.
Enter a name (later you need to use the same name in the live system), enter a pageslug, choose the type “Develop a new app (Usually on a local machine).” and choose the create-react-app-template you would like to use and finally click the “Create React App” button.
After a short while your app should be created and running at port: 3000. If you click on the link you can see your local dev app running in the theme of your WP installation.
Develop your React app
Now you can develop your React app as you are used to. Use WordPress’s built-in REST-API to get data or use the WPGraphQL plugin if you prefer GraphQL.
Build the app
If you want to deploy to your live site, build your app from the command line or through the WP admin – if your system fulfills the requirments.
Again, we recommend using the command line, because you have access to error messages.
Install ReactPress on live WordPress site
Before you upload your React app, install ReactPress on your live site the same way you did on your local installation.
Create the same React app there
Create the same React app on your live system, that you created on your local system. Important! Use the exact same name and this time choose “Deploy an already build app (Usually on a server).” as the type.
Upload the build of your React app to your live site to deploy it.
Finally, upload the build of your React app. Upload the build folder of your local React app to the app on your live system.
The ReactPress admin shows where your apps are located. It will be something like this: .../htdocs/wp-content/plugins/reactpress/apps/[your-appname].
If you click on the URL slug of your React app in ReactPress you should see your React app on your live system.
Where to go from here?
You should be able to create React app embedded in WordPress now. If you have the next big app idea you are ready to start.
If you have any questions, let me know in the comments.
Hi dear, great contribution! Im trying to use it to edit a react js file thought WordPress, would this work? I could not go further because the Virtual Maschine is not able to run properly, so I will try to install in another PC.
What do you mean with editing a reactjs file? You can use ReactPress to add whole React projects to your WordPress site.
Thanks for the tutorial (and the plugin!). One question: is it possible to use this to create a React component that can be rendered within the existing WP-generated DOM? For example, to use React to generate a form that appears in a page (for example by defining a shortcode that will output the necessary JS)? Or is this approach only useful if React handles the whole interface?
Thanks!
The plugin embeds the React app into the DOM of the WP instance. It creates a page were it renders the React app. If would like to use your React app in a different content type, you would need to delete the created page, create the content you would like and use the same slug as the deleted page had. Then you would need to insert some custom html into that content.
Long story short: It works, but it is cumbersome. You can add a React app only to one piece of content. You can’t reuse it.
New to WordPress. It sounds like I have to run WordPress locally? Is my WordPress plugins folder located on my machine? I’ve never heard of that. I just sign into the admin page and do things there.
Hey Dan,
yes you need a local WordPress installation. In that installation there is a pluginfolder in which you will develop your React app.
thank you !
can my webapp use data and interaction from custom field/custom post/metabox of my wordpress ?
for example : let’s just say i have already a wordpress blog recipe
and a webapp where users can add recipe in a calendar!
question:
can i dev a webapp that will enable user to add recipe from my blog wordpress to the app calendar ?
@Fred Yes, it can. You need to use the WordPress REST-api or the GraphQL interface provided by the WPGraphQL-plugin.
But this is nothing special from the plugin. You as the app developer are responsible to communicate with your backend. The only thing ReactPress provides directly attached to the
window-object is the user information atwindow.reactPress.Could I use this approach to create a Slider for my Home Site? So it would end up as a plugin/block or inside a theme which i get by shortcode.
Hi Michael, I doubt that this is the easiest approach to create an image slider for WP. You can however embed your React app into your home page, if you show a static page on your home page. Shortcodes are not supported, you have to embed your React app into the main content of a page.
What an amazing concept. I wish I could get it to work. typically I develop on windows and deploy to linux. I cannot get it to work on windows. when going to the app I get the following :
Warning: include(C:laragonwwwtaraseasonalswp-contentpluginsreactpress/templates/react-page-template.php): failed to open stream: No such file or directory in C:\laragon\www\taraseasonals\wp-includes\template-loader.php on line 106
It’s hard for me to debug your dev environment. Even more on Windows. Did you try to use Local by Flywheel as dev environment? In my tests, it worked fine, even on a virtual machine with Windows.
windows not important. the production rollout will be on linux.
I just created a ubuntu 20.04 VM with apached, mysql. installed wordpress on the root and installed build version of my-react-app on the same apache2 instance on a different port. both wordpress and my-react-app are working as expected.
1) installed reactpress on wordpress
2) created a reactPress app type=”Deploy an already build app”
3) copied the content in my-react-app/build to the reactpress /apps folder.
4) set slug for React App
When I browse wordpress/my-react-app-slug, I get a 404 error:
Not Found
The requested URL was not found on this server.
Apache/2.4.41 (Ubuntu) Server at 192.168.1.46 Port 80
I feel I’m missing a step.
how can I debug this?