Sm0ke

Posted on Sep 14, 2020

Deploy Flask to HEROKU - With Samples

#flask #heroku #webdev

Hello Coders,

This article explains how to deploy Flask to HEROKU, a popular Platform-as-a-Service provider (PaaS) which makes it easy for developers to deploy apps in different technologies and frameworks. The platform supports all major languages like Python, Ruby, Java, PHP, and popular frameworks (Flask included).
To provide something useful, the article comes with a few deployment-ready samples, developed by AppSeed and released under the MIT License on Github.

Thank you for reading! TL;DR; - Links & Resources

Flask - the official website
HEROKU - the official website
Sample #1 - LIVE Demo - Flask Dashboard Argon (product page)
Sample #2 - LIVE Demo - Flask App Webpixels (product page)
Sample #3 - LIVE Demo - Flask Dashboard - DattaAble (product page)
Support via Github & Discord - provided by AppSeed

What is Flask

Short-note for beginners - Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. Classified as a microframework, Flask is written in Python and it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

Set up PC for Flask

Being a Python framework, Flask requires Python to run and expose his magic. Install Python is fairly simple via the official installers available on the official download page.

After installer execution, just open a terminal window and type python --version. On my PC, this command return:

$ python --version
Python 3.8.5

Once Python is installed, we can use PIP, the official package manager for Python, to install Flask:

$ pip install Flask

What is HEROKU

HEROKU is a popular platform that automates the deployment for apps coded on many languages like Python, GO, Ruby, JAVA, Php, and frameworks (Flask included).

To get started the first thing is to create an account on the HEROKU platform and install the command-line interface that matches our OS.

HEROKU - Sign Up page

HEROKU - Instal CLI

We can check the installation by typing heroku -v in the console. Any output that's not an error, means we are on the good track. On my PC, the output looks as below:

$ heroku -v
heroku/7.42.13 win32-x64 node-v12.16.2

From this point, we can move forward with our sample apps. The source code is published on Github and the recommended way to download the samples is to use GIT command-line tool. If your workstation doesn't have GIT installed, the apps can be downloaded as ZIP archives.

Flask HEROKU Sample #1 - Black Dashboard

Flask Black Dashboard is an open-source, production/deployment-ready starter released under the MIT License on Github. I will iterate below the relevant files that make the HEROKU deployment possible with just a few lines written in the terminal.

#1 runtime.txt — specify the Python version to be used

python-3.6.10

#2 Procfile — the HEROKU app bootstrapper

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

The above line instructs HEROKU to use the Gunicorn WSGI server to execute the WSGI app object, returned by run.py, located at the root of the project.

# Contents of run.py
from flask_migrate import Migrate
from os import environ
... 
app = create_app( app_config )
Migrate(app, db) 
# At this point, app is the WSGI object that Gunicorn expects.

The gunicorn module must be also present in the requirements.txt file, along with other modules required by the app.

flask
flask_login
...
python-decouple
gunicorn          # <--- The magic line

With all configuration in place, we can start the deployment by typing a few lines in the terminal.

#1 Clone the source code

$ git clone https://github.com/app-generator/flask-black-dashboard.git
$ cd flask-black-dashboard

#2 HEROKU Login - this will trigger a new browser window

$ heroku login

#3 Create the app in HEROKU world

$ # Create the app with a random name
$ heroku create 
$
$ # Create app using a name
$ heroku create you-name-here

#4 Compile the app in HEROKU environment. This step might take a while.

$ git push heroku master

#5 Open the app in the browser

$ heroku open

At this point, the sample app should be visible in the browser.

Flask HEROKU Sample #2 - Webpixels

This Flask starer is provided with database, ORM, a simple codebase, and deployment scripts (HEROKU included).
The project README contains all the necessary information to compile the app in a local environment and also to deploy the app on HEROKU with a few lines of code:

$ # Clone the source code:
$ git clone https://github.com/app-generator/flask-illustrations-webpixels.git
$ cd flask-illustrations-webpixels
$
$ # Check Heroku CLI is installed
$ heroku -v
heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good
$
$ # Check Heroku CLI is installed
$ heroku login
$ # this command will open a browser window - click the login button (in browser)
$
$ # Create the Heroku project
$ heroku create
$
$ # Trigger the LIVE deploy
$ git push heroku master
$
$ # Open the LIVE app in browser
$ heroku open

Once the browser is triggered to open a new page, we should see Flask Webpixels running.

Flask HEROKU Sample #3 - DattaAble

This open-source admin dashboard coded in Flask with a basic set of features can be deployed instantly on HEROKU just by typing the same commands as for the previous samples:

$ # Clone the source code:
$ git clone https://github.com/app-generator/flask-dashboard-dattaable.git
$ cd flask-dashboard-dattaable
$
$ # Check Heroku CLI is installed
$ heroku -v
heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good
$
$ # Check Heroku CLI is installed
$ heroku login
$ # this command will open a browser window - click the login button (in browser)
$
$ # Create the Heroku project
$ heroku create
$
$ # Trigger the LIVE deploy
$ git push heroku master
$
$ # Open the LIVE app in the browser
$ heroku open

By visiting the browser, our sample Flask starter should be usable. Just create a new user and authenticate it.

Using HEROKU for deployment might be a good solution for fast deployment without touching the server environment not only for Flask apps. As mention in the first paragraph, HEROKU can be used for Django, Nodejs, or JAVA web applications. More information can be found by accessing the official docs: