How to get started with Snowpack

A Snowpack is a build tool used to automates the process of building the app from the source code.

In the last few years, development frameworks improve the scalability, and security, of web applications. Besides, it increases the complexity of web applications. With the help of building tools, we control the size of the application. It also improves the page load speed.

There have been many JavaScript build tools like webpack, Parcels, Google Closure Tools.

Why do we need to learn Snowpack if we already know webpack?

If you already knew webpack, then you are aware of the steep learning curve of it. It is hard, especially for beginners.

Though, indeed, Snowpack is not as flexible as Webpack but it is worth to Learn.

Let's Start!!!

Snowpack is a frontend build tool, like a webpack or Parcel. Unlike webpack, it is lightweight, and the build process is more manageable than the webpack.
Irrespective of the project size, Snowpack builds significantly faster than webpack or Parcel.

Bundled and Unbundled development

In bundled development, All the files serve to the browser through a bundler. JavaScript build tools like Webpack focuses on bundled development. It injects complexity into our dev environment. Every time we change a file, Webpack rebuilt the application.

Unbundled development ports the modified files to the browser during the development of our application. Using this approach loads the individual file in the browser using the ESM import and export syntax. Any time the file, changes build tools like Snowpack rebuilds only that file instead of the whole application. It increases the performance and reduces the waiting time.

Snowpack serves applications using the unbundled development. Each file compiles once and is cached forever. Whenever we change a file, Snowpack rebuilds that single file. It gives us the production builds without compromising the performance.

Insights

Snowpack traverses all the used npm packages in the application under the node_modules directory.
Snowpack bundles it into separate JavaScript files. Like react.js for react library and your react-dom.js for react-dom.

node_modules/react/**/*     -> http://localhost:3500/web_modules/react.js
node_modules/react-dom/**/* -> http://localhost:3500/web_modules/react-dom.js

After the build, the below statement is perfectly valid

<body>
  <script type="module">
    import React from 'react';
  </script>
</body>

Installation

We can install the snowpack using either of npm or yarn.

npm install --save-dev snowpack
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
...
....

+ snowpack@3.8.6
added 392 packages from 271 contributors and audited 392 packages in 43.228s

49 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

To start the snowpack, we can use npx snowpack devs but we'll use conventional approach of package.json.

In the package.json file

{
  "name": "Snowpack-Testing",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "snowpack build",
    "start": "npx snowpack dev"
  }
}

and use npm run start to start the dev server. And we use npm run build to build the project.

<!doctype html>
<html>
  <head>

  </head>

  <body>
    <strong> Snowpack serves this page. </strong>
  </body>

</html>

Now run npm run start and open the http://localhost:8080/index.html on the browser.

There you go! We have a Snowpack project up and running! In the next article we'll cover the ESM Modules.
Subscribe to get notifications for more updates.