Master Table of Contents

• See full index in [01. Introduction]

Who this chapter is for

• Beginners setting up JavaScript/TypeScript for the first time
• Learners who are tired of “it works on my machine” problems
• Anyone who wants a smooth start before touching React projects

What you’ll learn

• How to install Node.js the safe way on Windows/macOS/Linux
• How to verify node, npm, and project scripts correctly
• How to set up VS Code + browser DevTools like a practical dev workflow

Why this topic matters

In real projects, setup issues waste more time than coding bugs in early stages. If your environment is clean, your learning speed goes up immediately. If it is messy, every chapter feels harder than it should.

Simple truth: this chapter is not “just installation.” This is your foundation for every chapter after this.

Core concepts

Node.js and npm

• Node.js runs JavaScript outside the browser
• npm manages packages and scripts

In practice:

• Node.js is your runtime
• npm is your toolbelt for dependencies + automation

Package manager choices

• npm: default and enough for most beginners
• pnpm: faster installs and efficient storage
• yarn: common in some teams and legacy projects

If you are just starting, pick npm first. You can move to pnpm later without stress.

Essential editor setup

• Install TypeScript, ESLint, and Prettier extensions
• Enable format-on-save so your code stays consistent
• Use the integrated terminal so commands and files stay in sync

Step-by-step walkthrough

Step 1 — Install Node.js LTS

• Download LTS from the official Node.js website
• Finish the installer with default options
• Skip custom tweaks for now; stable setup first, optimization later

Step 2 — Verify installation

Run:

node -v
npm -v

If both commands return versions, you are good to go. If one command fails, fix this now before moving forward.

Step 3 — Create your first project folder

Run:

mkdir hello-toolchain
cd hello-toolchain
npm init -y

Step 4 — Add useful scripts

In package.json, add scripts you will actually use (dev, lint, format).

Target in this chapter: run one script successfully without copy-paste confusion.

Practical examples

Example 1 — Simple npm script

{
  "scripts": {
    "hello": "node -e \"console.log('Toolchain ready')\""
  }
}

Run:

npm run hello

Expected output:

Toolchain ready

Example 2 — VS Code workflow habit

• Open terminal in VS Code
• Run scripts from the same project root
• Keep one terminal context per project to avoid path mistakes

Real case:

• Most “npm command failed” issues come from running commands in the wrong folder.

Common mistakes and how to avoid them

• Installing multiple Node versions too early -> use one LTS first
• Running commands outside project folder -> always confirm current directory
• Mixing npm and pnpm in one project -> choose one package manager per project
• Installing too many tools on day one -> keep the setup minimal and stable

Mini Project

• Build “Hello Toolchain”:
• initialize a project,
• add and run one custom script,
• write a short SETUP_NOTES.md explaining what you installed and why.

Quick practice

• Verify your environment using node -v and npm -v
• Add and run one script from package.json
• Enable format-on-save in VS Code
• Explain in one sentence: when would you choose npm vs pnpm?

Key takeaways

• Clean setup removes hidden friction from your learning process
• Node + npm are your core foundation for JS/TS/React workflow
• Consistency beats complexity in early-stage projects

Next step

Continue to [03. TypeScript Foundations]