Essential Development Tools Installation

Setting up your core development toolkit for full stack web development

The Developer's Essential Toolkit

A full stack developer needs a carefully curated set of tools to work efficiently. Think of these tools as a craftsperson's workshop – each serves a specific purpose, and together they enable you to build complex applications.

graph TD A[Essential Dev Tools] --> B[Version Control - Git] A --> C[Code Editor - VS Code] A --> D[Runtimes & Languages] A --> E[Containerization - Docker] A --> F[Database Systems] A --> G[API Testing Tools] D --> H[Node.js] D --> I[Python] D --> J[PHP] F --> K[MongoDB] F --> L[PostgreSQL] F --> M[MySQL] G --> N[Postman/Insomnia]

Today, we'll focus on installing and configuring the core components that every full stack developer needs, regardless of which specific stack they're working with.

Version Control with Git

Git is the industry standard for version control. It's like a time machine for your code, allowing you to track changes, collaborate with others, and maintain different versions of your project.

Why Git is Essential

Installing Git

Let's install Git on different operating systems:

Windows


# Using Chocolatey
choco install git -y

# Alternatively, download the installer
# from https://git-scm.com/download/win

macOS


# Using Homebrew
brew install git

# Alternatively, it may be pre-installed or
# install via XCode Command Line Tools:
xcode-select --install

Linux


# Ubuntu/Debian
sudo apt update
sudo apt install git -y

# Fedora
sudo dnf install git -y

# Arch Linux
sudo pacman -S git

Configuring Git

After installation, configure Git with your identity:


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

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

# Configure line ending behavior
# For Windows:
git config --global core.autocrlf true
# For macOS/Linux:
git config --global core.autocrlf input

This configuration is like setting up your identity and preferences in a new workplace—it ensures that your contributions are properly attributed and that you have a consistent experience.

Code Editor - Visual Studio Code

A powerful code editor is to a developer what a high-quality knife is to a chef. Visual Studio Code (VS Code) has become the preferred choice for many developers due to its balance of features, performance, and extensibility.

Why VS Code?

Installing VS Code

Let's install VS Code on different platforms:

Windows


# Using Chocolatey
choco install vscode -y

# Alternatively, download from
# https://code.visualstudio.com/

macOS


# Using Homebrew
brew install --cask visual-studio-code

# Alternatively, download from
# https://code.visualstudio.com/

Linux


# Ubuntu/Debian (via official repository)
sudo apt update
sudo apt install software-properties-common apt-transport-https wget -y
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
sudo apt update
sudo apt install code -y

# Snap (all Linux distros with snap)
sudo snap install --classic code

Essential VS Code Extensions

Extend VS Code's functionality with these must-have extensions:

General Development

JavaScript/TypeScript Development

Python Development

PHP Development

You can install extensions directly from VS Code's Extensions view (Ctrl+Shift+X or Cmd+Shift+X) or via the command line:


# Example: Installing ESLint extension
code --install-extension dbaeumer.vscode-eslint

VS Code's extensibility is like having a modular toolbox where you can add exactly the specialized tools you need for each project or language.

Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript outside the browser. npm (Node Package Manager) is the world's largest software registry, enabling you to use and share code packages.

Why Node.js and npm?

Installing Node.js and npm

Let's install Node.js (which includes npm) on different platforms:

Using NVM (Node Version Manager) - Recommended

NVM allows you to install and switch between multiple versions of Node.js, which is valuable for testing and working with different projects.

macOS and Linux

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

# Reload shell configuration
source ~/.bashrc  # or source ~/.zshrc if using zsh

# Install the latest LTS version of Node.js
nvm install --lts

# Set it as the default
nvm alias default 'lts/*'
Windows

# Install NVM for Windows (using Chocolatey)
choco install nvm -y

# Install the latest LTS version of Node.js
nvm install lts
nvm use lts

Direct Installation

If you prefer not to use NVM, you can install Node.js directly:

Windows

# Using Chocolatey
choco install nodejs-lts -y

# Alternatively, download from
# https://nodejs.org/
macOS

# Using Homebrew
brew install node@18  # Or whatever version you want

# Alternatively, download from
# https://nodejs.org/
Linux

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

# Fedora
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo dnf install -y nodejs

Verify Installation


# Check Node.js version
node -v

# Check npm version
npm -v

Configuring npm

Some helpful npm configurations:


# Set default init values
npm config set init-author-name "Your Name"
npm config set init-author-email "your.email@example.com"
npm config set init-license "MIT"

# Install packages without saving to dependencies
npm config set save false

Node.js and npm are like having both a powerful engine and a massive parts warehouse for your JavaScript projects, enabling you to leverage the work of thousands of developers worldwide.

Python Setup

Python is a versatile language used for web development, data science, automation, and more. Setting up Python properly is essential for a smooth development experience.

Why Python?

Installing Python

Let's install Python on different platforms:

Windows


# Using Chocolatey
choco install python -y

# Alternatively, download from
# https://www.python.org/downloads/

macOS


# Using Homebrew
brew install python

# Alternatively, download from
# https://www.python.org/downloads/

Linux


# Ubuntu/Debian
sudo apt update
sudo apt install python3 python3-pip python3-venv -y

# Fedora
sudo dnf install python3 python3-pip -y

# Arch Linux
sudo pacman -S python python-pip

Setting Up Virtual Environments

Virtual environments isolate dependencies for different projects, preventing conflicts. They're like separate workbenches for different projects, each with its own set of tools.


# Create a virtual environment
python -m venv myproject_env

# Activate the virtual environment
# On Windows:
myproject_env\Scripts\activate

# On macOS/Linux:
source myproject_env/bin/activate

# Install packages within the environment
pip install django requests pytest

# Deactivate when done
deactivate

PyPI and pip

The Python Package Index (PyPI) is a repository of software packages, and pip is the package installer for Python.


# Upgrade pip
python -m pip install --upgrade pip

# Install a package
pip install numpy

# Install specific version
pip install django==4.2

# Install from requirements file
pip install -r requirements.txt

# Create a requirements file
pip freeze > requirements.txt

Python's package ecosystem is like a vast library of pre-built components that you can integrate into your projects to save time and effort.

PHP Setup

PHP powers a significant portion of the web, including WordPress, which runs over 40% of all websites. Setting up PHP properly is essential for WordPress development and other PHP-based projects.

Why PHP?

Installing PHP

Let's install PHP on different platforms:

Windows


# Using Chocolatey
choco install php -y

# Alternatively, install XAMPP for a complete
# PHP development environment:
choco install xampp -y

macOS


# Using Homebrew
brew install php

# Alternatively, install MAMP for a complete
# PHP development environment:
brew install --cask mamp

Linux


# Ubuntu/Debian
sudo apt update
sudo apt install php php-cli php-fpm php-json php-common php-mysql php-zip php-gd php-mbstring php-curl php-xml -y

# Fedora
sudo dnf install php php-cli php-fpm php-json php-mysqlnd php-zip php-gd php-mbstring php-curl php-xml -y

# Arch Linux
sudo pacman -S php php-fpm

Composer - PHP Package Manager

Composer is the dependency manager for PHP, equivalent to npm for JavaScript or pip for Python:

Windows


# Using Chocolatey
choco install composer -y

macOS


# Using Homebrew
brew install composer

Linux


# Install Composer globally
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php composer-setup.php --install-dir=/usr/local/bin --filename=composer
php -r "unlink('composer-setup.php');"

Using Composer


# Create a new project
composer create-project laravel/laravel example-app

# Install a package
composer require guzzlehttp/guzzle

# Update dependencies
composer update

# Install dependencies from composer.json
composer install

PHP and Composer provide a robust ecosystem for web development, particularly for content management systems and web applications requiring quick development cycles.

Docker Installation

Docker enables you to run applications in isolated containers, ensuring consistency across development, testing, and production environments. It's like having portable, pre-configured mini-computers for each part of your application.

Why Docker?

Installing Docker

Let's install Docker on different platforms:

Windows


# Using Chocolatey
choco install docker-desktop -y

# Alternatively, download Docker Desktop from
# https://www.docker.com/products/docker-desktop

Note: Docker Desktop for Windows requires Windows 10 or newer, with Hyper-V enabled or WSL2 installed.

macOS


# Using Homebrew
brew install --cask docker

# Alternatively, download Docker Desktop from
# https://www.docker.com/products/docker-desktop

Linux


# Ubuntu/Debian
sudo apt update
sudo apt install apt-transport-https ca-certificates curl software-properties-common -y
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt update
sudo apt install docker-ce -y

# Add user to docker group to avoid using sudo
sudo usermod -aG docker ${USER}
# Log out and back in for this to take effect

Installing Docker Compose

Docker Compose allows you to define and run multi-container applications:

Windows & macOS

Docker Compose is included with Docker Desktop.

Linux


# Install Docker Compose
sudo curl -L "https://github.com/docker/compose/releases/download/v2.17.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

Verify Installation


# Check Docker version
docker --version

# Check Docker Compose version
docker-compose --version

# Run the hello-world container to verify installation
docker run hello-world
flowchart TD A[Docker] --> B[Docker Engine] A --> C[Docker CLI] A --> D[Docker Compose] B --> E[Containers] E --> F[App 1] E --> G[App 2] E --> H[Database]

Docker transforms the development workflow by making environment setup and sharing effortless, much like how shipping containers revolutionized global trade by standardizing transport.

Database Systems

Databases are essential for storing and managing application data. We'll set up both SQL and NoSQL databases to cover different use cases.

PostgreSQL Installation

PostgreSQL is a powerful, open-source relational database system:

Using Docker (Recommended)


# Pull PostgreSQL image
docker pull postgres:latest

# Run PostgreSQL container
docker run --name my-postgres -e POSTGRES_PASSWORD=mysecretpassword -p 5432:5432 -d postgres

Native Installation

Windows

# Using Chocolatey
choco install postgresql -y
macOS

# Using Homebrew
brew install postgresql
brew services start postgresql
Linux

# Ubuntu/Debian
sudo apt update
sudo apt install postgresql postgresql-contrib -y
sudo systemctl enable postgresql
sudo systemctl start postgresql

MongoDB Installation

MongoDB is a popular NoSQL database that stores data in flexible, JSON-like documents:

Using Docker (Recommended)


# Pull MongoDB image
docker pull mongo:latest

# Run MongoDB container
docker run --name my-mongo -p 27017:27017 -d mongo

Native Installation

Windows

# Using Chocolatey
choco install mongodb -y
macOS

# Using Homebrew
brew tap mongodb/brew
brew install mongodb-community
brew services start mongodb-community
Linux

# Ubuntu/Debian
wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add -
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu $(lsb_release -cs)/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list
sudo apt update
sudo apt install mongodb-org -y
sudo systemctl enable mongod
sudo systemctl start mongod

MySQL Installation

MySQL is a widely-used open-source relational database management system:

Using Docker (Recommended)


# Pull MySQL image
docker pull mysql:latest

# Run MySQL container
docker run --name my-mysql -e MYSQL_ROOT_PASSWORD=mysecretpassword -p 3306:3306 -d mysql

Native Installation

Windows

# Using Chocolatey
choco install mysql -y
macOS

# Using Homebrew
brew install mysql
brew services start mysql
Linux

# Ubuntu/Debian
sudo apt update
sudo apt install mysql-server -y
sudo systemctl enable mysql
sudo systemctl start mysql

Using Docker for databases during development offers several advantages: it doesn't pollute your system with installation files, provides the same database version across all environments, and makes it easy to reset to a clean state when needed.

API Testing Tools

API testing tools help you debug and interact with backend services. They're like microscopes that let you examine the communication between different parts of your application.

Postman Installation

Postman is a popular tool for testing APIs:

Windows


# Using Chocolatey
choco install postman -y

# Alternatively, download from
# https://www.postman.com/downloads/

macOS


# Using Homebrew
brew install --cask postman

# Alternatively, download from
# https://www.postman.com/downloads/

Linux


# Using Snap
sudo snap install postman

Insomnia Installation

Insomnia is a lightweight alternative to Postman:

Windows


# Using Chocolatey
choco install insomnia-rest-api-client -y

macOS


# Using Homebrew
brew install --cask insomnia

Linux


# Using Snap
sudo snap install insomnia

API testing tools are essential for developing and debugging backend services, allowing you to test endpoints, examine responses, and troubleshoot issues without writing custom code.

Integrating Tools with VS Code

Make your development experience seamless by integrating your tools with VS Code:

Terminal Integration

VS Code's integrated terminal provides access to your command-line tools:

Git Integration

Use VS Code's built-in Git features:

Docker Integration

Manage Docker containers from VS Code:

Database Integration

Connect to databases from VS Code:

This integration creates a seamless development environment where all your tools are accessible from a single interface, similar to how a modern car brings all controls to the driver's fingertips.

Verifying Your Development Environment

Let's ensure everything is installed correctly by creating a simple test project:

Full Stack Development Environment Test


# Create a project directory
mkdir dev-env-test
cd dev-env-test

# Initialize Git repository
git init

# Create a .gitignore file
echo "node_modules/" > .gitignore
echo "__pycache__/" >> .gitignore
echo "venv/" >> .gitignore

# Initialize a Node.js project
npm init -y

# Create a simple Express server
npm install express

Create a file named `server.js`:


// Simple Express server
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello from your development environment!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Create a simple Python script named `app.py`:


# Simple Python script
from datetime import datetime

print("Python environment is working!")
print(f"Current time: {datetime.now()}")

Create a simple PHP file named `index.php`:


<?php
// Simple PHP script
echo "PHP environment is working!\n";
echo "PHP version: " . phpversion() . "\n";
?>

Test each component:


# Test Git
git status

# Test Node.js/Express
node server.js
# Visit http://localhost:3000 in your browser

# Test Python
python app.py

# Test PHP
php index.php

If all these commands work without errors, your development environment is properly set up!

Practice Activities

Activity 1: Tool Exploration

For each of the major tools installed (VS Code, Git, Node.js, Python, PHP, Docker):

Activity 2: Environment Integration

Create a more complex test project that uses multiple tools together:

Activity 3: VS Code Customization

Customize VS Code for your development style:

Troubleshooting Common Issues

Here are solutions to common setup problems:

Node.js/npm Issues

Python Issues

Git Issues

Docker Issues

Remember, troubleshooting is an essential skill for developers. When you encounter an issue, approach it methodically:

  1. Read the error message carefully
  2. Check logs for more detailed information
  3. Search for the error message online
  4. Break the problem down into smaller parts
  5. Test each part individually

Further Resources

Conclusion

You've now set up a comprehensive development environment that will serve as the foundation for your full stack development journey. Having these tools properly installed and configured will save you countless hours and frustrations as you build increasingly complex applications.

Remember that your development environment will evolve as you grow as a developer. Don't hesitate to explore new tools, customize your setup, and optimize your workflow to match your specific needs and preferences.

In the next lecture, we'll focus on terminal/command line skills, which will allow you to leverage these tools more effectively and work with greater speed and precision.