Section 04

4 of 5

Set Up Your Stack

Install and configure everything you need: Node.js, Git, VSCode, Claude Code, GitHub, and Vercel. Tabs for every OS.

ℹ️

This section uses OS tabs throughout. Pick your platform once and follow the instructions for it. If you're on Windows, consider also setting up WSL2 (Windows Subsystem for Linux), which makes everything smoother. There's a step for that at the end.

🤖Setup overview

Orientation prompt

I'm setting up a development environment for the first time. I need to install Node.js, Git, VSCode, and some CLI tools. Can you explain what each of these things is, why I need it, and how they work together? I want to understand the "why" before I run any commands.

👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.

Install Node.js (via nvm)

Node.js lets you run JavaScript outside the browser. You need it for the npm package manager, which is how you install Claude Code, Next.js, and almost everything else in the modern web dev stack.

The easiest way on macOS is via Homebrew, the de-facto package manager for the Mac.

1. Install Homebrew (if you don't have it):

bash

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Install Node.js via nvm (Node Version Manager):

bash

brew install nvm
mkdir ~/.nvm
# Add to ~/.zshrc:
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"

# Reload shell, then:
nvm install --lts
nvm use --lts

3. Verify:

bash

node --version  # should print v20.x or higher
npm --version

💡

Always install Node via nvm rather than directly. It lets you switch versions per project and avoids permission headaches.

Install and Configure Git

Git is version control. It tracks every change to your code, lets you revert mistakes, and connects to GitHub so you can collaborate and deploy.

macOS ships with a (usually outdated) git. Get the latest via Homebrew:

bash

brew install git
git --version  # should print 2.40+

# Configure your identity (required for commits)
git config --global user.name "Your Name"
git config --global user.email "you@example.com"

💡

Set your name and email before making any commits, as they get embedded in every commit you make.

🤖Git basics

Deep-dive prompt

Explain Git to a complete beginner. What problem does it solve? What are commits, branches, and merges? What's the difference between git and GitHub? Walk me through the basic daily workflow: staging changes, committing, pushing to GitHub.

👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.

Install VSCode

Visual Studio Code is a free, open-source code editor built by Microsoft. It's the most popular editor in the world for web development: fast, extensible, and works great with all the other tools in this stack.

Download from code.visualstudio.com and drag to Applications. Then enable the terminal command:

Open VSCode
Press ⌘ + Shift + P
Type Shell Command: Install 'code' command in PATH
Hit Enter

bash

code .       # open current folder
code ~/projects/my-app

Recommended Extensions

Open VSCode, press ⌘/Ctrl + Shift + X, and install:

ESLint

dbaeumer.vscode-eslint

Catches JS/TS errors as you type

Prettier

esbenp.prettier-vscode

Auto-formats your code on save

GitLens

eamodio.gitlens

See git blame and history inline

Tailwind CSS IntelliSense

bradlc.vscode-tailwindcss

Autocomplete for Tailwind classes

💡

The first extensions you should install: ESLint, Prettier, and GitLens.

Install Claude Code

Claude Code is an AI coding agent that lives in your terminal. It can read your files, edit code, run commands, and work through multi-step tasks, all from natural language instructions.

bash

npm install -g @anthropic-ai/claude-code
claude --version

Then start it in any project folder:

bash

cd ~/projects/my-app
claude

On first launch it will ask you to log in with your Anthropic account or API key.

Three ways to use Claude Code: CLI (terminal): what this guide uses, the most powerful option. VS Code extension: install “Claude Code” from the VS Code marketplace to get a sidebar panel inside your editor. Desktop app: a standalone GUI for Mac and Windows at claude.ai. All three use the same underlying model.

Key commands to know

claudeStart Claude Code in the current directory

/helpShow all slash commands

/clearClear conversation context

/memoryView and edit Claude's memory

EscapeCancel current action

Ctrl+C twiceExit Claude Code

💡

You need an Anthropic account (claude.ai) to use Claude Code. The free tier has limits; Pro ($20/mo) gives you much more capacity.

💰 What does this cost?

claude.ai Pro ($20/mo): Includes Claude Code usage. This is the easiest way to get started.
API (pay-as-you-go): ~$0.003 per 1,000 input tokens for Sonnet (fractions of a cent per message). A typical coding session costs $0.10–$1.
Free tier: claude.ai has a free tier with daily limits, fine for learning, limited for heavy use.

You won't accidentally run up a large bill doing this guide. The API has spend limits you can set in your Anthropic dashboard.

🤖Getting started with Claude Code

Practical prompt

I just installed Claude Code. What are the most important things I should know in the first week? What are the best prompts to start with? How do I give it context about my project? What are common mistakes new users make? Give me a "first week with Claude Code" guide.

👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.

Set Up GitHub

GitHub is where your code lives in the cloud. It's also how Vercel deploys your site: push to GitHub, Vercel automatically rebuilds and deploys.

First, create a free account at github.com.

bash

brew install gh
gh auth login    # follow prompts to authenticate via browser

Set up SSH keys (recommended over HTTPS):

bash

ssh-keygen -t ed25519 -C "you@example.com"
cat ~/.ssh/id_ed25519.pub   # copy this output
# Then go to github.com → Settings → SSH Keys → New SSH Key → paste

💡

Use SSH keys rather than passwords. Once set up, you'll never need to type credentials again.

Set Up Vercel

Vercel is a hosting platform built for the modern web. It connects to your GitHub repo and automatically deploys every time you push code.

Create a free account at vercel.com, then install the CLI:

bash

npm install -g vercel
vercel login    # opens browser to authenticate

bash

cd my-project
vercel          # first time: follow prompts to link project
vercel --prod   # deploy to production

💡

Vercel's free tier (Hobby) is generous enough for personal projects and learning. You don't need a credit card.

🪟

Windows Bonus: Set Up WSL2

WSL2 (Windows Subsystem for Linux) lets you run a real Linux environment inside Windows. Many dev tools work better on Linux, and WSL2 gives you that without leaving Windows.

powershell

# Run in PowerShell as Administrator
wsl --install
# Restart your computer, then set up your Linux username/password

# After restart, open "Ubuntu" from Start menu
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install --lts

🤖The whole stack together

Integration prompt

Explain how VSCode, Git, GitHub, and Vercel all work together in a modern web development workflow. What happens step by step when I write code, save it, push it to GitHub, and it deploys on Vercel? What is CI/CD and how does Vercel's automatic deployment relate to that concept?

👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.

Verify Everything Works

verify.sh

node --version      # ✅ v20.x or higher
npm --version       # ✅ 10.x or higher
git --version       # ✅ 2.40+
code --version      # ✅ any version
claude --version    # ✅ latest
gh --version        # ✅ 2.x
vercel --version    # ✅ latest

Common Problems & Fixes

Hit a wall? One of these probably covers it.

⚠️npm ERR! EACCES: permission denied▶

Why it happens

Node was installed system-wide (not via nvm), so npm can't write to protected folders.

How to fix it

Uninstall Node, install nvm, then reinstall Node via nvm. nvm installs everything to your home directory, so no sudo needed.

⚠️command not found: claude▶

Why it happens

npm installed claude-code but the PATH doesn't include npm's global bin directory.

How to fix it

Make sure you're using nvm's node (run nvm use --lts). Then re-run npm install -g @anthropic-ai/claude-code. If it still fails, open a new terminal window. PATH changes don't apply to existing sessions.

⚠️Claude Code authentication error / login loop▶

Why it happens

The login flow expects a claude.ai account (not just an API key), or the token has expired.

How to fix it

Go to claude.ai and make sure you have an active account. Run claude auth logout then claude auth login to get a fresh token.

⚠️Vercel build failing: 'command not found' or missing module▶

Why it happens

A dependency is missing from package.json, or an import path is wrong.

How to fix it

Check the Vercel build log (Dashboard → Deployments → click the failed deploy → Build Logs). The error is almost always on the last few lines. Common fix: make sure all imports use the correct path casing. Linux (Vercel's server) is case-sensitive, Mac is not.

⚠️git push rejected: Updates were rejected▶

Why it happens

Someone (or a previous push) updated the remote branch and your local copy is behind.

How to fix it

Run git pull --rebase origin main to pull the latest changes and replay your commits on top. Then push again.

⚠️npm run dev works but localhost:3000 is blank or shows an error▶

Why it happens

A syntax error or import error crashed the Next.js dev server during hot reload.

How to fix it

Look at the terminal where npm run dev is running. The error message will point to the exact file and line. Fix it and the page will auto-refresh.

🤖Debug my setup issue

Troubleshooting prompt

I'm having a problem setting up my development environment. Here's the exact error message I'm seeing: [paste your error here]. I'm on [Mac/Windows/Linux] and I was trying to [what you were doing]. What's causing this and how do I fix it step by step?

👆 Copy this prompt and paste it into Claude, ChatGPT, or Gemini — it will explain everything in as much detail as you want.

← Context Engineering Build Hello World →