Access this Article for Free at-www.thecodeblogs.blogspot.com

Heroku: Deploy your Flask App with a Database Online

Heroku is a platform as a service based on a managed container system, with integrated data services and a powerful ecosystem, for deploying and running modern apps. The Heroku developer experience is an app-centric approach for software delivery, integrated with today’s most popular developer tools and workflows.

In this article, we will be looking at how we can deploy any Flask app having a Database attached to it on Heroku.

Quick Note:

The following article is explained irrespective of your codebase, as to deploy a Flask Application with a Database on Heroku all we have to modify is the app.config[‘SQLALCHEMY_DATABASE_URI’] line in our codebase if there’s a Database attached to it.

For the demonstration purpose of this article, we will be deploying this very basic Flask-App that we have created in this article, which simply accepts the User Details like Name and Email, stores them into the Local Database file using Flask-SQLAchemy and finally fetches and display all the data from the Database into an HTML Table.

Quick Overview: Referenced Flask App

• So far what we have built is an app that accepts the User details like Name and Email, using Flask-SQLAlchemy stored it into the DB and then simply fetches and displays the entire Database data into an HTML Table.
• Currently, the Project Structure of the app looks like this,

MyApp/
     |- templates
        |- index.html
     |- app.py
     |- User.sqlite3

• The app.py consists of three parts Defining Database Structure, Getting User Details from the HTML Form, Inserting and Querying, and Passing result to the “index.html” file.

Defining Database Structure

Requesting Data from the HTML Form

Inserting, Querying and Returning Data from DB to HTML

• This is the Flask-App that we have built so far in this article having a local Flask-SQLAlchemy Database attached to it, and are going to deploy the same on Heroku having Postgres Database attached to it.

Let’s Get Started

Step 1: Installation

• Create and activate your Python Virtual Environment and install these following libraries if you haven’t already,

$ pip install flask
$ pip install Flask-SQLAlchemy
$ pip install gunicorn

• Download and Install GIT from this official GIT website.
• Download and Install the Heroku CLI tool from their official website.

Step 2: Create an Heroku App

• Go onto the Heroku Website and Create a Free Account.
• After creating an account and logging in your Dashboard should look something like this,

• Click on Create New App and then enter your App name, select your appropriate region, and click Create App.

Step 3: Create Some Necessary Files

• Now to deploy your Flask-App onto Heroku there are two more files that you will be required to run your app i.e “requirements.txt” that stores all the dependencies and packages required to run your project and “Procfile” which tells Heroku how to run the Application.
• To create a “requirements.txt” file, from the terminal go into your Project Folder Directory and run the following command(make sure your virtual environment is activated)

$ pip freeze > requirements.txt

• To create the “Procfile” run the following command (“web: gunicorn app:app” will get written inside the Procfile)

$ echo web: gunicorn app:app > Procfile

• After this, the Project structure should be looking something like this,

MyApp/
     |- templates
        |- index.html
     |- app.py
     |- requirements.txt
     |- Procfile

Step 4: Get Heroku Database URL

• Note: Can skip this step if don’t have a database in your application.
• So as of right now, all our data is getting stored into our local database, so we need to create a Database on Heroku and tell our Application to store all that data that it receives onto that Database.
• So first go into your terminal and login into your Heroku account using the following command and press Enter, and you will see a successful logged in message with your account name.

$ heroku login

• Now create a Database for your app using the following command,

$ heroku addons:create heroku-postgresql:hobby-dev --app app_name

• Now after your Database has been created, get the URL of your Database using the following command,

$ heroku config --app app_name

• Now that you have got your Database URL, replace the value of app.config[‘SQLALCHEMY_DATABASE_URI’] line in the “app.py” file with this Database URL.

Step 5: Push your code onto Heroku App

• Go into your Project Folder and Initialize your GIT Repository using,

$ git init

• Add everything to the commit stage using,

$ git add .

• Commit your entire code to the repo using,

$ git commit -m "initial commit"

• Make your Heroku App as the remote repository using,

$ heroku git:remote -a app_name

• Push everything onto your Heroku App Repository using,

$ git push heroku master

• So after this Heroku will automatically download and install all the necessary packages and dependencies from your requirements.txt file and finally, your app should be running at,

https://app_name.herokuapp.com/

• Now the one final thing that we have to do is to create the Tables and their structure that we have defined in our code into Heroku Database.
• For that, from your terminal go into the Python terminal of Heroku using,

$ heroku run python

• From your “app.py” file import the database object that you have created(the app is the name of your main flask file) using,

db: Object of your Database

>> from app import db

• Create the Database Structure into your Heroku Database using,

>> db.create_all()

• Exit from the python terminal,

>> exit()

• And we are DONE! Reload your app website and you will see your fully functional Flask Web App Up and Running along with a Heroku Postgres Database attached to it.

Conclusions

• And with this, we have deployed our Flask-App with a FlaskSQL-Alchemy Database on Heroku having a Postgres Database attached to it.
• Feel free to ask your queries or doubts regarding this article in the Comments Section.
• Connect with me on LinkedIn.