Snowpack for fast builds

Snowpack

1
  npm install --save-dev snowpack

Then add to package.json

1
2
3
4
5

"scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
}

React

Now lets add react:

1
  npm install react react-dom --save

And create our files:

src/index.tsx:

1
2
3
4
5
  import React from "react";
  import ReactDOM from "react-dom";
  import App from "./App";

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

src/App.jsx:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  import React, {useState, useEffect} from 'react';

  function App() {
    // Create the count state.
    const [count, setCount] = useState(0);
    // Update the count (+1 every second).
    useEffect(() => {
      const timer = setTimeout(() => setCount(count + 1), 1000);
      return () => clearTimeout(timer);
    }, [count, setCount]);
    // Return the App component.
    return (
      <div className="max-w-screen-lg mx-auto pt-4">
        <header>
          <p>
            Page has been open for <code>{count}</code> seconds.
          </p>
        </header>
      </div>
    );
  }

  export default App;

Tailwind

1
npm install --save-dev tailwindcss @snowpack/plugin-postcss postcss

1
2
3
4
5
6
7
  // postcss.config.js
  module.exports = {
    plugins: {
      tailwindcss: {},
      // other plugins can go here, such as autoprefixer
    },
  };

1
2
3
4
5
6
  // tailwind.config.js
  module.exports = {
    mode: 'jit',
    purge: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
    // specify other options here
  };

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  // snowpack.config.mjs
  export default {
      mount: {
          src: '/dist',
          public: '/',
      },
      devOptions: {
          tailwindConfig: './tailwind.config.js',
      },
      plugins: [
          '@snowpack/plugin-postcss',
      ],
  };

Then create the css:

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

html to tie it together:

public/index.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="description" content="Starter Snowpack App" />
      <title>React + Tailwind + Typescript</title>
      <link rel="stylesheet" type="text/css" href="/global.css" />
    </head>
    <body>
      <div id="root"></div>
      <script type="module" src="/dist/index.js"></script>
    </body>
  </html>

Build

1
npx run build

1
  tree build

build
├── _snowpack
│   └── pkg
│       ├── common
│       │   └── index-ae389540.js
│       ├── import-map.json
│       ├── react-dom.js
│       └── react.js
├── dist
│   ├── App.js
│   └── index.js
├── global.css
└── index.html

4 directories, 8 files

1
  du -sh build

168K	build

Snowpack for fast builds

Snowpack

React

Tailwind

html to tie it together:

Build

References