DEV Community

Marcin Wosinek
Marcin Wosinek

Posted on

Snowpack 3 in a simple html+js use case

In this series, I'll take a look on a simple usecase of js+html application, build with various js bundlers. This time, it's time for snowpack.


Similar to vite, it focuses on improving development experience by avoiding bundling. Snowpack takes this concept slightly further, and by default its production output is unbundled as well. For bundling we have few options build in, experimental bundling with esbuild, recommended webpack plugin or rollup plugin.

In this series, we focus on production build & on having as little configuration as needed for the use case - very likely I'm overlooking main benefits of development server & build tool flexibility.

The app

application screenshot

same as other articles of this series, simple app with 1 component with template & data in separate files.


Snowpack has interesting approach to picking files to be build. Instead of having configuration files for setting entrypoints or parsing html to see what was references as other bulders, it's just build all files it's finding in our codebase. It keeps the relative paths in the build output folder as well - so we just need to make sure our html is referencing right files on the source side, and it should work in the build output as well.

The main html:

<!-- index.html -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Contact App</title>
    <link rel="shortcut icon" href="#" />

    <script type="module" src="./src/index.js"></script>
    <link rel="stylesheet" href="style.css" />
Enter fullscreen mode Exit fullscreen mode

it's copied as it is to the default output folder ./build/.

Main js file:

// src/index.js
import "./contact-list/contact-list";
Enter fullscreen mode Exit fullscreen mode

The component

The component is broken down into 3 files - so code, template & data goes to best matching code type - JS, HTM(L) & JSON.

// src/contact-list/contact-list.js
import template from "./contact-list.htm";
import contacts from "./data.json";

const contactList = document.createElement("div");

contactList.className = "contact-list";

contacts.forEach((entry) => {
  const element = document.createElement("div");
  element.className = "contact";

  element.innerHTML = template;

  element.querySelector(".name").innerHTML =;
  element.querySelector(".phone").innerHTML =;


Enter fullscreen mode Exit fullscreen mode

similar to vite, here we had to do a small tweak to our template file. If we configure raw/string loader for all HTML files, it will break our top level index.html. As snowpack plugins seems allow for loader configuration only by the extensions, the best approach seems to be just change the templates from .html to something else - here I picked .htm.

The template file we import:

<!-- src/contact-list/contact-list.htm -->
<h2 class="name">name</h2>

<p class="phone">phone</p>
Enter fullscreen mode Exit fullscreen mode

JSON files are understood by snowpack by default. We just define src/contact-list/data.json, the data file:

    "name": "Christopher L Sanders",
    "phone": "769-232-1807"
    "name": "Frances J Nolte",
    "phone": "901-287-0419"
Enter fullscreen mode Exit fullscreen mode

Build dependencies & configuration

For building, we will have default configuration + 1 plugin. The installations needed are:

$ npm install --save-dev snowpack snowpack-plugin-raw
Enter fullscreen mode Exit fullscreen mode

For easy access to build script, you can add following line to package.json:

  "scripts": {
    // other scripts
    "build": "snowpack build"
Enter fullscreen mode Exit fullscreen mode

The configuration, in the snowpack.config.json files:

  "plugins": [["snowpack-plugin-raw", { "extensions": [".htm"] }]]
Enter fullscreen mode Exit fullscreen mode

The the output of a sucessful build:

$ npm run build

> snowpack@1.0.0 build
> snowpack build

[18:08:13] [snowpack] ! building files...
[18:08:13] [snowpack] ✔ files built. [0.03s]
[18:08:13] [snowpack] ! building dependencies...
[18:08:13] [snowpack] ✔ dependencies built. [0.00s]
[18:08:13] [snowpack] ! writing to disk...
[18:08:13] [snowpack] ✔ write complete. [0.01s]
[18:08:13] [snowpack] ▶ Build Complete!
Enter fullscreen mode Exit fullscreen mode

Complete code & application example

If you want to see the application in action in the browser you can see it here:

and for the working code example you can go here:

Top comments (1)

ocra_249d7d5ce3 profile image

super useful ! thanks