Web Design AI Logo

Demo 2: Flask Development Workflow

Learn the complete Flask development workflow from GitHub setup to Heroku deployment.

Demo Objectives

  • Set up a new project from the starter kit, customize it, and deploy it to Heroku
  • Give instructor access on both Heroku and GitHub
  • Follow the complete workflow from GitHub to Heroku deployment
  • Create a working Flask application with customizations
  • Submit deliverables including Heroku project name and reflection

Watch: Demonstration 2 Tutorial

Step-by-Step Demonstration

Step 1: 1. Set Up the Project

  • Create a new repo from the starter kit (example: lastname-demo2)
  • Clone the repo into Cursor/VS Code
  • Check requirements.txt (make sure Gunicorn is included)

Step 2: 2. Create Virtual Environment

Run in terminal:

python -m venv venv
venv\Scripts\activate # Windows

Install dependencies:

pip install -r requirements.txt

Run the app locally:

python app.py

Confirm it works at 127.0.0.1:5000

Step 3: 3. Deploy to Heroku

  • Log into Heroku → NewCreate new app
  • Name format: lastname-demo2 (must start with lowercase)
  • Connect the app to your GitHub repository
  • Enable Auto Deploys
  • Click Deploy Branch
  • Wait for the build to finish → Open App to test

Step 4: 4. Make Custom Changes

  • Update site title (e.g., add your name + demo 2)
  • Change colors (example: purple and gold)
  • Change some content text (e.g., "Jones County, Georgia")
  • Confirm the changes appear locally
  • Push changes to GitHub
  • After Heroku rebuilds, confirm the changes are live on Heroku

Step 5: 5. Grant Access

On Heroku, add instructor as collaborator:

  • Username: bryan.marshall@gcsu.edu

On GitHub, add instructor as collaborator to your repo

Step 6: Deliverables

Submit your Heroku project name and PDF reflection in GeorgiaView. Make sure to:

  • Customize title, colors, and content
  • Replace starter kit with your own edits
  • Add bamarshall06 as collaborator on Heroku project
  • Add bamarshall06 as collaborator on GitHub repository
  • Submit Heroku project name (not URLs) in GeorgiaView
  • Write and submit a short PDF reflection about the development process

Step 7: What I'm Looking For

  • Successful deployment to Heroku
  • At least 3 visible changes: title, colors, and content
  • Instructor access on both Heroku and GitHub
  • Site runs locally and on Heroku