What is Snowpack and how does it differ from other build tools?

Webpack can be slow. Especially in the development mode, you may have to wait several seconds, sometimes minutes for a rebuild. This is where Snowpack comes into the game.

In development mode, Snowpack does not bundle your whole dependencies into a single file – instead, it just serves the unbundled files (with some processing needed for NPM dependencies). This is possible because modern browsers all understand ESM (import and export).

Nonetheless, you can get bundled builds with Snowpack by plugging in your favorite bundlers like Webpack or Rollup. Learn more about the Snowpack basics.

Initialize a basic project

Snowpack comes with handy tools like a CLI, a blazing fast Dev Server, and of course a build pipeline (even bundled, if you want to). Let’s initialize our first project with the built-in Snowpack CLI.

$ mkdir sp-project
$ cd sp-project
$ npm init --yes
$ npm install --save-dev snowpack

Thats all, we’re ready to roll! We’ve created a project directory sp-project, initialized NPMs package.json with the default values (enough for now), and installed Snowpack to our dev dependencies.

Get the Dev Server up and running

Add an index.html into your project root and you are able to startup the Snowpack Dev Server. But, nothing interesting will happen. So let’s add a few files and little bit of JavaScript to see how Snowpack works.

$ mkdir src
$ touch index.html src/index.js src/GreetMachine.js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="My First Snowpack Project" />
    <title>My First Snowpack Project</title>
  </head>
  <body>
    <h1 id="greeting">Hi Guest!</h1>
      <script type="module" src="/src/index.js"></script>
  </body>
</html>
// src/GreetMachine.js
export const greetPerson = (name) => {
  const el = document.getElementById('greeting')
  el.textContent = `Hi ${name}!`
}
// src/index.js
import { greetPerson } from './GreetMachine.js'

greetPerson('Matti')

Great, we’re ready to check out if Snowpack is working! Open your terminal and type:

$ npx snowpack dev

Your favorite browser should be opened automatically and you should see a pretty ugly white page with Hello Matti! on it. It seems like everything is working fine!

But now you wan’t to see how damn fast Snowpack is, right? Change the person you want to greet and check your browser window.

// src/index.js
import { greetPerson } from './GreetMachine.js'

greetPerson('Yoda')

Instantly the browser refreshes and shows you your updated code 💥 Awesome Snowpack!

Conclusion and what’s up next

In this post, you’ve learned what Snowpack is, how it differs from other build tools, why it’s so blazing fast, and how to get a basic project up and running. Because I love to work with Snowpack, there will be more posts about this great tool in the next weeks. Part II will be about working with NPM packages. Part III will focus on building for production and after that I’ll cover topics like PostCSS, React, TailwindCSS and much more!