Beginner20 min

Set up your complete development environment with all the tools you need for AI development.

Development Environment Setup

Before you can start building with AI tools, you need a properly configured development environment. This lesson walks you through setting up everything from scratch.

Required Software

1. Node.js (v20+)

Node.js is the runtime that powers modern JavaScript and TypeScript development.

macOS (using Homebrew):

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

# Install Node.js
brew install node@20

# Verify installation
node --version  # Should show v20.x.x
npm --version   # Should show 10.x.x

Windows:

  1. Download the installer from nodejs.org
  2. Run the installer with default settings
  3. Open Command Prompt or PowerShell to verify:
Terminal
node --version
npm --version

Using nvm (Recommended for Multiple Versions):

Terminal
# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Restart terminal, then:
nvm install 20
nvm use 20
nvm alias default 20

2. Package Manager (pnpm)

pnpm is faster and more disk-efficient than npm:

Terminal
# Install pnpm globally
npm install -g pnpm

# Verify installation
pnpm --version

Why pnpm?

  • 2-3x faster than npm
  • Uses hard links to save disk space
  • Strict dependency resolution
  • Better monorepo support

3. Git

Git is essential for version control and required by most AI tools.

macOS:

Terminal
# Usually pre-installed, but update with:
brew install git

Windows: Download from git-scm.com

Configuration:

Terminal
# Set your identity
git config --global user.name "Your Name"
git config --global user.email "your@email.com"

# Set default branch name
git config --global init.defaultBranch main

# Verify configuration
git config --list

4. Code Editor

Choose one of these AI-enhanced editors:

Cursor (Recommended)

  1. Download from cursor.com
  2. Run installer
  3. Import VS Code settings if prompted
  4. Sign up for account

VS Code + GitHub Copilot

  1. Download from code.visualstudio.com
  2. Install GitHub Copilot extension
  3. Sign in with GitHub

Windsurf

  1. Download from windsurf.com
  2. Run installer
  3. Import VS Code settings

VS Code Extensions

If using VS Code (or Cursor, which supports VS Code extensions):

Essential:

  • ESLint - Code quality
  • Prettier - Code formatting
  • Tailwind CSS IntelliSense - Tailwind autocomplete
  • TypeScript Vue Plugin (if using Vue)

Recommended:

  • Error Lens - Inline error display
  • GitLens - Git history and blame
  • Auto Rename Tag - HTML/JSX tag renaming
  • Path Intellisense - Filename autocomplete

Install via Command Palette:

Terminal
Cmd/Ctrl + Shift + P → "Extensions: Install Extension"

Cursor-Specific Setup

If using Cursor, configure these settings:

1. Privacy Mode (for sensitive projects):

  • Settings → Features → Privacy Mode
  • Prevents your code from being sent to AI training

2. Model Preferences:

  • Settings → Models
  • Select default model (Claude Sonnet 4 recommended)

3. Rules File: Create .cursor/rules/project.md in your project:

Terminal
---
description: "Project conventions"
globs: ["**/*.tsx", "**/*.ts"]
alwaysApply: true
---

# Project Rules

- Use functional components with hooks
- Prefer named exports
- Use TypeScript strict mode
- Use Tailwind for styling
- Prefer shadcn/ui components

Terminal Setup

macOS Terminal

The default Terminal.app works, but consider upgrading:

iTerm2 (Recommended):

  1. Download from iterm2.com
  2. Install Oh My Zsh for better experience:
Terminal
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Windows Terminal

  1. Install from Microsoft Store
  2. Or use Git Bash (included with Git)

Essential Terminal Commands

Terminal
# Navigation
cd folder-name     # Change directory
cd ..              # Go up one level
cd ~               # Go to home directory
pwd                # Print current directory

# File Operations
ls                 # List files
ls -la             # List all files with details
mkdir folder-name  # Create directory
rm filename        # Delete file
rm -rf folder      # Delete folder and contents

# Search
find . -name "*.tsx"           # Find files by name
grep -r "searchterm" .         # Search file contents

Creating Your First Project

With everything installed, create a new Next.js project:

Terminal
# Create project with all recommended options
pnpm create next-app@latest my-first-app

# When prompted, choose:
# ✔ Would you like to use TypeScript? Yes
# ✔ Would you like to use ESLint? Yes
# ✔ Would you like to use Tailwind CSS? Yes
# ✔ Would you like to use `src/` directory? No
# ✔ Would you like to use App Router? Yes
# ✔ Would you like to customize the default import alias? No

# Navigate to project
cd my-first-app

# Initialize shadcn/ui
pnpm dlx shadcn@latest init

# When prompted:
# ✔ Which style would you like to use? Default
# ✔ Which color would you like to use as base color? Slate
# ✔ Would you like to use CSS variables? Yes

# Add common components
pnpm dlx shadcn@latest add button card input

# Start development server
pnpm dev

Open http://localhost:3000 to see your app.

Project Structure Overview

Terminal
my-first-app/
├── app/                    # Routes and pages
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Home page
│   └── globals.css         # Global styles
├── components/             # React components
│   └── ui/                 # shadcn/ui components
├── lib/                    # Utility functions
│   └── utils.ts            # shadcn utils
├── public/                 # Static files
├── .gitignore              # Git ignore rules
├── next.config.ts          # Next.js config
├── package.json            # Dependencies
├── tailwind.config.ts      # Tailwind config
├── tsconfig.json           # TypeScript config
└── components.json         # shadcn/ui config

Environment Variables

Create .env.local for sensitive values:

Terminal
# .env.local (never commit this file!)
DATABASE_URL="your-database-url"
NEXT_PUBLIC_API_URL="https://api.example.com"

Important:

  • Prefix with NEXT_PUBLIC_ to expose to browser
  • Without prefix, variables are server-only
  • Never commit .env.local (it's in .gitignore)

Verification Checklist

Run these commands to verify your setup:

Terminal
# Check versions
node --version      # Should be 20.x.x
pnpm --version      # Should be 8.x.x or 9.x.x
git --version       # Should be 2.x.x

# Check project runs
cd my-first-app
pnpm dev            # Should start at localhost:3000

# Check TypeScript
pnpm tsc --noEmit   # Should show no errors

# Check linting
pnpm lint           # Should pass

Troubleshooting

"command not found: node"

  • Restart your terminal
  • Check if Node is in your PATH
  • Try reinstalling Node.js

"EACCES permission error"

Terminal
# Fix npm permissions on macOS/Linux
sudo chown -R $(whoami) ~/.npm

"Port 3000 already in use"

Terminal
# Find and kill process on port 3000
lsof -i :3000
kill -9 <PID>

# Or use a different port
pnpm dev -p 3001

"Cannot find module" errors

Terminal
# Clear node_modules and reinstall
rm -rf node_modules pnpm-lock.yaml
pnpm install

Summary

  • Node.js 20+: JavaScript runtime
  • pnpm: Fast package manager
  • Git: Version control
  • Cursor/VS Code: AI-enhanced editor
  • Terminal: Command-line interface

With your environment set up, you're ready to start building with AI assistance.

Next Steps

Your development environment is ready. Next, let's explore how to choose the right AI tools for your specific needs.

Mark this lesson as complete to track your progress