My first experience of using Snowpack - a new way of building JS
Tags: snowpack, bundle, webpack, javascript
Published: 2020-01-10 16:09:08

---
title: My first experience of using Snowpack - a new way of building JS
published: true
date: 2020-01-10 16:08:00 UTC
tags: snowpack, bundle, webpack, javascript
canonical_url: https://blog.atrera.com/javascript/2020/01/10/my-first-experience-of-using-snowpack.html
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3fpzn4n3i62b2z5wo3o4.jpg
---

Do you think it is complicated to bundle your web application? Recently I saw a relatively new thing to me: Snowpack, it claims it can “Build web applications with less tooling and 10x faster iteration”.

Let’s have a look on how to build a simple React app with Snowpack!

## Install Snowpack

First, install Snowpack.

```
npm install snowpack
## or use directly using "npx snowpack"
```

As I normally use React, so I decided to install React, rather than using Preact that recommends by the [Official Guide](https://www.snowpack.dev/). You need to install the react packages that support ESM, in order to use with Snowpack.

```
npm install react@npm:@reactesm/react react-dom@npm:@reactesm/react-dom
```

Then you can run `npx snowpack` after install. You will see a new folder called `web_modules` that contains react and react-dom.

## Install Babel

```
npm i @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/preset-react @babel/preset-env serve
```

With `.babelrc` file in the root folder and add `"snowpack/assets/babel-plugin.js"` to the plugin, this is a crucial one if you need to import plugin by name, like `import react from 'react'`.

```
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx"],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["snowpack/assets/babel-plugin.js", {}]
  ],
  "presets": [
    "@babel/react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        },
        "modules": "false",
        "useBuiltIns": false
      }
    ]
  ]
}
```

I added a npm script for babel in `package.json`:

```
"babel": "babel src/ --out-dir lib --watch"
```

## Finally… React!

First, create a `index.html` at root folder (same folder as package.json).

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Snowpack - Simple Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/lib/index.js"></script>
  </body>
</html>
```

Create a folder called `src` and an index.js file inside, also create App component.

```jsx
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.js";

ReactDOM.render(<App />, document.getElementById("root"));

// in folder components/App.js
import React from "react";

const App = () => <div className="app">hello world</div>;

export default App;
```

## Serve your site

Run `babel src/ --out-dir lib --watch` or `npm run babel` if you have create a script inside package.json, then simply run `npx serve` to serve your contents.

You should see “hello world” in your browser `http://localhost:5000`! Viola!

## What I learn

1. It is a new way of thinking

Everything Snowpack runs is inside web\_modules, it is a really different way of thinking, rather than using webpack or other bundling tools. As it is new way of doing things, there is not many documentation or tutorials, except the official one. For the things we used to, like hashing filename on build, hot loading while development etc… It is still unknown to me with Snowpack.

Besides of those unknown, it is really 10x easier if you need to start from scratch. You don’t need to write webpack config and worrying about the development server, the speed of starting a new project could be really 10x faster than before.

This might be the future in the next 3-5 years!

1. Not every browser supported ESM

Like they stated in the Snowpack official guide, it only supports modern browser, which means… Goodbye IE11. I knew that still lots of company or sites in Asia, especially China, still need to support IE11, that means you cannot use Snowpack on those websites.

1. The documentation is important

As this project is relatively new, it doesn’t have much documentation like webpack. it looks simple on the official guide, like for installing babel, it just only have four steps, but actually you need more than 4 steps to get it work and you can only know what to do by viewing the source of the demo.

## So, which one is better? Snowpack or webpack?

It depends on what your usage is. If you are developing a static website or a simple landing page, this tool saves lots of setup time from scratch and it did optimisation for you, so you don’t need to worry about it.

If you are developing a fully functional web application, the webpack config is truly powerful and Snowpack did not have much config that you can tweak.

Nevertheless, whether to choose using Snowpack or not, the idea of using JavaScript modules (ESM) is definitely a thing. If we can get rid of supporting IE11 in the next 3-5 years, JavaScript modules (ESM) should be more popular in the future. It is worth it to have a look on it though!