Web Design AI Logo

Lesson 4: GitHub to Heroku

Master the deployment process from GitHub repositories to live Heroku applications for professional web hosting.

Lesson Objectives

  • Push your project to GitHub so your code is saved online
  • Create a new project in Heroku to get it ready to go live
  • Share your project with the professor so they can see it
  • Finish setting up your project to make it live and working

Watch: GitHub to Heroku Deployment Tutorial

GitHub to Heroku - Notes

1. What is Heroku?

  • A cloud platform used to deploy apps to the web.
  • Allows your project to run live so anyone can access it online.
  • Good for testing and sharing apps outside of your local machine.

2. Creating a New App

  • Go to the Heroku dashboard.
  • Click New → Create New App.
App naming rules:
  • Must start with a lowercase letter (not a number).
  • Suggested format: <name>-<module>-<class>-<demo/dup>
  • Example: marshall-4210-demo1.
  • Select Common Runtime → click Create App.

3. Connecting to GitHub

Under the Deploy tab:

  • Select GitHub.
  • Connect your Heroku app to your GitHub repository.
  • Search for your repo (e.g., "demo1") → click Connect.
Auto Deploys:
  • Enable this to automatically rebuild the Heroku app whenever you push changes to GitHub.
  • You can also deploy manually anytime using Deploy Branch.

4. Deployment Process

  • Heroku builds your project based on requirements.txt.
  • It installs all the libraries listed there (e.g., Flask, Gunicorn).
After deployment:
  • Go to Activity tab to track progress.
  • Click Open App to view your site.

5. Troubleshooting Errors

If the app crashes:

  • Go to More → View Logs for details.
Example error:
missing Gunicorn app:app command
Fix:

Add Gunicorn to requirements.txt.

Example:

gunicorn==20.1.0

Commit changes to GitHub → Heroku auto-rebuilds → redeploy.

Use logs to copy/paste errors into ChatGPT if you need help debugging.

6. Collaborators

Add your instructor as a collaborator for grading:

  • Go to Access tab.
  • Add: bryan.shall@gcsu.edu.
  • Only add for demo and dup projects (not personal test ones).

7. Managing Apps

If you finish with an app:

  • Go to Settings → Delete App.

On the dashboard:

  • Active apps show as running.
  • Inactive ones show zzz (asleep).

8. Heroku Plans

Eco Dyno plan → ~$5/month.

Features:
  • Apps sleep when not in use.
  • Unlimited apps allowed.
  • Affordable for student projects.

Key Takeaways

  • Heroku lets you deploy Flask apps live to the web.
  • Always check requirements.txt for needed libraries (like Gunicorn).
  • Use Auto Deploys for convenience, but don't deploy too often (takes time to rebuild).
  • Logs are your best friend when troubleshooting.
  • Add your instructor as a collaborator on required projects.
  • Consider the Eco Dyno plan ($5/month) for active apps.
Back to Lesson 3 Continue to Theory 2