Getting Started

Quick Start

cd [path-to-your-wordpress-root]/wp-content/reactpress/apps/
npx create-react-app [your-appname]
cd [your-appname]

Start your WordPress development system and go to /wp-admin/admin.php?page=reactpress in your WordPress admin. Then add an URL slug to your app. Wait till finished.

yarn start

Then open http://localhost:3000/ to see your React app embedded in your WordPress design.

To see your app embedded in your WordPress development system use yarn build.

When you are ready to deploy your React app to your production system, follow the deployment guide.

Creating an app in ReactPress

You’ll need to have a running WordPress and Node >= 14 on your local development machine (but it’s not required on the WordPress server). You will also need a POSIX-compliant development system (macOS/Linux) and install ReactPress on all WordPress instances. Windows support is still experimental. We recommend Windows users to use WSL 2.

Change to the apps directory of ReactPress and create your React app. You find the path to the apps directory on the ReactPress admin page.

cd [path-to-your-wordpress-root]/wp-content/reactpress/apps/
npx create-react-app [your-appname]
cd [your-appname]

Go back to the ReactPress admin, reload the page, and you should see your React app.

Add a page slug for your app (this may take a while). ReactPress will now create/update the page for the given URL slug and download the content of this page to the index.html of your React app. You can now develop your React app with the theme of your WordPress.

If you change the theme of your WordPress, you need to click “Update Dev-Environment” to reflect the theme changes.

Start your development server to develop your app as usual.

yarn start

To see your app embedded in your WordPress dev system, you need to build it. ReactPress makes sure that the build path of your React app is configured in the right way.

yarn build

Deploy to your WordPress production system

To deploy, you need to re-create the same app on your server. Except that you only upload the build of your React app.

Start with creating the same app directory in [path-to-your-wordpress-root]/wp-content/reactpress/apps/ on your live server.

Reload the ReactPress page and set the exact same configuration as on your development system. Make sure you use the exact options – otherwise the app won’t work as expected.

Upload the build folder from your dev system to …/wp-content/reactpress/apps/[your-app-name]/build onto your live server.

Open the React app under [your-domain]/[your-slug]. You should have a working app.