Web Developers: Use Snowpack instead of Webpack

Why you should embrace the power of ES modules by simplifying and speeding up your development process

Photo by NOAA on Unsplash

Back to Front?

Must admit I like to keep things simple. I want my back-end code to look similar to my front-end code. That means using modern javascript (ES6+) both client side and on the server. I also want to handle dependencies the same way, i.e. not include them in my repo and import them easily. On the server side that’s now possible with npm and ES module support in node.js. On the client side that’s now possible with npm, ES module support in the browser and snowpack!

The Server

So let’s look at what we can do on the server thanks to node.js version 13.9.0+.

Notice the .mjs extension, this tells node that we are in ES module land. Now all we need to do is install socket.io…

npm i socket.io

Then you could simply run it with:

node server.mjs

The Client

So to achieve similar looking code on the front-end, for example:

We need to use Snowpack on the client for the above to work…

npm i -D snowpack
npm i socket.io-client

Then update your package.json, scripts so it looks like this: