Question: Only for SPA? If used in a regular plugin, service-worker.js not loading.

[igorbenic]

I am using this tool for a tutorial of mine which I am writing.

It is a classic WordPress plugin which loads the React App as a part of a shortcode. Everything is working fine except trying to load the service-worker.js on the root URL.

I guess that is fine when it is used as a SPA.

If you plan for this tool to be used inside themes/plugins that are not intended for SPA sites, maybe there could be setting in $defaults: https://github.com/humanmade/react-wp-scripts/blob/master/loader.php#L130 to exclude service-worker.js from loading?

If not, just close it as if it was never asked :D

Thanks for such a nice tool!

[rmccue]

Typically, I'd say you want to remove service-worker.js from your plugin if you don't need it (which is the case for most plugins).

It is a good point though that we're taking all JS files and enqueuing them, whereas we really only want to load one entrypoint. Maybe we should have a entrypoint setting, defaulting to index.js or whatever the usual entrypoint is.

cc @kadamwhite who is on holiday, so expect a delay before any movement here :)

(And let us know how the tutorial goes!)

[igorbenic]

Hi @rmccue,

cc @kadamwhite

Thank you for the answer. Sorry for a late response. I also decided to go with deleting it.

The tutorial is going great, just finished another part of it: https://www.ibenic.com/quiz-wordpress-rest-api-react-scripts-tool/

Also hosting a new webinar next Monday on integrating React WP Scripts: https://www.ibenic.com/webinar/

[roborourke]

FWIW I had some success adding the following to my index.js:

if ( process.env.NODE_ENV === 'production' ) {
	// eslint-disable-next-line
	__webpack_public_path__ = globalVarWithURLToBuildDirectory;
}

The global var bit I added via wp_localize_script().

Then in the registerServiceWorker.js file I changed line 34 to:

const swUrl = `${globalVarWithURLToBuildDirectory}/service-worker.js`;

Finally, I changed the npm build script in package.json to:

{
   ...,
   "scripts": {
    ...,
     "build": "NODE_ENV=production react-wp-scripts build"
   }
}

There are some issues with having multiple react apps / bundles and doing this though so I need to figure that out but this seemed to work.

[roborourke]

Actually a bit easier than that, along with the branch in #30 you can do the following:

npm install --save react-app-rewired dynamic-public-path-webpack-plugin replace-in-file

package.json

"homepage": "my-plugin",
"scripts": {
    "start": "react-app-rewired start --scripts-version react-wp-scripts",
    "build": "NODE_ENV=production react-app-rewired build",
   "postbuild": "replace-in-file $npm_package_homepage 'self.registration.scope + \"' build/service-worker.js",
    ...
}

config-overrides.js

const DynamicPublicPathPlugin = require('dynamic-public-path-webpack-plugin');

module.exports = function( config, env ) {
  if ( env === 'production' ) {
    config.plugins.push( new DynamicPublicPathPlugin( {
       externalGlobal: 'window.HM.Workflows.BuildURL', //Your global variable name.
       chunkName: 'my-plugin',
    } ) );
  }

  config.entry = { 'my-plugin': config.entry };

  return config;
}

Will document it on the wiki and close this issue out.