Environment Setup

Written by: Marlon Colca
Posted on 19 Sep 2025 - 15 days ago
typescript nodejs vue games

Let us make sure your tooling is ready so you can iterate quickly without surprises.

Module 2 · Environment Setup 🧰

Let us make sure your tooling is ready so you can iterate quickly without surprises.

Requirements

• 🟢 Node.js 18 or newer
• 📦 npm (ships with Node)
• ✍️ A comfortable editor (VS Code, WebStorm, Neovim… you decide!)

Verify your versions:

node -v
npm -v

If you use nvm or fnm, set the proper Node version before continuing.

Essential scripts

The package.json already exposes the commands you will use daily:

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview"
}

• npm run dev → starts the blazing-fast Vite dev server with hot module replacement.
• npm run build → outputs an optimized bundle to dist/ using tsc for type checks.
• npm run preview → spins up a static server so you can experience the production build.

Project layout

src/
 ├─ components/        # Vue SFCs for UI pieces
 ├─ composables/       # Game logic and reusable state stores
 ├─ style.css          # Global styles and board layout rules
 └─ main.ts            # Application bootstrap

Keep the composables/ directory in your sights—we will spend a lot of time there.

Pro tips

• 💡 Install the official Vue extension for syntax highlighting, IntelliSense, and devtools integration.
• 🛡️ Enable strict TypeScript options to catch mistakes early.
• 🔁 Run npm run build every now and then to ensure the production bundle stays healthy.

With a smooth workflow in place, you are ready to dive into the brain of the game. Onward! 🧠

🔜 Coming up next

Game Logic & Reactive State

Time to peek under the hood! The useGame composable orchestrates everything: deck creation, preview timing, scoring, and persistence. We will dissect the most important pieces.

20 Sep 2025 - 14 days ago