edrpls edrpls - 2 months ago 21
Javascript Question

How to reload modules on both webpack-dev-server and express server?

I am trying to remove Grunt from a project that uses both Grunt and Webpack for dev server and building a React App. I have successfully moved all of Grunt's tasks to Webpack, except for reloading the express server whenever there's a change on the server side code.

HMR works fine on the front end, I am invoking the webpack-dev-server from inside my Express backend and linking them with the WDS proxy, I haven't found a way to reload ONLY the server side code without compiling the React app.

I tried using nodemon to watch the backend code while listening to nodemon.on('start', loadWebpackHere) to call webpack only on server start (not restarts), it does watch the server files, but the start event is triggered on too, so the bundling process is still running.

I thought I could try creating a new webpack entry for the backend server, but I am not sure if it's possible to run both servers like that.

I haven't found any articles or samples on how to achieve this, has anybody set up something similar successfully?

Answer

I could not find a way to enable HMR and also watch the API files with webpack only without triggering the UI build on API changes, but it was easy enough with a simple bash script to wrap around my app (took me months to get here, though):

#!/bin/bash

if [$NODE_ENV = "testing"] || [$NODE_ENV = "production"] ; then
    node api/server.js
else
    node_modules/.bin/nodemon --watch api api/server.js &
    node_modules/.bin/webpack-dev-server
fi

There's probably a better way, by adding the API as a webpack entry, but this one serves me just fine.