Remote React App Loader

Easily load React apps inside of WordPress with your theme's header & footer.

Once this plugin is activated, the React app(s) defined within your site's wp-config.php will automatically be loaded into WordPress at the location of your choice. This allows you to keep your React app's build/deployment pipeline separate from your WordPress pipeline, eliminating the need to add non-standard directories to the root of your WordPress install or wrap a React-app inside of a WordPress plugin.

Install

Upload the plugin to your plugins directory and activate it.

If using composer:

composer require masonitedoors/remote-react-app-loader

Usage

Define the React app(s) within your site's wp-config.php. See options for all available options.

define( 'REACT_APPS',
    [
        [
            'slug'               => 'my-react-app',
            'base_url'           => 'https://fake-company.github.io/',
            'asset_manifest_url' => 'https://fake-company.github.io/test-react-app/asset-manifest.json'
        ],
        [
            'slug'               => 'another-react-app',
            'base_url'           => 'https://fake-company.github.io/',
            'asset_manifest_url' => 'https://fake-company.github.io/test-react-app/asset-manifest.json'
        ]
    ]
);

You'll need to refresh your site's rewrite rules in the database before you will see your React apps. You can do this by simply visiting your site's permalinks settings page in the admin area.

Visiting the Permalinks screen triggers a flush of rewrite rules

Settings → Permalinks

Options

option	type	description
slug	string	The slug to tell WordPress to stop handling so React can handle routing.
base_url	string	The base url for the remote React app.
asset_manifest_url	string	The full url to the remote React app's asset-manifest.json.
root_id - optional	string	The id of the root element the app mounts to. Defaults to root.
scripts - optional	array	The React app's script dependencies in addition to react & react-dom which are always loaded. Defalts to an empty array.
styles - optional	array	The React app's style dependencies. Defalts to an empty array.

Plugin Requirements

• PHP >= 7.1
• WordPress >= 5.0

React App Requirements

• Build contains an asset-manifest.json (generated automatically in create-react-app)

Images

It is up the React app to ensure that any images used are using absolute paths. It is recommended to use a digital asset management service such as Widen. Any images using relative paths within the react app will be broken when the app is loaded within WordPress.

Styles

When the React app is loaded from within WordPress, there is potential for styling conflicts introduced from theme/plugin CSS. It is recommended that you scope your React app's base styles within the React app at a root component using CSS Modules.

App.js:

import styles from "./App.module.scss";

function App() {
  return (
    <div className={styles.App}>
        ...
    </div>
  );
}

App.module.scss:

// App root styles.
.App {
  ...
  // Our apps base element styles. These will be globally scoped under App.
  :global {
    h1 {
      ...
    }
    p {
      ...
    }
    a {
      ...
    }
    em {
      ...
    }
  }
}

Once implemented, our base styles will now be scoped under the root hashed component:

Credit

This plugin is based off the great work done by humanmade/react-wp-scripts.