Lesson 1: Project Setup with Flask CRUD Template
Set up a new Flask project using the CRUD template, configure GitHub repository, deploy to Heroku, and establish development environment with virtual environment and database connection.
Lesson Objectives
- Create Flask project from CRUD-F25 template and GitHub repository
- Configure Heroku application with GitHub deployment integration
- Set up local development environment with virtual environment
- Configure environment variables for database connectivity
Watch: Project Setup with Flask CRUD Template
Project Setup with Flask CRUD Template - Notes
GitHub Repository Setup
Start a new Flask project using the established CRUD-F25 starter template. This template provides the foundation for building applications with database relationships.
Repository creation steps:
# Navigate to CRUD-F25 starter template repository
# 1. Click 'Use this template' button
# 2. Select 'Create a new repository'
# 3. Repository name: inclass4demo
# 4. Set visibility to Private
# 5. Click 'Create repository'The template includes pre-configured Flask structure, database connection utilities, and basic CRUD operations that will be extended for related table functionality.
Heroku Application Configuration
Set up the Heroku application to host your Flask project with database capabilities.
Heroku setup process:
# Navigate to Heroku Dashboard
# 1. Click 'New' -> 'Create new app'
# 2. App name: inclass04demo
# 3. Choose region (US or Europe)
# 4. Click 'Create app'Connect GitHub repository for automatic deployment:
# In Heroku app dashboard:
# 1. Go to 'Deploy' tab
# 2. Select 'GitHub' as deployment method
# 3. Search for repository: inclass4demo
# 4. Click 'Connect' when repository appears
# 5. Scroll to 'Automatic deploys'
# 6. Click 'Enable Automatic Deploys'
# 7. Click 'Deploy Branch' for initial deploymentThis configuration ensures that changes pushed to GitHub automatically deploy to Heroku.
Local Development Environment Setup
Clone the repository and establish local development environment for Flask application development.
Repository cloning:
# Clone repository to local machine
git clone https://github.com/yourusername/inclass4demo.git
# Navigate to project directory
cd inclass4demo
# Open in development environment
code .Alternative method using desktop:
# Navigate to desired directory (e.g., Desktop/Python)
# Clone repository
git clone [repository-url]
# Open project in IDE/editorThe cloned repository contains the complete Flask template structure including database configuration files, template directories, and deployment configurations.
Virtual Environment Creation and Activation
Create an isolated Python environment for project dependencies to avoid conflicts with system packages.
Virtual environment setup:
# Create virtual environment
python -m venv venv
# Activate virtual environment (Windows)
venv\Scripts\activate
# Activate virtual environment (macOS/Linux)
source venv/bin/activate
# Verify activation (command prompt should show (venv))
# Example: (venv) C:\Users\Name\Project>Install project dependencies:
# Install requirements from template
pip install -r requirements.txt
# Common packages typically included:
# Flask==2.3.3
# python-dotenv==1.0.0
# mysql-connector-python==8.1.0
# or PyMySQL==1.1.0The virtual environment isolates your project dependencies and ensures consistent development across different machines.
Project Structure and File Organization
Understand the CRUD template structure and prepare for database integration.
Typical project structure:
inclass4demo/
├── app.py # Main Flask application
├── requirements.txt # Python dependencies
├── .env # Environment variables (create this)
├── .gitignore # Git ignore rules
├── templates/ # HTML templates
│ ├── base.html # Base template
│ └── index.html # Home page
├── static/ # CSS, JS, images
│ └── style.css # Styling
├── database/ # Database-related files
│ ├── schema.sql # Database schema
│ └── connection.py # Database utilities
└── venv/ # Virtual environment (don't commit)Rename example files to match your project:
# Right-click on example files
# Select 'Rename' from context menu
# Update filenames to match project requirements
# Example: examples.py -> books.py Environment Configuration and Database Setup
Configure environment variables for secure database connectivity and prepare for related table implementation.
Create .env file for sensitive configuration:
# Create .env file in project root
# Add database connection variables:
DB_HOST=your_database_host
DB_USER=your_database_user
DB_PASSWORD=your_database_password
DB_NAME=your_database_name
DB_PORT=3306
# Flask configuration
FLASK_ENV=development
FLASK_DEBUG=True
SECRET_KEY=your_secret_key_hereUpdate environment file with AI assistance:
# Use AI tools to safely update .env file
# Provide database connection string to AI
# Example: mysql://user:pass@host:port/database
# AI will parse and format into individual variablesVerify project readiness:
# Test Flask application startup
python app.py
# Should start development server
# Check for any missing dependencies or configuration issues
# Test database connection (if configured)
# Verify templates render correctly
# Confirm virtual environment is activeThe project is now ready for database schema design and related table implementation in subsequent lessons.