Skip to content
This repository has been archived by the owner on Nov 15, 2019. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

masonitedoors/remote-react-app-loader

Repository files navigation

Remote React App Loader

Build Status

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:

Edit this example on codesandbox

Credit

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