DEV Community

loading...

Almost no config!!! Snowpack ❄️ + React + TS

Koji (he/him)
Never lose curiosity Software Engineer in NYC/Research Resident@NYU-ITP18-19 Mostly I work with typescript, javascript, react, and python. code to do something weird/useless/helpful
・3 min read

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.

GitHub logo 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
Enter fullscreen mode Exit fullscreen mode

You can use npm instead of yarn

$ cd snowpacktest

# install packages
$ npm install

# run devServer
$ npm run dev

# build
$ npm run build
Enter fullscreen mode Exit fullscreen mode



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
Enter fullscreen mode Exit fullscreen mode

Install Snowpack and add npm script

$ yarn add --dev snowpack
Enter fullscreen mode Exit fullscreen mode
"scripts": {
    "dev": "snowpack dev",
    "build": "snowpack build"
  },
Enter fullscreen mode Exit fullscreen mode

Create snowpack.config.js

In this case, public is set as the root dir.

module.exports = {
  mount: {
    public: { url: "/", static: true },
    src: "/",
  },
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Install react and typescript

$ yarn add react react-dom
$ yarn add -D typescript @types/react @types/react-dom
Enter fullscreen mode Exit fullscreen mode

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"
    ]
}
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

Use devServer

$ yarn dev

snowpack

  http://localhost:8080 • http://192.168.86.27:8080
  Server started in 14ms.
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (12)

Collapse
matjones profile image
Mat Jones

You can make a React app with literally no configuration using Parcel 😎

Collapse
raulfdm profile image
Raul Melo • Edited

Snowpack is conceptually and fundamentally differently from Parcel:

"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. [...]"

snowpack.dev/concepts/how-snowpack...

Collapse
matjones profile image
Mat Jones

Yep I know, I was just talking about configuration.

Collapse
retr0c0de profile image
Anguram Shanmugam • Edited

I'm still in confuse which one choose and settle in between snowpack and parcel. ¯\(ツ)

Collapse
kojikanao profile image
Koji (he/him) Author

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.

Thread Thread
retr0c0de profile image
Anguram Shanmugam

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.

Collapse
kojikanao profile image
Koji (he/him) Author

Yeah, that is true

Collapse
aminemx profile image
Amine Kaddache

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

Collapse
zakiazfar profile image
Mohd Ahmad

How can we use it with react ssg or ssr

Collapse
dcsan profile image
dc

what's the comparison with webpack or parcel? is build time noticeably faster? is TS integration better?

Collapse
shinm profile image
Mikhail

Nice article, Thanks.
However, I guess your first example in the code doesn't get built because you haven't defined ImageWrapper yet

Collapse
kojikanao profile image
Koji (he/him) Author

Good catch!
Thank you for pointing out that. I just updated the article.