heroku.md

Heroku

Heroku is a "platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud."

Here's how to deploy your implementation of, say, C$50 Finance to Heroku from GitHub.

1. Watch Brian's seminar to learn about git and GitHub, if not already familiar.

2. Create a new private repository at https://github.com/new (called, e.g., finance).

3. Take note of the HTTPS URL of the repository (e.g., https://github.com/username/finance.git, where username is your own GitHub username).

4. Change to your finance directory in Visual Studio Code or CS50 IDE, as via cd.

5. (Codespace users only) Copy your finance project files to workspaces/finance.

   Create a folder named finance under workspaces directory by running

   mkdir /workspaces/finance
   

   Copy your finance project files to /workspaces/finance by running

   cp -r * /workspaces/finance
   

   Then change your directory to /workspaces/finance by running

   cd /workspaces/finance
   

   Run ls to ensure all files have been copied over successfully.

6. Create a git repo therein.

   git init
   

7. Add the GitHub repository as a "remote," where USERNAME is your own GitHub username.

   git remote add origin git@github.com:USERNAME/finance.git
   

8. In the requirements.txt file inside of your finance directory, add gunicorn and psycopg2, each on separate lines. Your file should then resemble:

   cs50
   Flask
   Flask-Session
   gunicorn
   psycopg2
   requests
   

9. Push your code to GitHub.

   git add -A
   git commit -m "first commit"
   git branch -M main
   git push -u origin main
   

   If you visit https://github.com/username/finance, where username is your own GitHub username, you should see your code in the repository.

10. Sign up for a free Heroku account at https://signup.heroku.com/, if you don't have one already.

11. Create a new app at https://dashboard.heroku.com/new-app.

12. Configure your app at https://dashboard.heroku.com/apps/app-name/deploy/github, where app-name is your Heroku app's name.

    • Add this app to a pipeline: No need to configure; leave as is.

    • Deployment method: Select GitHub, then click Connect to GitHub. If prompted to log into GitHub, click Authorize heroku.

    • Connected to GitHub: Search for your app's repository (e.g., username/finance, where username is your own GitHub username), then click Connect.

    • Automatic deploys: Click Enable Automatic Deploys.

13. Configure your app at https://dashboard.heroku.com/apps/app-name/settings, where app-name is your Heroku app's name.

    1. Click Reveal Config Vars.

    2. Add a new variable called API_KEY, the value of which is your API token for IEX. Recall that, after registering for a developer account at https://iexcloud.io/, you can obtain your API token under API Tokens. Be sure to use your PUBLISHABLE token as the value for API_KEY, not your SECRET token.

14. Search for and provision Heroku Postgres add-ons at https://dashboard.heroku.com/apps/app-name/resources, where app-name is your Heroku app's name; select a Plan name of Mini.

15. At https://dashboard.heroku.com/apps/app-name/resources, where app-name is your Heroku app's name, click Heroku Postgres. In the tab that opens, click Settings, then click View Credentials.... Highlight and copy the URI that appears.

16. In Visual Studio Code or CS50 IDE, open app.py in finance/ and replace

    db = SQL("sqlite:///finance.db")

    with

    uri = os.getenv("DATABASE_URL")
    if uri.startswith("postgres://"):
        uri = uri.replace("postgres://", "postgresql://")
    db = SQL(uri)

    so that the CS50 Library will connect to your PostgreSQL database instead of your SQLite database. Be sure to add

    import os

    atop app.py, if not there already.

17. Ensure that any column that's a primary key has the AUTOINCREMENT keyword, re-creating it if need be.

18. In Visual Studio Code or CS50 IDE, execute the below to import finance.db into your PostgreSQL database, where URI is that same URI. Be sure to append ?sslmode=allow to the URI. Note that disabling SSL's certification verification with --no-ssl-cert-verification is not recommended in general but seems to be a temporary workaround.

    pgloader --no-ssl-cert-verification finance.db URI?sslmode=allow
    

    Thereafter, if you'd like to browse or edit your PostgreSQL database, you can use Adminer (a tool like phpLiteAdmin for PostgreSQL databases), at adminer.cs50.net. Log in using your database's credentials: at https://dashboard.heroku.com/apps/app-name/resources, where app-name is your Heroku app's name, click Heroku Postgres. In the tab that opens, click Settings, then click View Credentials....

19. Create a new file in Visual Studio Code or CS50 IDE called Procfile in finance/ whose contents are:

    web: gunicorn app:app
    

    That file will tell Heroku to look in a file called app.py for a variable called app and serve it with Gunicorn, a production-quality web server. (Flask's built-in web server is "good enough for testing but probably not what you want to use in production.")

20. Add that file to your repository and push it to GitHub.

    git add -A
    git commit -m "added Procfile"
    git push
    

    If you visit https://app-name.herokuapp.com/, where app-name is your Heroku app's name, you should see your app! If you instead see some error, visit https://dashboard.heroku.com/apps/app-name/logs, where app-name is your app's name, to diagnose! Each time you add (new or changed) files to your repository and push to GitHub hereafter, your app will be re-deployed to Heroku.