Start Building

Lesson 2: Development Environment Setup

Now that you've planned your technical architecture, it's time to set up your development environment. A well-configured development environment is the foundation of efficient web game development. In this lesson, you'll learn how to set up modern web development tools, configure build systems, and create a workflow that makes development smooth and enjoyable.

What You'll Learn

By the end of this lesson, you'll be able to:

  • Set up a modern web development environment with all necessary tools
  • Configure build systems for efficient development and production
  • Set up version control for collaborative development
  • Create deployment pipelines for automated releases
  • Establish development workflows that boost productivity

Why This Matters

A properly configured development environment saves hours of frustration and enables you to focus on building your game. Modern web development tools automate repetitive tasks, catch errors early, and make deployment seamless. Investing time in setup now pays dividends throughout your project.

Essential Development Tools

Code Editor

Choose a code editor that supports modern web development features.

Recommended Options:

Visual Studio Code (VS Code)

  • Pros: Free, extensive extensions, excellent JavaScript support, integrated terminal, Git integration
  • Cons: Can be resource-intensive with many extensions
  • Best for: Most developers, especially beginners

WebStorm

  • Pros: Powerful IDE features, excellent debugging, refactoring tools
  • Cons: Paid license, heavier than VS Code
  • Best for: Professional developers, complex projects

Sublime Text

  • Pros: Fast, lightweight, customizable
  • Cons: Paid license, fewer built-in features
  • Best for: Developers who prefer minimal editors

Recommendation: Start with VS Code. It's free, has excellent support for web development, and has a huge community.

Essential VS Code Extensions

Install these extensions for web game development:

JavaScript/TypeScript:

  • ESLint: Code linting and quality
  • Prettier: Code formatting
  • JavaScript (ES6) code snippets: Quick code templates
  • TypeScript: TypeScript support (if using TypeScript)

Web Development:

  • Live Server: Local development server
  • HTML CSS Support: CSS IntelliSense
  • Auto Rename Tag: Automatically rename paired HTML tags
  • Color Highlight: Highlight color codes

Git:

  • GitLens: Enhanced Git capabilities
  • Git History: View file history

Game Development:

  • Phaser Snippets: Phaser.js code snippets (if using Phaser)
  • Canvas Snippets: HTML5 Canvas snippets

Installation: Open VS Code, go to Extensions (Ctrl+Shift+X), search for each extension, and click Install.

Node.js and Package Management

Installing Node.js

Node.js is essential for modern web development, even if you're not building a Node.js backend.

Why You Need Node.js:

  • Package management (npm)
  • Build tools and bundlers
  • Development servers
  • Testing frameworks
  • Code quality tools

Installation Steps:

  1. Download Node.js

    • Visit nodejs.org
    • Download the LTS (Long Term Support) version
    • Run the installer
    • Verify installation: node --version and npm --version

  2. Verify Installation

    node --version
npm --version

Pro Tip: Use a Node version manager like nvm (Node Version Manager) if you work on multiple projects with different Node versions.

Package Management

npm (Node Package Manager)

  • Comes with Node.js
  • Most popular package manager
  • Large ecosystem of packages

yarn

  • Faster than npm
  • Better dependency resolution
  • Lock file for consistent installs

pnpm

  • Most efficient disk usage
  • Faster installs
  • Strict dependency management

Recommendation: Start with npm (comes with Node.js). Consider yarn or pnpm if you need better performance.

Project Structure Setup

Creating Your Project Directory

Organize your project with a clear structure from the start.

Recommended Structure:

web-game-with-ai/
├── src/
│   ├── js/
│   │   ├── game/
│   │   ├── ai/
│   │   └── utils/
│   ├── css/
│   ├── assets/
│   │   ├── images/
│   │   ├── audio/
│   │   └── fonts/
│   └── index.html
├── dist/
│   └── (built files)
├── node_modules/
├── .gitignore
├── package.json
├── vite.config.js (or webpack.config.js)
└── README.md

Create Project Structure:

# Create project directory
mkdir web-game-with-ai
cd web-game-with-ai

# Create directory structure
mkdir -p src/js/game src/js/ai src/js/utils src/css src/assets/images src/assets/audio src/assets/fonts dist

# Create initial files
touch src/index.html src/css/style.css src/js/main.js README.md .gitignore

Initialize npm Project

Create a package.json file for your project:

npm init -y

This creates a package.json file with default values. Edit it to include your project information:

{
  "name": "web-game-with-ai",
  "version": "1.0.0",
  "description": "AI-powered web game",
  "main": "src/js/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": ["game", "web", "ai"],
  "author": "Your Name",
  "license": "MIT"
}

Build Tools and Bundlers

Why You Need Build Tools

Build tools automate tasks like:

  • Bundling JavaScript files
  • Minifying code
  • Optimizing assets
  • Transpiling modern JavaScript
  • Hot module replacement (HMR)

Vite (Recommended)

Vite is a modern, fast build tool perfect for web games.

Why Vite:

  • Lightning Fast: Instant server start
  • Hot Module Replacement: See changes instantly
  • Optimized Builds: Production-ready builds
  • Simple Configuration: Easy to set up
  • Great for Games: Excellent for HTML5 games

Installation:

npm install --save-dev vite

Basic Vite Configuration (vite.config.js):

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true
  }
});

Add Scripts to package.json:

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

Usage:

npm run dev      # Start development server
npm run build    # Build for production
npm run preview  # Preview production build

Alternative: Webpack

Webpack is more powerful but more complex than Vite.

When to Use Webpack:

  • Complex build requirements
  • Need advanced code splitting
  • Legacy project migration
  • Team already familiar with Webpack

Basic Webpack Setup:

npm install --save-dev webpack webpack-cli webpack-dev-server

Version Control Setup

Git Configuration

Version control is essential for tracking changes and collaborating.

Initial Git Setup:

# Initialize Git repository
git init

# Create .gitignore file
cat > .gitignore << EOF
node_modules/
dist/
.env
.DS_Store
*.log
EOF

# Make initial commit
git add .
git commit -m "Initial project setup"

.gitignore Best Practices

Create a comprehensive .gitignore file:

# Dependencies
node_modules/
package-lock.json
yarn.lock

# Build outputs
dist/
build/
*.map

# Environment variables
.env
.env.local

# IDE files
.vscode/
.idea/
*.swp
*.swo

# OS files
.DS_Store
Thumbs.db

# Logs
*.log
npm-debug.log*

# Temporary files
*.tmp
.cache/

GitHub Repository Setup

Create GitHub Repository:

  1. Go to GitHub and create a new repository
  2. Don't initialize with README (you already have files)
  3. Copy the repository URL

Connect Local Repository:

git remote add origin https://github.com/yourusername/web-game-with-ai.git
git branch -M main
git push -u origin main

Pro Tip: Use GitHub Actions for automated deployment (we'll cover this in a later lesson).

Development Server Setup

Local Development Server

A development server enables:

  • Hot reloading (automatic refresh)
  • Local testing
  • Debugging
  • CORS handling

Vite Development Server: Vite includes a built-in development server:

npm run dev

This starts a server (usually at http://localhost:3000) with hot module replacement.

Alternative: Live Server Extension If not using Vite, use VS Code's Live Server extension:

  1. Install Live Server extension
  2. Right-click index.html
  3. Select "Open with Live Server"

Deployment Pipeline Setup

Pre-Deployment Checklist

Before deploying, ensure:

  • Build process works (npm run build)
  • All assets are included
  • Environment variables are configured
  • Error handling is in place
  • Performance is optimized

Vercel Deployment (Recommended)

Vercel makes deployment simple and free for small projects.

Setup Steps:

  1. Install Vercel CLI:

    npm install -g vercel

  2. Login to Vercel:

    vercel login

  3. Deploy:

    vercel

  4. Configure Project:

    • Follow prompts
    • Set build command: npm run build
    • Set output directory: dist

Automatic Deployments:

  • Connect GitHub repository
  • Vercel deploys on every push
  • Preview deployments for pull requests

Alternative: Netlify

Netlify is another excellent option:

  1. Install Netlify CLI:

    npm install -g netlify-cli

  2. Deploy:

    netlify deploy

  3. Configure:

    • Build command: npm run build
    • Publish directory: dist

Development Workflow

Daily Development Workflow

Starting Work:

  1. Pull latest changes: git pull
  2. Install dependencies: npm install (if needed)
  3. Start dev server: npm run dev
  4. Open browser to localhost

During Development:

  1. Make changes to code
  2. See changes instantly (hot reload)
  3. Test in browser
  4. Commit frequently: git commit -m "Description"

Ending Work:

  1. Commit all changes: git add . then git commit
  2. Push to repository: git push
  3. Stop dev server (Ctrl+C)

Code Quality Tools

ESLint Setup:

npm install --save-dev eslint
npx eslint --init

Prettier Setup:

npm install --save-dev prettier

Create .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Format on Save: Add to VS Code settings (.vscode/settings.json):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Mini-Task: Create Your Development Workflow

Objective: Set up your complete development environment and create a development workflow document.

Steps:

  1. Install Required Tools

    • Install VS Code (or your preferred editor)
    • Install Node.js (LTS version)
    • Verify installations

  2. Create Project Structure

    • Create project directory
    • Set up folder structure
    • Initialize npm project
    • Create initial files

  3. Configure Build Tools

    • Install Vite (or Webpack)
    • Create configuration file
    • Test build process
    • Verify dev server works

  4. Set Up Version Control

    • Initialize Git repository
    • Create .gitignore file
    • Make initial commit
    • Create GitHub repository (optional)

  5. Create Development Workflow Document

    • Document your setup process
    • List daily workflow steps
    • Note any custom configurations
    • Include troubleshooting tips

Deliverable:

  • Working development environment
  • Development workflow document
  • Git repository with initial commit
  • Build system that works

Time Estimate: 30-45 minutes

Pro Tip: Take screenshots of your setup process. They'll be helpful if you need to set up the environment again or help teammates.

Troubleshooting

Common Issues

Issue: Node.js not found

  • Solution: Ensure Node.js is installed and added to PATH
  • Verify: Run node --version in terminal

Issue: npm commands not working

  • Solution: Reinstall Node.js or use Node version manager
  • Check: Verify npm is installed with npm --version

Issue: Port already in use

  • Solution: Change port in Vite config or kill process using port
  • Command: lsof -ti:3000 | xargs kill (Mac/Linux)

Issue: Build fails

  • Solution: Check for syntax errors, missing dependencies
  • Debug: Run build with verbose output: npm run build -- --debug

Issue: Hot reload not working

  • Solution: Check file watchers, restart dev server
  • Verify: Ensure files are saved before checking browser

Best Practices

Development Environment Best Practices

Organization:

  • Keep project structure consistent
  • Use meaningful file and folder names
  • Document your setup
  • Keep dependencies updated

Version Control:

  • Commit frequently with clear messages
  • Use branches for features
  • Don't commit node_modules or build files
  • Keep .gitignore updated

Build Tools:

  • Use development mode for development
  • Test production builds regularly
  • Optimize build configuration
  • Monitor build times

Workflow:

  • Establish consistent workflow
  • Automate repetitive tasks
  • Use code quality tools
  • Test before committing

Next Steps

Now that your development environment is set up, you're ready to plan your AI integration. In the next lesson, you'll:

  • Plan AI features and API integration
  • Design AI-powered gameplay mechanics
  • Set up AI service accounts
  • Prototype AI integration

What's Coming Next:

  • AI integration planning
  • API setup and configuration
  • Prototyping AI features
  • Testing AI capabilities

Ready to integrate AI into your game? Let's plan your AI features!

Summary

In this lesson, you've learned:

  • Essential tools - Code editors, Node.js, package managers
  • Project structure - How to organize your project
  • Build tools - Vite and Webpack setup
  • Version control - Git and GitHub configuration
  • Development servers - Local development setup
  • Deployment - Vercel and Netlify setup
  • Workflow - Daily development practices

Key Takeaways:

  • A well-configured environment saves time and frustration
  • Modern build tools automate repetitive tasks
  • Version control is essential for collaboration
  • Consistent workflow improves productivity
  • Good setup enables faster development

Remember: Your development environment is a tool that should work for you. Customize it to fit your workflow and preferences. The goal is to make development smooth and enjoyable.

Additional Resources

Community & Support:

  • Share your development setup in our Discord community
  • Get help with configuration issues
  • Connect with other web game developers
  • Ask questions and get feedback

Ready to start building? Your environment is set up and ready to go!