Need help with react-wp-scripts?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

humanmade
207 Stars 28 Forks 126 Commits 11 Opened issues

Description

Integrate create-react-app with your WordPress theme/plugin.

Services available

!
?

Need anything else?

Contributors list

react-wp-scripts

A wrapper for create-react-app's

react-scripts
to allow seamless usage of scripts and styles served from

webpack-dev-server
while developing a theme or plugin.

Important Note: This project is brand new, and largely untested. We recommend using it as a learning tool rather than depending on it for critical development work.

Installation & Usage

Run

npx create-react-app app-name --scripts-version react-wp-scripts --php-namespace="Your_Namespace" /path/to/your/project/folder
to generate a new create-react-app project configured to use these custom scripts.
  • Replace
    app-name
    with the name of the app, as you want it to appear in the name index of package.json.
  • Replace
    Your_Namespace
    with the PHP namespace you would like to use for this file; it will default to
    ReactWPScripts
    .
  • Replace
    /path/to/your/project/folder
    with the directory, relative to current working directory to generate files in.

The file

react-wp-scripts.php
will be created within your generated project folder.

Once installed, you can require this file from your theme or plugin code: ```php require DIR . '/react-wp-scripts.php';

function myprojectenqueueassets() { // In a theme, pass in the stylesheet directory: \ReactWPScripts\enqueueassets( getstylesheet_directory() );

// In a plugin, pass the plugin dir path:
\ReactWPScripts\enqueue_assets( plugin_dir_path( __FILE__ ) );

} addaction( 'wpenqueuescripts', 'myprojectenqueue_assets' ); ```

This will load all generated JS and CSS into your theme or plugin.

You may now use the

react-scripts
commands as normal while you develop.

PHP Interface

enqueue_assets

The

enqueue_assets
function takes two arguments: the filesystem path to the project directory containing the
src
and
build
folders, and an optional array argument which may be used to customize script handles and dependencies. Available options:
  • base_url
    : The URL of the project base that contains the
    src
    and
    build
    directories. If not specified, this URL will be inferred from the provided directory path string.
  • handle
    : The handle to use when registering the app's script and stylesheet. This will default to the last part of the directory passed to enqueue_assets.
  • scripts
    : An array of script dependencies to load before your bundle.
  • styles
    : An array of stylesheet dependencies to load before your bundle.

How It Works

This project solves two issues that prevent seamless usage of Webpack projects in WordPress themes and plugins:

  1. WordPress doesn't necessarily know where to look for the output bundles.
  2. WordPress cannot access the development server due to cross-origin restrictions.

When you run

npm run build
in a
create-react-app
project,
react-scripts
uses the
webpack-manifest-plugin
to output an
assets-manifest.json
file containing the paths of all generated assets. Since files are generated with content hashes in their filename, this file can be ingested from PHP to ensure we are enqueueing the right scripts or styles for our application.

Running

npm start
, on the other hand, doesn't output a thing: this is because
webpack-dev-server
compiles files in-memory and does not write anything to disk, but also because the development webpack configuration does not contain that
webpack-manifest-plugin
(as the output files have no hash). If the dev server used a static host and port we could hard-code the URIs for those development bundles into our WordPress themes and plugins, but
react-scripts
tries to pick an unused port for your server so the port may change.

react-wp-scripts
wraps the default
react-scripts
"start" command with code that tweaks the development Webpack and
webpack-dev-server
configuration objects, injecting cross-origin headers, a
webpack-manifest-plugin
plugin configured to output from within
webpack-dev-server
, and other optimizations to allow WordPress and the Webpack build to properly communicate. All successful builds will now create an
assets-manifest.json
file, either at the project root (when the development server is running) or in the
build/
directory (as part of a static build).

Finally, the PHP in

loader.php
uses the location of the generated
assets-manifest.json
file to enqueue scripts either from the development server or from the static
build/
directory.

Troubleshooting

Server will not start

If the development server will not start or WordPress is showing script errors, try deleting the

assets-manifest.json
in the project root then re-start the development server.

Scripts do not load

If the development server is not running, the root

assets-manifest.json
is not present, and scripts still will not load, re-run
npm run build
to re-generate any build assets that may be missing.

Fatal Error: Cannot redeclare ReactWPScripts...

If you get an error that you cannot reduplicate a method in the

ReactWPScripts
namespace, the cause is likely that two copies of
loader.php
are present in separate plugins or themes. Switch the copy in the plugin or theme under development to use a different namespace to avoid collision.

404 In WordPress When Loading Bundle On HTTPS Site

By default create-react-app's webpack dev server does NOT use HTTPS. If your WordPress site uses HTTPS, you are likely to get a 404 error like

https://localhost:3000/static/js/bundle.js
in WordPress, even though the webpack dev server, when accessed directly works fine.

To fix this, you must enable HTTPS for the webpack server.

0) Create a .env file in your plugin's root directory, if it does not exist. 1) In .env add

HTTPS=true
2) Stop and restart the dev server. 3) Load the new HTTPS localhost URL in the browser and dismiss any untrusted certificate warnings.

See this PR for more information.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.