Skip to content
GitLab

Allow overriding the hotDevClient URL from a global var

Closed Administrator requested to merge github/fork/roborourke/patch-1 into master

Created by: roborourke

In multiple cases now I've wanted to use create-react-app but to build an app that's embedded in another context that won't work when served from localhost. The problem being that this script assumes window.location.hostname etc... will be the webpack dev server URL.

In my particular case when developing a WordPress theme using React or a WordPress plugin with an embedded react app for some fancy admin UI.

In WP I enqueue the build file from http://localhost:3000/build/js/main.js when in debug mode. I then used wp_localize_script() to then add this global variable eg:

wp_enqueue_script( 'react-app', 'http://localhost:3000/build/js/main.js' );
wp_localize_script( 'react-app', 'webpackHotDevClientURL', [
   'hostname' => 'localhost',
   'port' => 3000
] );

The project in question that this would benefit me on in particular is https://github.com/humanmade/Restsplain

I've searched around a lot and seems to come a fair bit on stackoverflow, this post almost got me there but patching it like this would be way more straightforward IMO.