Web Design AI Header

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 deployment

This 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/editor

The 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.0

The 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_here

Update 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 variables

Verify 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 active

The project is now ready for database schema design and related table implementation in subsequent lessons.