Home

Buliding a Webapp

The purpose of this session is to introduce the students to basic web development concepts. Even at a young age we are interacting regularly with the internet, but few understand the basic mechanisms that allow us to do so. At a basic level web pages are hosted on remote machines that are running web applications. In this dojo we'll show the students how to write and deploy a simple web application using heroku.com.

Perquisites for Students

• github account
• heroku account

The Required Files

Nothing gets installed or deployed on local machines to keep students and parents free from the hassle, and because the web provides! The basic plan is to create a python flask application which requires 3 files [requirments.txt, Procfile, hello_world.py]. The app will be saved in github as a new repository. Then heroku is capable of connecting to a github account, cloning the repository, and deploying the app based on the Procfile.

requirements.txt

The purpose of this file is to tell python which libraries to install for the application. Libraries are source code bundled up by external parties and made available in a public repository. We only need the Flask library for this tutorial.

Flask

hello_world.py

The python file contains all the code needed to produce a simple single-page python web application. The source code is going to be shamelessly robbed from the flask tutorial page.

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

if __name__ == "__main__":
    app.run()

This is not enough to host this application on heroku because it won't allow the host|port to resolve. To fix the problem we need to update the code to include host|port. You can see a working heroku example here. Heroku exposes a PORT variable that can be used to bind to the right port. It changes everytime time you deploy because heroku gives out dynamic ports.

import os
from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello world!"

if __name__ == "__main__":
    port = int(os.environ.get("PORT", 5000))
    app.run(host='0.0.0.0', port=port)

Procfile

The procfile is a special heroku file that explains to the service what kind of application you are deploying and how many backend dynos to use.

heroku ps:scale web=1
web: python hello_app.py

Unverified steps

Perquisites for Teachers

• at least one local heroku cli

Because everything is being done on the web, we won't have access to the error logs. At least one instructor needs the heroku cli in order to diagnose app errors.

Error Troubleshooting

• 500 internal server error see -> Exit code 143
  • You probably need to scale down / scale up the dynos
    • Update the Procfile web=0 in git and commit
    • Deploy in heroku to scale down
    • Update the Procfile web=1 in git and commit
    • Deploy in heroku to scale up