Setting up React & Express, with Hot Module Replacement

A slightly different approach

Webpack-dev-server is an excellent utility for quickly building client-side applications. With hot module replacement out of the box, development becomes are breeze. ⚡️

But things are not always 🌈 and 🦄 though…

Those using webpack-dev-server usually fall into two categories:

1. Developers building client-only applications that don’t interact with APIs exposed by a backend server.
2. Developers building client-side apps that speak to APIs exposed by an external server. By external, I mean the server exists on another domain/origin.

But there is a third category and it’s here where problems start showing themselves —

What if you want the server serving your client-side application to also expose the APIs that client has to consume (same origin), and you want all the hot module replacement awesomeness of webpack-dev-server?

Webpack-dev-server, at its core, is built on top of two middlewares — webpack-dev-middleware and webpack-hot-middleware. So if you’re in the third category of developers, putting together your own hot module replacing environment using these middleware within your server is probably going to be your go-to solution, but this is a tedious process that takes more time to set up (and get right) than it’s worth! 😞

Oh, and did I mention that if your server needs to be transpiled or compiled (if you’re using some typing system like flow-type or typescript), then your custom built hot-module-replacement setup will break every time the server gets updated?

So…how do we make life simple again?

Webpack-dev-server’s proxy option.

The proxy option in the devServer section of your webpack config lets you proxy-pass requests that webpack-dev-server receives to other urls.

Using this, we can structure our application as follows.

• Have all client-code be served by webpack-dev-server on some port, say 9000.
• Have the server run on another port, say 9001.
• In the devServer section of your webpack config, specify the proxy option to route all requests that webpack-dev-server receives to http://localhost:9001 instead, where your server is currently exposing its APIs.

devServer: {
   proxy: {
       "/api": "http://localhost:3000"
   }
}

And that’s it!

Using webpack-dev-server instead of manually setting up the environment using the middleware saves us from some unneeded frustration, and if our server needs to be transpiled/compiled, it can do so independently without breaking hot module replacement either. 😄

Introducing jaldi ⚡️

Say hello to jaldi, a CLI utility to quickly bootstrap projects. 👋

jaldi (which is Hindi for quickly ⚡️) aims to remove the hassle of bootstrapping new projects, without being opinionated in project approach or abstracting away control from the developer.

jaldi creates the boilerplate that every developer needs to set up in the first 15 minutes of starting a project and then gets out of your way … completely.

If the project setup in this article interests you, give jaldi a try and get a project with React & Express, with hot module reloading support, set up in seconds. 🚀

~Fin~

If you found this helpful, do leave a 👏!

Stuck somewhere, need more help, or just want to say hi? Hit me up on Twitter. You can also find me on Github. 🙃