Part 1: Setup Snowpack
Tags: frontend, snowpack, react, dockerize
Published: 2021-07-25 08:33:45


**Hi! I'm Marcus.
This is my first article in my Front End series.
Each article will be written to read in 5 mins per purpose itself. I'll make a video for more understanding if possible.**

**Table of contents:**
- Part 1: Setup Snowpack
- [Part 2: Installing TypeScript and Setting Up Development](https://dev.to/marcus_hoang/part-2-installing-typescript-and-setting-up-development-m1l)

**Today I'll guide you on how to create a `snowpack` template project.**

### 1.Create `frontend` directory and open it
 ![directory ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n989rfks1yty9f4zwan.png)

Or create in terminal
 
    mkdir frontend

This command will create an empty folder, which contains our source code.

    cd frontend

### 2.Init project
![Init project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fd1ukwnu2sc1kfku1q87.png)

    npm init -y

This command will create a `package.json` file which contains `dependencies`, `command`, ..etc.

### 3.Install `snowpack` dependency
![snowpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hh1x28cp77hfzhtmdte.png)

    npm i snowpack -D
   
With flag `-D` it means we only need this dependency in the development environment.
After installed done we need to adjust `scripts` in `package.json`.

![scripts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rknvfcgqstuw72cz2xfr.png)

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

### 4.Create snowpack configuration
![configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th87zafl0woygt504ln4.png)

    npm run snowpack init

### 5.Create html template

    touch index.html

For now, our source code should be looked like this

![root structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvl3rwxih0npih31d0lx.png)

    npm run start

![serve app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba1t8rz9jetltno2g9a7.png)

Then open your browser to show the result

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifremz9ycwav4kxqbio9.png)

Tada! Ok you can stop `dev server` by `Ctrl + C` or terminate that process on `terminal`

### 6.Install React dependencies

    npm i react react-dom

Then we need adjust source code structure a little bit

    mkdir src
    mkdir public

Move `index.html` to `public` directory

    mv index.html public/

![root structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7qhlc1wlz2j94q4ee7g.png)

Create `index.jsx` file inside `src` 

![root structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2th47rvknkrefepjt2ph.png)

Edit `index.html`

![root structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdepay0ckgiia53dw7nn.png)

and `snowpack.config.js`

![root structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pbcan0mi13459sx859r.png)

    mount: {
	    public: {
		    url: "/",
		    static: true
	    },
	    src: "/"
    }

OK! Let's serve the app again.

    npm run start

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dvc3e39ppzu93k5i9qk.png)


Thanks for your reading, see you in next article
**[Part 2: Installing TypeScript and Setting Up Development](https://dev.to/marcus_hoang/part-2-installing-typescript-and-setting-up-development-m1l)**