Untangle your web development with Snowpack

Have you noticed that web development with frontend frameworks has become more and more complicated? Now to make a simple web app you get a big, heavy folder with a bunch of dependencies in it. You can be familiar already with tools like create-react-app that does some magic behind the scenes. Then, after some time, it gives you a barebones app that you can run. But if you want to customize it further and have more specifics, you have to eject it and deal with the configuration of Webpack on your own. Well, if you’re tired of dealing with heavier and more complex bundlers in your workflow, this post is for you.

What do we need for an app?

To make a React app from scratch, we’ll need the following:

  • package manager. This lets you use several third-party packages and makes it easy to install, organize, and update them. Popular ones include npmyarnpnpm.
  • bundler. This allows you to write code in modular pieces and then bundle it up to use it for production. Popular ones here are webpackParcel or Rollup.
  • compiler. Which helps us write modern JavaScript, JSX, TypeScript and such and turn that into code that is understandable by older browsers. Best option here is Babel.

Knowing that, we can create a new directory where we’ll keep all the different files needed for the application.

If you are already familiar with the type of setup required to build any kind of app that uses a package manager like npm, you know we’ll need to go through several steps like…

  • Create a new folder and cd into it.
  • Initialize npm and git with their init commands.
  • Create an index.html file that React will use to render the content
  • Install the necessary dependencies (Babel, Webpack, etc)
  • Configure all those different tools
  • Install react and react-dom

With that we’ll have a fully functioning app that can run in the browser and that we can modify according to what we want to build. But honestly, that sounds like a lot of work to have a very minimal React app. We’re here talking about speeding up our development process not making it more cumbersome.

Enter Snowpack

In case you aren’t familiar with Snowpack, let me give you some context. Snowpack is a newer and modern build tool for web apps. It allows faster web development by leveraging JavaScript’s native module system (ESM) to avoid extra steps. Other traditional bundlers, like Webpack or Parcel, need to bundle and rebuild chunks of your application whenever the files change during the development process. This process doesn’t take much when the changes are in CSS files. But when it comes to JS, it introduces extra time before you can see those changes in the browser.  

Snowpack avoids this by serving the application unbundled during development. Every file gets built once and then cached indefinitely. When new changes get introduced, the specific file (or files) gets rebuilt while the rest remain unchanged. What that means is waiting 20-50 ms vs 2-3+ seconds for any changes to get reflected in the browser. Imagine that if you were making specific changes or debugging an app, you can go between what works and what doesn’t virtually with no pause. There will be nothing delaying your workflow once you get “in the zone”.

What’s more, in the context of creating a React app, Snowpack supports Hot Module Reloading (HMR) with Fast Refresh. With it, you could be making changes to a Timer component for instance, and the counting state will be preserved during browser updates. (Which can be useful again for live debugging purposes) With that said, let’s set up our development environment with Snowpack.

To save us several steps while creating the React app from scratch, we can make use of “Create Snowpack App”. That’s a tool from the Snowpack team to set up a new app directly in the current directory. If you are familiar with “Create Next App” from Next.js, this one works very similar. You can also use official or community templates to pass along to the tool and have some additional functionalities out of the box. In this case, we’ll be starting with a bare-bones app.

Leave a Reply

Your email address will not be published. Required fields are marked *