Easily embed React apps into WordPress with the ReactPress plugin


This tutorial is a bit outdated. We created a new at: React with WordPress Tutorial

Please post support requests on https://wordpress.org/support/plugin/reactpress/.

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, by running your local React dev server with the theme of your WordPress site.

Why not just use 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:

The video shows the process with the TwentyTwenty-theme.

Repeat steps 3, 4, and 7 until your app is finished.

Setup your local dev environment.

To develop React apps your WordPress installations need access to:

  • and a POSIX-compatible system (Windows support is experimental)

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

To create a new app from the command line, open a terminal and navigate to the 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 select 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.

ReactPress with running React app.

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 with

yarn build

Install ReactPress on the live WordPress site

Before you upload your React app, install ReactPress on your live site, like on your local installation.

Create the same app folder there

Create the same React app folder on your live system, that you created on your local system. Important! Use the exact same directory name as on your development server.

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.

Deployed React app embedded into live WordPress site with TwentyTwenty-theme.

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.


  1. Pingback: ReactPress Dev-Environment - Rockiger 6. March 2021
  2. Diego 17. April 2021
  3. Marco 19. April 2021
  4. Adam 30. April 2021
  5. Marco 30. April 2021
  6. Dan 3. May 2021
  7. Marco 3. May 2021
  8. Fred 5. May 2021
  9. Marco 5. May 2021
  10. Michael Engelhardt 6. June 2021
  11. Marco 6. June 2021
  12. afshin 16. June 2021
  13. Marco 17. June 2021
  14. Ryan 23. June 2021
  15. afshin 24. June 2021
  16. Marco 25. June 2021
  17. Marco 25. June 2021
  18. afshin 25. June 2021
  19. Ashish 28. June 2021
  20. Max 14. July 2021
  21. Marco 15. July 2021
  22. Nishant Verma 17. July 2021
    • Marco 18. July 2021
  23. Max 24. July 2021
  24. Max 28. July 2021
  25. Max 28. July 2021
  26. Marco 29. July 2021
  27. Simon 17. August 2021
    • Marco 17. August 2021
  28. himanshu 2. September 2021
    • Marco 3. September 2021
  29. Vinicius 28. October 2021
  30. Marco 28. October 2021
  31. Nadia 23. November 2021
  32. Marco 23. November 2021
  33. Florian 2. December 2021
  34. Raimond 19. July 2022
    • Marco 27. July 2022
  35. Vadim 26. January 2023
    • Marco 27. January 2023
  36. Vadim 2. February 2023
  37. Mai 4. February 2023
  38. Ahmad Ashfaq 27. February 2023
    • Marco 28. February 2023
  39. Jayson 13. March 2023
    • Marco 11. May 2023
  40. Bohdan 3. July 2023
    • Marco 12. July 2023
  41. Enntram Cortline 1. August 2023
    • Marco 2. August 2023

Leave a Reply