Part 2: Installing TypeScript and Setting Up Development

Khánh Hoàng (Marcus) — Mon, 26 Jul 2021 08:36:06 +0000

Hi! I'm Marcus.
This is my 2nd 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

Today I'll guide you on Installing TypeScript and Setting Up Development project.

For now our project structure looks like this

Let's coding!

1.Install `typescript` and `typing`

npm i typescript @types/react @types/react-dom -D

and rename index.jsx to index.tsx

Now you can run project

npm run start

But we should create a tsconfig.json file to configure our typescript project

2.Create `tsconfig.json`

./node_modules/.bin/tsc --init

Our tsconfig.json should look like this

For now, our project looks good and run perfectly. But when open index.tsx we'll see a redundant import line here

What will happen if we remove it?

Oop!

3.Config babel

npm i @snowpack/plugin-babel @babel/preset-typescript @babel/preset-react -D

We need install
@babel/preset-typescript & @babel/preset-react to resolve above issue
and install @snowpack/plugin-babel to integrate it into snowpack.

After that we need create a babel.config.json file in root folder

Wala!

Thanks for your reading, see you in next article
Part 3: Installing SASS/SCSS and Setting Up CSS Module

Part 1: Setup Snowpack

Khánh Hoàng (Marcus) — Sun, 25 Jul 2021 08:33:45 +0000

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

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

1.Create `frontend` directory and open it

Or create in terminal

mkdir frontend

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

cd frontend

2.Init project

npm init -y

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

3.Install `snowpack` dependency

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": {
    "snowpack": "snowpack",
    "start": "snowpack dev"
}

4.Create snowpack configuration

npm run snowpack init

5.Create html template

touch index.html

For now, our source code should be looked like this

npm run start

Then open your browser to show the 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

Then we need adjust source code structure a little bit

mkdir src
mkdir public

Move index.html to public directory

mv index.html public/

Create index.jsx file inside src

Edit index.html

and snowpack.config.js

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

OK! Let's serve the app again.

npm run start

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

DEV Community: Khánh Hoàng (Marcus)