Webpack, React/Redux, Hot-module reloading, Node.js Project Structure for Speedy/Fun/Productive Development

Robert Desmond
Sep 5, 2018 · 3 min read

Structure of any web project: Client/Server Split

Every web application needs a server to start with. Somewhere that your application can be served from. Traditionally these were scripts that served one big block of html/css that was a web page.

From there we got into allowing the user to manipulate the data on their device (the client). Things like jQuery were/are very popular, but now we have real client frameworks like React and Angular.

These are whole applications that allow the user to interact with the web application inside their own browser, whatever that might be (phone, tablet, desktop). They can manipulate the page (e.g. add some text) and then send requests to the server to do things like update the database (save, delete, update) or request other API services.

Below are a few tools we use that make developing these kinds of apps much more fun by making it quick and easy to see the changes you have made to both the client and the server.

What is Webpack?

This is a library that helps to bundle the whole application together. It’s very powerful and has lots of plugins — e.g. you can minify the code (remove any unnecessary blank spaces), can obfuscate the code (rename all variables and functions to something unreadable and smaller) and many more fun things.

What is Webpack Dev Server?

This is a really cool part of webpack where you can serve the application in memory so you don’t actually have to output the files as new scripts. This means the application can be run much more quickly. Changes can be rebuilt incrementally (e.g. if one file changes it doesn’t have to re-bundle the whole application).

What is Hot Module Reloading?

Hot module reloading takes these changes and serves them to the browser on the fly, so the browser can pick up these changes and display the app differently without having to refresh the page.

Occasionally it does get stuck and you do need to refresh the page, but in general it works pretty well.

What is Babel?

Babel can help to ‘translate’ or ‘compile’ or realistically with JavaScript ‘transpile’ your code to a version that will run in all browsers. This means you can use the latest versions of JavaScript without compromising accessibility.

e.g. the latest ES6 scripts can be transpiled back to a basic version of JavaScript that will even run in Windows Internet Explorer!

What is nodemon?

Nodemon is a package that automatically re-runs a node process once it detects file changes.

e.g. if your server code changes, it can be rebuilt on the fly and re-served without the developer having to do anything.

How it all comes together

Client code is being bundled by webpack and served in memory using webpack dev server, and recompiled on the fly with hot module reloading.

Server code is being transpiled using babel and served using nodemon that automatically rebuilds on changes.

Now client side changes just appear in the browser, and server side changes just require another api call from the client without having to restart the server manually.

This is so easy to see changes from your code come to life in real time and no more need to restart anything to get something working!

Happy developers = happy coding = productivity profit!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade