Dev Environment Setup

What this lesson covers

By the end, your Claude Code environment will be configured for production use — not just installed and running. There's a difference between "Claude Code works" and "Claude Code works correctly for your codebase."

Prerequisites check

Step 1 — Install Claude Code

Claude Code is a CLI tool. Install it globally:

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

If you see command not found after installation, your npm global bin isn't in PATH:

npm config get prefix
# Add the output + /bin to PATH in ~/.bashrc or ~/.zshrc
# Example: export PATH="$PATH:/Users/you/.npm-global/bin"

Step 2 — Authentication

Navigate to your project directory and launch Claude Code:

cd /path/to/your/project
claude

On first launch, a browser tab opens for OAuth authentication against your Claude account. After completing it, credentials are stored in ~/.config/anthropic — you won't re-authenticate per project.

You'll land in the Claude Code REPL. Run /status to confirm:

> /status
API Status: Connected
Model: claude-opus-4-5 (or your account default)
Context: 200k tokens

Step 3 — Understand the tool-use loop

Claude Code operates in a loop: prompt → plan → use tools → respond → repeat. The key tools it uses on your filesystem:

Step 4 — Configure your project settings

Claude Code reads a .claude/ directory at your project root for configuration. Create it:

mkdir -p .claude

Create a minimal settings.json to control permissions:

{
"permissions": {
  "allow": [
    "Bash(git *)",
    "Bash(npm run *)",
    "Bash(node *)"
  ],
  "deny": [
    "Bash(rm -rf *)",
    "Bash(sudo *)"
  ]
}
}

This allowlist approach is the right pattern for production codebases. Be explicit about what Claude can run rather than relying on its judgment alone.

Step 5 — Write your CLAUDE.md

CLAUDE.md is the most important file in your Claude Code setup. It's injected into context at the start of every session. Think of it as a briefing document for an expert contractor who just walked in.

# Project: [Your Project Name]

## What this is
[2-3 sentences on what the project does and who uses it]

## Tech stack
- Runtime: Node.js 20 / TypeScript 5
- Framework: Next.js 15 App Router
- Styling: Tailwind CSS
- Database: [your db]
- Deploy: Vercel

## Critical rules
- Never run `npm install` — use `node node_modules/.bin/...` directly
- Always run TypeScript check before committing: `tsc --noEmit`
- Never modify files in `/generated/` — they are auto-generated

## Common commands
```bash
# Dev server
node node_modules/next/dist/bin/next dev

# Build
node node_modules/next/dist/bin/next build

# Type check
node node_modules/typescript/bin/tsc --noEmit
```

## Directory structure
```
app/           Next.js App Router pages and API routes
components/    React components
lib/           Utility functions and data access
content/       MDX content files
```

Step 6 — Verify your first agentic task

Test the complete environment with a real task. In the Claude Code REPL:

> List all TypeScript files in this project and show me which ones are client components

Claude should use Glob to find .tsx files, then Grep to find 'use client' directives, and return a structured list. If this works correctly, your environment is ready.

What you built

Resources