dev mode webpack

Problem

Our current start script runs like this:

npm run build-client-watch & npm run start-server

Webpack (build-client-watch) runs as a background job (that’s what the single ampersand does). This creates a couple problems:

1: The background job can turn into a zombie process causing confusion while debugging 2: It is possible to reload a browser tab before the webpack process finishes. express will happily serve the stale bundle.js

Proposal

Use webpack-dev-middleware. Webpack ships a middleware that can be added with app.use.

Webpack dev middleware bundles the javascirpt just-in-time when it is requested. It’s impossible(probably) to get a stale bundle. And there will be only one process for boilermaker projects.

Problems created

dev/deployed configuration

This will create a little more disconnect between the dev and deployed environments. It makes sense to build a bundle.js on disk for deployed environments, so we’ll need to write our webpack configuration such that it can be used both by the middleware and by webpack command line. (this is not difficult)

inconsistent with other projects

We follow this pattern in some other projects, it would be best to find them and update them to follow this pattern as well. (senior enrichment, some later jr phase projects)

[benwilhelm]

I’m with Gabriel on this one. I think as an educational tool, it makes the most sense to just call them two separate processes and have the students run them in separate terminals. We could tell them that there are more sophisticated tools out there if they want to explore them, but I think we should be optimizing for understanding over simplicity of execution.

[queerviolet]

Popping into this discussion to offer a comment of questionable value: on all my current projects, I’ve found that just using Parcel is totally the way to go for building a frontend. It doesn’t have a quick way to connect to an express server, but it would be straightforward to write a parcel plugin that:

1. Looks for ${bundler.options.rootDir}/server.js
2. Requires it
3. Calls it with bundler.server

(Parcel plugins are just functions which are called with the bundler.)

Bonus points if it also provides a command that will do this, only without the bundler and with an express server serving on $PORT and statically serving dist (which parcel bundles to).

Arguably, suffering through the slings and arrows of outrageous webpack is an important rite of passage, but my current life is better this way for sure.