2

Currently, I developing a WordPress plugin with React frontend. I tried to connect my backend (PHP) running on a virtual host with webpack devserver with hot module replacement (HMR).

Is there any config how to do it.

note: I tried with devserver proxy but cant figure it out.

Thanks in advance.

user13103887
  • 169
  • 1
  • 7
  • Can you explain how PHP is related to Webpack and HMR ? Webpack is for JavaScript - not for PHP code. And HMR works according to where you run the dev server - on your local PC or on your remote server. – IVO GELOV May 09 '21 at 15:10
  • Actually, I am developing a WordPress plugin, where my plugin runs in an index.php file inside the WordPress project which is also run from a PHP file. If I run my Javascript project individually it cannot inherit any properties and config from the parent WordPress project. So I want to run my app through WordPress and keep watching my js files. – user13103887 May 10 '21 at 05:55
  • I still don't understand how Webpack is going to execute your PHP scripts (when a request from the browser comes in) so that it can then serve the PHP output through the dev server? – IVO GELOV May 10 '21 at 06:01
  • If I say simply, my project runs via PHP server with index.php and this file has some javascript file included. so I want to watch those js using HMR. [Browsersync](https://www.youtube.com/watch?v=fH_rw_wAdhk&ab_channel=ChrisCourses) can do this but it's not HMR – user13103887 May 10 '21 at 06:07
  • I doubt you can do that. HMR does not work this way. – IVO GELOV May 10 '21 at 09:23
  • I think maybe there is a way cuz I am able to integrate with the BrowserSync plugin with proxy. e.g Browsersync running `localhost:3000` and proxying `my-virtual-host-domain.dev` . But Browsersync does not have an HMR feature. – user13103887 May 10 '21 at 09:30
  • I am curious - if Browsersync runs locally on your PC, and the PHP script(s) that generates the JavaScript code runs on `your-vps-domain.dev` which is somewhere on a distant server - then how does Browsersync detect when you change the PHP files on the server? – IVO GELOV May 10 '21 at 14:53
  • no, it's not another server. It's running on my `localhost:80/project`. I just configured a virtual host and changed `etc/hosts`. – user13103887 May 11 '21 at 05:25
  • virtual hosts of your local project can be easily generated by Laragon. – user13103887 May 11 '21 at 05:26
  • Maybe these can help you - https://devs-group.medium.com/wordpress-vue-js-with-webpack-and-hot-reload-7c4faea9d0d9, https://stackoverflow.com/a/46672346/5962802, https://dev.to/felipperegazio/a-complete-live-reload-feature-for-php-projects-in-a-single-class-380m, https://symfonycasts.com/screencast/javascript-webpack/hot-module-replacement – IVO GELOV May 12 '21 at 06:18

1 Answers1

2

Getting HMR is always complicated for custom setup like these. Theoretically, this is pretty simple. You simply need to run the webpack-dev-server with the HMR module. On your PHP file, make sure it uses the JS file generated from webpack-dev-server. The code to refresh is bundled in the JS file so it should work.

However, the devil is in the details. You'll need to make sure the communication between your page and webpack-dev-server works without issue. Monitor your websocket network request and make sure they communicate as expected.

An issue you'll probably encounter is security since the websocket connection is expecting a different host. In this case, you can use config from the following answer: I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely

Another issue could be that the JS file tries to connect to the wrong location. Eg: It thinks that your host is where the websocket connection is. If this is the case, you can use the public setting. See here for documentation: https://webpack.js.org/configuration/dev-server/#devserverpublic

To me this is akin to running with a reverse proxy. You can see this discussion to understand the problem: https://github.com/webpack/webpack-dev-server/issues/804

There might be other problems. You just need to check the websocket connection and make sure they communicate without problems

How you refer to the generated js file is a separate problem. A simple example would be setting the port to 8081 and bundling the js file into bundle.js. Then in your php code, refer to it as http://localhost:8081/bundle.js

Vija02
  • 308
  • 3
  • 7