Recently, I have seen Snowpack so many times, so I think it's time to try it.
Actually, we can use create-snowpack-app to create a base app, but I think trying to create a simple app without using that can be helpful to understand the basics of Snowpack.
In this article, I tried Snowpack with reactjs and typescript.
What I made is here.
koji
/
snowpacktest
Tried snowpack with reactjs and typescript
snowpacktest
Tried snowpack with reactjs and typescript
$ cd snowpacktest
# install packages
$ yarn
# run devServer
$ yarn dev
# build
$ yarn build
You can use npm instead of yarn
$ cd snowpacktest
# install packages
$ npm install
# run devServer
$ npm run dev
# build
$ npm run build
What is Snowpack?
Snowpack is a modern, lightweight build tool for faster web development. Traditional JavaScript build tools like webpack and Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file. This rebundling step introduces lag between hitting save on your changes and seeing them reflected in the browser.
How Snowpack Works
https://www.snowpack.dev/concepts/how-snowpack-works
Create a project dir and init project
$ mkdir snowpacktest
$ yarn init
Install Snowpack and add npm script
$ yarn add --dev snowpack
"scripts": {
"dev": "snowpack dev",
"build": "snowpack build"
},
Create snowpack.config.js
In this case, public is set as the root dir.
module.exports = {
mount: {
public: { url: "/", static: true },
src: "/",
},
};
Doc: snowpack.config.js
https://www.snowpack.dev/reference/configuration#config.mount
Create index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>my first snowpack app</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.js"></script>
</body>
</html>
Install react and typescript
$ yarn add react react-dom
$ yarn add -D typescript @types/react @types/react-dom
Just in case, I put my tsconfig.json
{
"compilerOptions": {
"module": "ESNext",
"target": "ESNext",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"jsx": "preserve",
"noEmit": true,
"skipLibCheck": true,
"typeRoots": [
"node_modules/@types",
"types"
]
},
"include": [
"src",
"types"
]
}
Create a simple component
src/index.tsx
import React from 'react';
import { render } from 'react-dom';
const App = () => {
return (
<>
<h1>my first snowpack+react app</h1>
<h2>hello ❄️Snowpack❄️</h2>
</>
);
};
render(<App />, document.getElementById('root'));
Use devServer
$ yarn dev
snowpack
http://localhost:8080 • http://192.168.86.27:8080
Server started in 14ms.
If you know webpack, you may think that's it? since generally, we need to put more lines in config.js file for webpack. But, actually, that is it 😁
Let's try to display an image!
Create types/image.d.ts
To display image, we need to create a .d.ts file. In this case, we put .png, .jpg, and .svg.
declare module '*.png';
declare module '*.jpg';
declare module '*.svg';
Add lines to index.tsx
To display an image, we need to modify index.tsx a little bit.
First, install styled-components since I like it lol
$ yarn add styled-components
$ yarn add -D @types/styled-components
If you are not familiar with styled-components, please see the link.
https://styled-components.com/
import React from 'react';
import { render } from 'react-dom';
import logo from './source.png';
import styled from 'styled-components';
const Wrapper = styled.section`
padding: 4em;
background: #ededed;
`;
const Title = styled.h1`
font-size: 3em;
text-align: center;
color: #ea1ed4;
`;
const ImageWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
`;
const Greeting = styled.h2`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const App = () => {
return (
<Wrapper>
<Title>my first snowpack+react app</Title>
<ImageWrapper>
<img src={logo} />
</ImageWrapper>
<Greeting>hello ❄️Snowpack❄️</Greeting>
</Wrapper>
);
};
render(<App />, document.getElementById('root'));
If you prefer to use css, you will need to create a .d.ts for importing css
types/css.d.ts
declare module '*.css' {
const classNames: { [className: string]: string };
export default classNames;
}
Conclusion
Snowpack is pretty cool since not it supports jsx and typescript source code by default. Also we don't need to install any plugin to use dev server which is great. Of course, we can extend the build with custom plugins.
https://www.snowpack.dev/plugins
I think I will start using Snowpack for my side-project!
Latest comments (13)
what's the comparison with webpack or parcel? is build time noticeably faster? is TS integration better?
and after all, you realize that will not work with yarn workspaces or any monorepo installation, because snowpack will cache it hardly and will not see changes
Private npm packages are just a better solution
Snowpack's philosophy is to keep the toolchain minimal, using that and monorepos at the same time is kind of a paradox :)
Nice article, Thanks.
However, I guess your first example in the code doesn't get built because you haven't defined ImageWrapper yet
Good catch!
Thank you for pointing out that. I just updated the article.
You can make a React app with literally no configuration using Parcel 😎
I'm still in confuse which one choose and settle in between snowpack and parcel. ¯\(ツ)/¯
It would depend on your project. If the project is a kind of prototyping, parcel will be a good option. If not, you can try snowpack. However, there are some options for a js project such as webpack, rollup, esbuild, roma, and so on. I think webpack is very popular.
webpack is so popular. even @fredkschott mentioned in stream. most of the fallbacks are based on webpack. he said it became a sorta industry standared.
Snowpack is conceptually and fundamentally differently from Parcel:
Yep I know, I was just talking about configuration.
Yeah, that is true
How can we use it with react ssg or ssr