js-stack-from-scratch

js-stack-from-scratch copied to clipboard

Type of issue:

bug?

Chapter:

03 and 04 (at least up to the React section)

If it's a bug:

Both nodemon and webpack-dev-server is watching for changes. When a change occur, both the server and webpack tries to reload. This causes webpack to not be able to reach the server, and the reload fails (no response).

How to reproduce:

1. Run npm start (or yarn start)
2. Run npm run dev:wds (or yarn dev:wds)
3. Navigate to localhost:8000
4. Make a change in for example src/client/index.jsx
5. Webpack will reload and the page will disappear in the browser since the reloaded page can't be found while the server is restarting

Surely I can't be the first to experience this?

Edit: But it works better when I implemented hot reloading, probably because it runs a different server. But maybe it should be explained somewhere

I had the same issue. I fixed it by adding the --watch flag to the nodemon command, located in the dev:start script in package.json.

nodemon -e js,jsx --ignore lib --ignore dist --watch src/server --exec babel-node src/server

I am not 100% sure this is the "right" solve, however.

@matthewepler your solution works fine, and it seems pretty logical to not restart the express server when the client is modified.

For all who are looking for a solution to this in 2020 :-)

If you are trying to have nodemon build and launch server code while webpack-dev-server is running on your client, you need to set an aggregateTimeout to allow your server to build and launch BEFORE the refresh kicks in.

I added this line to my webpack.config.js and it helped me.

devServer: { watchOptions: { aggregateTimeout: 800 } }