How to deploy your Flask app on Heroku

Introduction

Flask — The Pallets Project

1. FLASK :

Flask from the Pallets Projects is a web development framework in Python. It was developed by Armin Ronacher as an April Fool’s joke at the age of 21. It eventually became one of the two most popular web development frameworks for Python, including Django.

Flask wraps around Werkzeug and Jinja :

Jinja : Jinja template allows writing code similar to Python syntax in HTML, XML, CSV, LaTeX, and other text-based formats. Variables and expressions in between the codes are later rendered as values.

{# Jinja Code Example #}
<ul>
{% for item in items %}
    <li> A : {{ item.a }} </li>
    <li> B : {{ item.b }} </li>
{% endfor %}
</ul>

Brackets {} are embedded in between the HTML codes, and the components of each item — a and b are printed out in the final document, iterating through the list of items.

Werkzeug : Werkzeug is a comprehensive WSGI web application library. WSGI is short for Web Server Gateway Interface, where a web server forwards requests to the web applications in Python.

To summarize, Flask allows us to build lightweight and minimalist web-applications as a micro-framework based on the template engine Jinja and WSGI Werkzeug.

Because of its simplicity, Flask is used in top tech companies like Netflix, Reddit, Airbnb, Lyft, and Uber.

2. HEROKU

Heroku is a cloud service platform which allows developers to easily deploy apps in Python, Java, Node.js, Ruby, and others. Each app is run in a virtual container called “Dynos” and these can be scaled by the developers in different types and sizes. Heroku charges customers based on the # of the Dynos.

Heroku also runs on top of Amazon Web Services — which explains the higher cost. However, knowing few commands on Heroku CLI allows running your application without any prior knowledge of AWS — this makes the whole deploying process a lot simpler!

Simple Flask App & Deployment on Heroku

Now let’s get started with creating the Flask App and deploying it to Heroku. I will be using MacOS (Big Sur) environment.

1. Download & Install Heroku CLI

First, download and install Heroku CLI, and create a Heroku account which is free to begin with.

$ brew tap heroku/brew && brew install heroku

2. Create Conda Environment

Create a new Conda environment to work with your flask app that will be later deployed to heroku. I have named it ‘heroku-env’ in the following code.

$ (base) conda create --name heroku-env python=3.8
$ (base) conda activate heroku-env
$ (heroku-env)

3. Install Flask & Gunicorn

Gunicorn : Green Unicorn, a Python WSGI HTTP Server for UNIX.

$ (heroku-env) pip3 install flask gunicorn

4. Create the directories and files for your Flask App

Create the parent directory for your flask app (temporary name : doby), create an app folder under the parent directory. And create templates folder under the app folder.

$ (heroku-env) mkdir doby
$ (heroku-env) cd doby
$ (heroku-env) mkdir app
$ (heroku-env) cd app
$ (heroku-env) mkdir templates

Open the parent directory (doelsevier) with visual studio code (or any kind of editor) to create additional files.

$ (heroku-env) cd
$ (heroku-env) code doby    
// assuming you are at the parent directory of doby

Note that the directories and files location need to follow the structure below.

directory and file structure

• Under parent folder — doby folder: app folder, Procfile, and requirements.txt
• Under app folder : templates folder and app.py
• Under templates folder : index.html

Let’s now create the missing files one by one.

app.py

Create ‘app.py’ under app folder and write the following code for flask app initialization and routing.

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
   return render_template("index.html")
if __name__ == "__main__":
   app.run(debug=True)

Procfile

Create ‘Procfile’ under doby directory (parent) and copy and paste the following code. There are no syntax mistakes allowed- not even a space.

web: gunicorn app.app:app --log-file=-

index.html

Create ‘index.html’ under templates directory and write any html you want.

<html>
<head> <title> doby - NLP analysis ... </title>
<body>
Hi there!
</body>
</html>

requirements.txt

This will be dealt shortly with the CLI commands.

5. Create and Connect a Heroku Application via CLI

Now go back to your terminal and enter the following command, which will open a web browser for you to sign in.

$ heroku login

Complete the sign in process via web browser and initialize git under the parent directory — doby.

$ git init

Create your application on Heroku, name it anything other than ‘doby’ — since this name is already taken (by me.)

$ heroku create doby --buildpack heroku/python

Connect the application (doelsevier2) remotely through git.

$ heroku git:remote -a doby

Save the requirements — packages and versions into a text file.

$ pip freeze > requirements.txt

Now double check if your directory looks like this:

directory and file structure

6. Git Add, Commit, and Push

Now that all of our Flask files are ready, let’s push and deploy it to the remote heroku repository.

$ git add .
$ git commit -m “initial commit"
$ git push heroku main

As simple as that!

The heroku documentation may tell you to push to ‘master’ branch, however my default setting was ‘main’ branch.

7. Check the deployment on your website

You can open a web browser and type in your heroku url → ‘<app name>.herokuapp.com’ and check if your heroku website is properly running.

doby.herokuapp.com — successfully deployed!

If you have followed the previous index.html instruction, you will see ‘Hi there!’ on your browser instead.

I hope you have successfully deployed your Flask app to Heroku, let me know if there are any questions or updates!