Setting Up Your Development Environment

Week 1 - Monday Afternoon: Full Stack Web Development with Python

Introduction to Development Environments

A proper development environment is like a well-organized workshop. Everything has its place, your tools are at hand, and you can focus on creating rather than searching for the right screwdriver.

For web development, your environment consists of various tools, applications, and configurations that work together to help you write, test, and deploy code efficiently. A good environment should:

In this section, we'll set up the core tools for Python web development, starting with a code editor, version control system, Python installation, and Docker. Later in the course, we'll add more specialized tools for different aspects of web development.

Code Editor: Visual Studio Code

A code editor is your primary interface for writing code. Visual Studio Code (VS Code) has become the de facto standard for web development due to its balance of simplicity and power. Its extensions ecosystem makes it particularly well-suited for Python and web development.

Why VS Code?

VS Code offers several advantages for Python web development:

Installation

Download VS Code from https://code.visualstudio.com/ and follow the installation instructions for your operating system:

Windows

  1. Run the downloaded installer (.exe file)
  2. Follow the installation wizard
  3. Ensure "Add to PATH" is checked during installation

macOS

  1. Open the downloaded .dmg file
  2. Drag Visual Studio Code.app to the Applications folder
  3. Optionally, add VS Code to the Dock

Linux

  1. For Debian/Ubuntu: sudo apt install ./downloaded-file.deb
  2. For Red Hat/Fedora: sudo dnf install ./downloaded-file.rpm
  3. Alternatively, use your distribution's package manager

Essential Extensions for Python Web Development

After installing VS Code, add these extensions to enhance your Python web development experience:

Python Extensions

Web Development Extensions

Tool Integration Extensions

Configuring VS Code for Python

To optimize VS Code for Python web development, adjust these settings:

  1. Open Settings (File > Preferences > Settings or Ctrl+,)
  2. Search for and adjust these settings:
    • Python > Formatting Provider: "black" (after installing Black)
    • Editor: Format On Save: Check to enable
    • Python > Linting: Enabled: Check to enable
    • Python > Linting: Pylint Enabled: Check to enable
    • Files: Auto Save: "afterDelay" (saves files automatically)

You can also create a workspace configuration file (.vscode/settings.json) to share settings with team members or across multiple computers:

{
    "python.formatting.provider": "black",
    "python.linting.enabled": true,
    "python.linting.pylintEnabled": true,
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "python.pythonPath": "${workspaceFolder}/.venv/bin/python"
}

Version Control: Git

Git is like a time machine for your code. It allows you to track changes, experiment safely, and collaborate with others. We'll explore Git in depth tomorrow, but today we'll focus on installation and basic setup.

Installation

Install Git based on your operating system:

Windows

  1. Download the installer from https://git-scm.com/
  2. Run the installer and follow the wizard
  3. Use the default options, but consider these options:
    • When prompted about adjusting your PATH environment, select "Git from the command line and also from 3rd-party software"
    • For line ending conversions, select "Checkout Windows-style, commit Unix-style line endings"
    • For the terminal emulator, select "Use Windows' default console window"

macOS

  1. If you have Homebrew: brew install git
  2. Otherwise, install Xcode Command Line Tools: xcode-select --install
  3. Alternatively, download the installer from https://git-scm.com/

Linux

  1. For Debian/Ubuntu: sudo apt install git
  2. For Red Hat/Fedora: sudo dnf install git
  3. For other distributions, use your package manager

Basic Git Configuration

After installing Git, configure your identity (used in commit messages):

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

Set up some helpful configurations:

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

# Set up a better log format
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

# Set up VS Code as the default editor for Git
git config --global core.editor "code --wait"

Verifying Installation

Check that Git is installed correctly:

git --version

You should see output like git version 2.38.0 (the version number may differ).

Python Installation

We'll be using Python 3.10 or newer for this course. Python is the core language we'll use for backend development.

Installation Methods

Choose the installation method that works best for your system:

Windows

  1. Download the installer from python.org
  2. Run the installer and check "Add Python to PATH"
  3. Click "Install Now" for a standard installation
  4. Verify installation with python --version in Command Prompt or PowerShell

macOS

  1. Option 1: Homebrew (recommended) 
    # Install Homebrew if not already installed
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Python
brew install python
  2. Option 2: Download the installer from python.org
  3. Verify installation with python3 --version in Terminal

Linux

  1. Most distributions come with Python pre-installed
  2. To install or update:
    • Debian/Ubuntu: sudo apt update && sudo apt install python3 python3-pip python3-venv
    • Red Hat/Fedora: sudo dnf install python3 python3-pip
  3. Verify installation with python3 --version in Terminal

Virtual Environments

Python virtual environments allow you to isolate dependencies for different projects. We'll use them throughout the course:

Creating a Virtual Environment

# Navigate to your project directory
cd my_project

# Create a virtual environment
python -m venv .venv  # On Windows
python3 -m venv .venv  # On macOS/Linux

# Activate the virtual environment
# Windows (Command Prompt)
.venv\Scripts\activate
# Windows (PowerShell)
.\.venv\Scripts\Activate.ps1
# macOS/Linux
source .venv/bin/activate

When a virtual environment is active, you'll see its name in your terminal prompt, like (.venv) $.

Installing Packages in a Virtual Environment

# Ensure pip is up to date
pip install --upgrade pip # pip3 for macOS/Linux

# Install packages
pip install flask
pip install django

# Save dependencies to requirements.txt
pip freeze > requirements.txt

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

Deactivating a Virtual Environment

When you're done working, deactivate the environment:

deactivate

Python Tools and Extensions

Install these tools to enhance your Python development experience:

# Black (code formatter)
pip install black

# Pylint (linter)
pip install pylint

# Pytest (testing framework)
pip install pytest

# IPython (enhanced interactive shell)
pip install ipython

Docker

Docker allows you to create consistent development and production environments. Think of it as a way to package your application with all its dependencies into a standardized unit.

We'll cover Docker in detail on Wednesday, but today we'll focus on installation and basic verification.

Installation

Install Docker Desktop, which includes Docker Engine, Docker CLI, Docker Compose, and other tools:

Windows

  1. Ensure your system meets the requirements:
    • Windows 10 64-bit: Pro, Enterprise, or Education (Build 16299 or later)
    • Windows 10 Home (Build 19018 or later) with WSL 2
    • Virtualization enabled in BIOS
  2. Download Docker Desktop from docker.com
  3. Run the installer and follow the wizard
  4. Start Docker Desktop from the Start menu

macOS

  1. Ensure your system meets the requirements:
    • macOS 10.15 or newer
    • Apple Silicon or Intel processor
  2. Download Docker Desktop from docker.com
  3. Open the downloaded .dmg file and drag Docker.app to the Applications folder
  4. Start Docker Desktop from the Applications folder

Linux

  1. Docker Desktop is available for some Linux distributions, or you can install Docker Engine:
  2. Consider adding your user to the docker group to avoid using sudo: 
    sudo usermod -aG docker $USER
newgrp docker  # Apply changes without logging out

Verifying Docker Installation

Check that Docker is installed correctly:

docker --version
docker-compose --version

You should see output with version numbers for both commands.

Run a test container to ensure everything works:

docker run --rm hello-world

You should see a message indicating that Docker is working correctly.

Setting Up Your Course Directory Structure

Organizing your files is essential for efficient development. Let's create a structured directory for this course:

Creating the Directory Structure

# Navigate to your preferred location for course materials
cd ~/Documents  # or another location of your choice

# Create the main course directory
mkdir fullstack_python

# Navigate to the course directory
cd fullstack_python

# Create subdirectories for each week
mkdir week1 week2 week3 week4 week5 week6 week7 week8 week9 week10 week11 week12 week13 week14

# Create a projects directory for major assignments
mkdir projects

# Create a resources directory for reference materials
mkdir resources

# Create a .gitignore file
touch .gitignore

Setting Up a Basic .gitignore File

A .gitignore file tells Git which files to exclude from version control. Here's a basic configuration for Python web development:

# Python
__pycache__/
*.py[cod]
*$py.class
*.so
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
*.egg-info/
.installed.cfg
*.egg

# Virtual Environments
venv/
.venv/
ENV/
env/
env.bak/
venv.bak/

# IDE and Editors
.idea/
.vscode/
*.swp
*.swo
*~

# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# Database
*.sqlite3
*.db

# Dependencies
node_modules/
jspm_packages/

# Distribution
dist/
build/

# Testing
.coverage
htmlcov/
.tox/
.nox/
.hypothesis/
.pytest_cache/

# Docker
.dockerignore
docker-compose.override.yml

# Operating System
.DS_Store
Thumbs.db

Initialize Git Repository

Let's initialize this directory as a Git repository to start tracking changes:

git init
git add .gitignore
git commit -m "Initial commit with directory structure and .gitignore"

Practical Exercise: Environment Setup and Verification

Let's practice setting up and testing our development environment with a hands-on exercise:

Exercise: Create and Run a Simple Python Web Application

Step 1: Create a Project Directory

# Navigate to the Week 1 directory
cd week1

# Create a directory for this exercise
mkdir hello_web

# Navigate to the exercise directory
cd hello_web

Step 2: Create a Virtual Environment

# Create a virtual environment
python -m venv .venv  # On Windows
python3 -m venv .venv  # On macOS/Linux

# Activate the virtual environment
# Windows (Command Prompt)
.venv\Scripts\activate
# Windows (PowerShell)
.\.venv\Scripts\Activate.ps1
# macOS/Linux
source .venv/bin/activate

Step 3: Install Flask

pip install flask

Step 4: Create a Simple Flask Application

Create a file named app.py with the following content:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return '''
    <!DOCTYPE html>
    <html>
    <head>
        <title>Hello Web Development</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 40px;
                line-height: 1.6;
            }
            .container {
                max-width: 800px;
                margin: 0 auto;
                background-color: #f4f4f4;
                padding: 20px;
                border-radius: 5px;
            }
            h1 {
                color: #333;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Hello, Web Development!</h1>
            <p>Your development environment is working correctly.</p>
            <ul>
                <li>Python is installed and running</li>
                <li>Flask is installed and serving this page</li>
                <li>Your browser is displaying the page properly</li>
            </ul>
            <p>You're ready to start your web development journey!</p>
        </div>
    </body>
    </html>
    '''

if __name__ == '__main__':
    app.run(debug=True)

Step 5: Run the Application

python app.py  # On Windows
python3 app.py  # On macOS/Linux

You should see output indicating that the Flask server is running, typically at http://127.0.0.1:5000/.

Step 6: View the Application

Open your web browser and navigate to http://127.0.0.1:5000/ or http://localhost:5000/. You should see the "Hello, Web Development!" page.

Step 7: Initialize Git Repository

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

# Initialize Git repository
git init

# Add files to Git
git add .

# Commit the changes
git commit -m "Initial commit of Hello Web application"

Step 8: Create a requirements.txt File

pip freeze > requirements.txt

This file lists all installed packages, making it easier to recreate the environment later.

Step 9: Stop the Server and Deactivate the Virtual Environment

Press Ctrl+C to stop the Flask server, then deactivate the virtual environment:

deactivate

Exercise Extensions

If you'd like to explore further, try these extensions:

  1. Modify the HTML to include your name or personalize the message
  2. Add a second route at /about with different content
  3. Create a proper template file instead of inline HTML
  4. Use VS Code to edit the files and run the server from its integrated terminal
  5. Add CSS to improve the styling of the page

Assignment: Environment Setup

Let's close with a practical assignment to set up your development environment:

Assignment: Environment Setup

  1. Install VS Code from https://code.visualstudio.com/
  2. Install Git from https://git-scm.com/
  3. Install Python 3.10 or newer from https://www.python.org/downloads/
  4. Install Docker Desktop from https://www.docker.com/products/docker-desktop
  5. Install recommended VS Code extensions (Python, Pylance, Docker, GitLens, HTML CSS Support)
  6. Create a directory structure for the course: 
    fullstack_python/
├── week1/
├── week2/
├── week3/
└── projects/
  7. Complete the "Hello Web" exercise outlined above
  8. Take a screenshot of your installed software and directory structure
  9. Take a screenshot of your "Hello Web" application running in the browser

Submit both screenshots as your first assignment.

Resources for Further Learning

VS Code

Git

Python

Docker