DEV Community

Khánh Hoàng (Marcus)
Khánh Hoàng (Marcus)

Posted on • Updated on

Part 1: Setup Snowpack

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:

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

1.Create frontend directory and open it

directory

Or create in terminal

mkdir frontend
Enter fullscreen mode Exit fullscreen mode

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

cd frontend
Enter fullscreen mode Exit fullscreen mode

2.Init project

Init project

npm init -y
Enter fullscreen mode Exit fullscreen mode

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

3.Install snowpack dependency

snowpack

npm i snowpack -D
Enter fullscreen mode Exit fullscreen mode

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

"scripts": {
    "snowpack": "snowpack",
    "start": "snowpack dev"
}
Enter fullscreen mode Exit fullscreen mode

4.Create snowpack configuration

configuration

npm run snowpack init
Enter fullscreen mode Exit fullscreen mode

5.Create html template

touch index.html
Enter fullscreen mode Exit fullscreen mode

For now, our source code should be looked like this

root structure

npm run start
Enter fullscreen mode Exit fullscreen mode

serve app

Then open your browser to show the result

result

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

Then we need adjust source code structure a little bit

mkdir src
mkdir public
Enter fullscreen mode Exit fullscreen mode

Move index.html to public directory

mv index.html public/
Enter fullscreen mode Exit fullscreen mode

root structure

Create index.jsx file inside src

root structure

Edit index.html

root structure

and snowpack.config.js

root structure

mount: {
    public: {
        url: "/",
        static: true
    },
    src: "/"
}
Enter fullscreen mode Exit fullscreen mode

OK! Let's serve the app again.

npm run start
Enter fullscreen mode Exit fullscreen mode

result

Thanks for your reading, see you in next article
Part 2: Installing TypeScript and Setting Up Development

Discussion (0)