Full-Stack Development Fundamentals

Chapter 5: Development Environment Setup

5.1 Code Editor

A good code editor is essential for productive development. Visual Studio Code (VS Code) is one of the most popular free editors for web development.

VS Code Setup:

1. Download and install VS Code from code.visualstudio.com
2. Install essential extensions for web development
3. Configure settings for your workflow
4. Set up keyboard shortcuts

Essential VS Code Extensions:

• ESLint: JavaScript linting and code quality
• Prettier: Code formatter for consistent styling
• GitLens: Enhanced Git capabilities
• Live Server: Local development server with auto-reload
• Auto Rename Tag: Automatically rename paired HTML/XML tags
• Bracket Pair Colorizer: Color matching brackets
• Path Intellisense: Autocomplete for file paths
• Thunder Client: API testing within VS Code

Editor Configuration:

• Set tab size and convert tabs to spaces
• Enable word wrap for long lines
• Configure file associations
• Set up snippets for common code patterns
• Customize theme and color scheme

5.2 Local Development Server

Local development servers allow you to test your applications on your computer before deploying to production.

Development Server Options:

1. XAMPP (Windows/Mac/Linux):

• Includes Apache web server, MySQL database, PHP, and phpMyAdmin
• Easy installation and setup
• Good for PHP development
• Download from apachefriends.org

2. MAMP (Mac/Windows):

• Similar to XAMPP but Mac-optimized
• Includes Apache, MySQL, and PHP
• User-friendly interface

3. Node.js Development Server:

• Use Node.js with frameworks like Express
• Run: npm install -g http-server
• Start server: http-server
• Or use npx serve for simple static sites

4. Python Development Server:

• For Python web applications
• Run: python -m http.server 8000
• Access at http://localhost:8000

Setting Up Local Environment:

1. Install your chosen development server
2. Configure document root (htdocs, www, or public folder)
3. Set up database if needed
4. Configure PHP/Node.js/Python settings
5. Test with a simple "Hello World" page

5.3 Package Managers

Package managers help install and manage dependencies for your projects.

npm (Node Package Manager):

• Comes with Node.js installation
• Manages JavaScript packages
• Commands: npm install, npm install package-name
• Creates package.json file

Composer (PHP):

• Dependency manager for PHP
• Manages PHP libraries and packages
• Commands: composer install, composer require package-name
• Creates composer.json file

pip (Python):

• Package installer for Python
• Manages Python packages
• Commands: pip install package-name
• Use requirements.txt for project dependencies

5.4 Environment Configuration

Proper environment configuration ensures your development setup matches production.

Environment Variables:

• Store sensitive data (API keys, database credentials)
• Use .env files (never commit to version control)
• Different values for development, staging, and production

Configuration Files:

• .env: Environment variables
• .gitignore: Files to exclude from version control
• package.json: Node.js project configuration
• composer.json: PHP project configuration