humanmade/ react-wp-scripts

(1.0.0) 4 months ago

PHP

JavaScript

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

Readme

react-wp-scripts

Name: react-wp-scripts
Brand: react-wp-scripts
SKU: //humanmade/react-wp-scripts
Rating: 2.2675 (207 reviews)

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:

WordPress doesn't necessarily know where to look for the output bundles.
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.