cribbble

Getting started with Snowpack, React & Tailwind CSS

avatar
SubHero

Snowpack is the new kid on the block when it comes to frontend build tools. It seeks to replace more complex tools like Webpack and Parcel, but has a totally different approach. It requires you to use a modern browser during development, and encourages you to write your code as close as possible to code that can be run natively in a modern browser.

The constraint of developing for a browser that supports the latest features, eliminates the purpose for most of the existing tooling to get you up and running. Support for ESM modules invalidates the need to bundle your application. Support for the latest javascript features and syntax invalidates the need to transpile and build your code.

Complexities involved with building and bundling your application are dealt with when you are ready to get your code to production. This makes development very fast and quick to get started. And you can go back to writing idiomatic javascript. Sounds good to me!

Let's see how to set up Snowpack and get a project up and running.
Make sure you have node and npm installed.

Getting started

As always, create a directory for your brand new project.
Create a package.json file

npm init -y

When Snowpack is run in development, it starts a webserver and serves your project directory to the browser. So we need an index.html to show in the browser as an entry point to our application.

Create a simple index.html file in the root of your project.

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		Snowpack
	</body>
</html>

Do not forget the <!DOCTYPE html> declaration or the Snowpack live-reload function will not work as intended.

Snowpack

Now we are ready to try out Snowpack and let it handle our development.

Install Snowpack

npm i snowpack -D

and start Snowpack for development

npx snowpack dev

Snowpack opens the browser and loads your application. It even live-reloads your changes. Go ahead and try changing your index.html file. Snowpack will reload the page automatically.

It is that easy to get your development up and running! 🎉

React

As your application will eventually have a lot more source code files besides index.html, create a new directory source to contain them. As you move the index.html file to this newly created source directory, Snowpack will shout at you with a 404 and some errors in the terminal. It can not find an index.html file anymore.

We need to create a Snowpack config, to tell Snowpack where to find it. Create a file snowpack.config.js and use the mount property in the config to specify that the files in the source directory should be accessible via the root of the webserver.

module.exports = {
	mount: {
		source: "/",
	},
};

After updating the snowpack configuration file, we need to restart the Snowpack server. Quit the Snowpack server and start it again with

npx snowpack dev

Snowpack should be running again with no shouting this time. We are now ready to add react to our basic setup.

Install react and react-dom

npm i react react-dom

On completing the installation of the react and react-dom packages, we need a starting point for our javascript to run our react application.
Create a file source/index.jsx

import React from 'react'
import ReactDom from 'react-dom'

function Application() {
	return <div>Snowpack with React</div>
}

ReactDom.render(<Application />, document.getElementById('root'))

The <div>, </div> and <Application /> jsx tags are react-specific javascript syntax the browser does not understand. But no need to worry, Snowpack will intervene and transpile this into valid javascript before sending it to the browser. We only need to make sure we use the .jsx extension and Snowpack will take care of this 🥳.

We still need to add a script tag with a link to the index.jsx file, and document.getElementById('root') uses an element with id root which we don't have yet.

We update source/index.html accordingly

<!DOCTYPE html>
<html>
	<head>
		<script type="module" src="index.js" defer></script>
	</head>
	<body>
		<div id="root"></div>
	</body>
</html>

There are a few things to note about the script tag we used:

  1. As the browser and our code use ESM modules for our javascript, we need the type="module" attribute.
  2. In the src="index.js" attribute, we do not use the .jsx extension, as for the browser, there is no such thing as jsx. Although the index.js file does not exist, the Snowpack dev web server, which handles the request, will look for files that could be used to serve this request for index.js and will find our source/index.jsx.
  3. We use the defer attribute, to tell the browser to execute the javascript after the document is fully loaded. Otherwise the javascript would run while the root element is not yet loaded.

After restarting the Snowpack dev server once again our react application should work, and the web page should be updated with the new content.

Tailwind

Having a fully functional react application development setup, we will extend it to add tailwind for styling our application.

Install Tailwind CSS

npm i tailwindcss -D

And we will update our react code to make use of tailwind.
Update the source/index.jsx file to include a tailwind class text-pink-500.

import React from "react";
import ReactDom from "react-dom";

function Application() {
	return <div className="text-pink-500">Snowpack with React & Tailwind CSS</div>;
}

ReactDom.render(<Application />, document.getElementById("root"));

Create a source/index.css file with the tailwind directives.

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

In the source/index.html file, we link to the css files we just created.

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="index.css" />
		<script type="module" src="index.js" defer></script>
	</head>
	<body>
		<div id="root"></div>
	</body>
</html>

The only thing left to do to get this working, is integrate TailwindCSS into our Snowpack build. Since Tailwind CSS is a PostCSS plugin, we need to install, configure and integrate PostCSS.

Install PostCSS

npm i postcss-cli -D

Configuration is done by adding a postcss.config.js file

const tailwindPlugin = require('tailwindcss');

module.exports = {
	plugins: [tailwindPlugin],
};

Integration into Snowpack is easy. Add a build plugin to snowpack.config.js like this:

module.exports = {
	mount: {
		source: "/",
	},
	plugins: [
		["@snowpack/plugin-build-script", { cmd: "postcss", input: [".css"], output: [".css"] }]
	],
};

And of course we install the plugin we just specified

npm i @snowpack/plugin-build-script -D

Now Snowpack will run PostCSS as part the build, which will in turn find the @tailwind directives in our css file, which will trigger Tailwind CSS to generate all the classnames.

Do not forget to restart the Snowpack dev server after updating the configuration file. Restarting snowpack now can take a minute as tailwind needs to run and generate all the classes.

If all went according to plan, your page now has the pink text, and the development setup is now complete. You can start developing your application using all the React and Tailwind goodies, while having a super fast workflow thanks to Snowpack!

👨‍💻