Snowpack for fast builds

react and tailwind too

Published January 2, 2022 #snowpack, #react, #tailwind

Snowpack

  npm install --save-dev snowpack

Then add to package.json


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

React

Now lets add react:

  npm install react react-dom --save

And create our files:

src/index.tsx:

  import React from "react";
  import ReactDOM from "react-dom";
  import App from "./App";

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

src/App.jsx:

  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

npm install --save-dev tailwindcss @snowpack/plugin-postcss postcss
  // postcss.config.js
  module.exports = {
    plugins: {
      tailwindcss: {},
      // other plugins can go here, such as autoprefixer
    },
  };
  // tailwind.config.js
  module.exports = {
    mode: 'jit',
    purge: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
    // specify other options here
  };
  // snowpack.config.mjs
  export default {
      mount: {
          src: '/dist',
          public: '/',
      },
      devOptions: {
          tailwindConfig: './tailwind.config.js',
      },
      plugins: [
          '@snowpack/plugin-postcss',
      ],
  };

Then create the css:

@tailwind base;
@tailwind components;
@tailwind utilities;

html to tie it together:

public/index.html:

  <!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

npx run build
  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
  du -sh build
168K	build

References

  1. https://www.snowpack.dev/tutorials/react

  2. https://www.snowpack.dev/guides/tailwind-css/

Read next

See also

Bootstrapping React with Tailwind

as so I remember

This is straight from the Tailwind Install Guide but here so I can remember it easier. Setup the project npx create-react-app my-app cd my-app Install tailwindcss npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat \ @tailwindcss/postcss7-compat \ postcss@^7 \ autoprefixer@^9 Install craco npm install @craco/craco And change the scripts part of package.json: "start": "craco start", "build": "craco build", "test": "craco test", Create a craco.

Read more

Building static OpenFaas templates

Packaging up the packager

I've been playing with OpenFaaS recently and it's a very accessable way to starting building cloud first services. I wanted to see what I could cram in there, so I built a few templates that would let me host a static site. One that is just html, and another than can be built with something like create-react-app. Static Create the template directory: mkdir -p template/static Then add a template/static/template.

Read more

Playing with tailwind

An excersize in minimilism

We are going to use tailwindcss to build a site. We will start with a blank folder and a static HTML file to work on the designs, and then slowly bring in other tools when needed to add in functionality. The site that we are going to build is a company directory that pulls in data from Google Apps Suite. The goal here is to build the simplest thing possible and not get lost in the tooling.

Read more