Deploy Flask App by Heroku (macOS)- A rigorous professor of cartography

6 min readNov 12, 2021

Introduction

You have definitely experienced a sort of professor, maybe teaching cartography. You are always “R” due to your various mistakes in your assignment. Heroku for deploying Python:Flask App is like that. If one step is wrong, thank you! you should go back and find out where repeatedly. The rigorous professor would never tell you why. Believe me! you should better copy from your seniors or classmates (X)

OK! Let’s assume I am your friend and try to help you do this assignment clear and right :)

Heroku account

First task is the Heroku account setting. It is like a Goomba (moving mushroom in Mario), easy to tackle. As you make other accounts, you just follow the instructions. Only one thing needs to notice: the web probably cannot build in your country, so then you should pick up the United States. Thus, it doesn't matter.

From now on, all work can be done by running just terminal (command line). Therefore, really to open your terminal??

Heroku CLI

Second task is Heroku CLI. It is pretty bothering like Koopa (Mario turtle). The conflict sometimes happens and you would feel irritated so make sure you follow every step right.

Heroku CLI installation

“Download and install the Heroku CLI.” The official statement for macOS is

$ brew tap heroku/brew && brew install heroku

However, this instruction is shitty and cannot work on my terminal. Instead, Standalone installation is preferable.

$ curl https://cli-assets.heroku.com/install.sh | sh

Afterwards, you will see this: “heroku installed to /usr/local/bin/heroku”.

The next/third section is to satisfy the professor’s criteria to make sure you pass the assignment (build up local directory). You can alternatively copy your senior homework last year (visit my Github Template, fork it, clone it), or you can build them by following my instruction.

Make a local directory

1. make a local directory by terminal :)

$ mkdir {your-local-directory}

3. cd to your local directory

$ cd {your-local-directory}

Virtual environment

Followed by this, you should start off by creating a virtualenv in your project directory. For example like this:

go to your for project directory

$ cd {your-local-directory}

2. create a virtualenv

$ python -m venv venv/  # for python before python 3.0
$ python3 -m venv venv/ # for python after python 3.0

3. activate the virtualenv by

$ source venv/bin/activate

After the virtualenv is created and activated, the packages required now is time to add in

$ pip install flask 
$ pip install gunicorn

Procfile

Then now, it comes to the most rigorous checkpoint from your professor. Even a tiny thing wrong would ruin the whole app-building process.

I don’t know why it should be named as “Procfile” but it just must be.

When you run Heroku and look at the application Logs, the final step I would mention at the end, if this statement comes up like this:

Procfile declares types -> (none)

It means you were screwed and you didn't make Procfile right. Then if it comes up like this:

Procfile declares types -> Web

Congrats! you made it!

Ok! It sounds frightening, but it is just the tip of the iceberg, so let’s unveil the confusing process….

Create Procfile

Samely, your terminal still locates at your working directory unless you had closed it. Then the thing you should do is

$ touch Procfile

Here is two things you should remind.

Procfile is a file without .txt or any kinds of test file root.
Procfile should be exactly “Procfile”. Lowercase is not allow.

Procfile written

OK then! head into the file (I said only work in terminal. Sorry I regret :> ), and type…. you can copy my text below to make sure you are not losing a space/tab or adding extra space/tab or anything wrong.

web: gunicorn app:app

Let’s decode it a bit. web: gunicorn does call your app. app:app, the first app is your {your app name} and the second you don’t have to modify. For instance, if my app file called mario.py. Then the Procfile should be written:

web: gunicorn mario:app

Requirements

The next thing is rather simple (back to smash some Goombas hahaha…). It is about to make a environment dependency by making a requirenments.txt file. The way to do that is to simply write this in the same terminal.

$ pip freeze > requirements.txt

Afterwards, the requirements.txt will contain all the dependent packages towards the virtual environment, in other words, the required packages you need for running the app.

{your flask app name}.py

The last file you have to make is a .py file in the same directory. Absolutely you want to build an app by python:flask, and it all you mean to combat the final big boss: Kuba.

You should have some skills for python programming. You have all skill to deal with the boss, so come to this part is a final relief for you.

Congratulations!

Still! Some tips that I have used to success kill it that I should write a bit here. I suggest is to build a very very simple app, run it, make sure it works, and then extend it afterwards to your well-designed website.

Let’s me make a simple example here.

Open your python file, for instance, Mario.py
Write this part in the file:

# in your python file
from flask import Flaskapp = Flask(__name__)@app.route('/')def index():
  return "<h1>Mario is my Spanish teacher </h1>"if __name__ == '__main__':
    # Threaded option to enable multiple instances for multiple user access support
    app.run(threaded=True, port=5000)

OK! you made all of them independently. Congrats! Let’s do the final section!

OK! Those who referred my homework can come back and stay in line with other diligent students. It’s time for the fourth section, to hang in this assignment!

Deploy by HeroKu Git

Wait a minute! you thought you have slaughtered Kuba and that is the end of the story, but it wasn't. The hidden big boss appears (oh no!).

Deploying on Heroku

Use your same terminal (hope you persist never closing it til now). If not, please “cd” to your former directory or the cloned directory.

Subsequently, it’s time to deploy your app on Heroku.

Please make sure you have read and done all works beforehand (!important), because the installation of Heroku CLI is necessary here and the local directory has to be well-prepared. If you have done them, let’s go/allons-y/vamos!

Connecting to Heroku CLI

$ heroku login

Heroku would use your browser to login in semi-automatically by clicking login on the browser.

2. create your app.

heroku create {app-name}

Note: they are certain rules like should start with lowercase blah blah... Please make sure you create sucessfully.

3. remote control to your heroku repository:

$ heroku git:remote -a {app-name}

Push files

And now, let’s take a shot (add our files)and commit:

add files: “.” means add all files in the directory.

$ git add .

2. commit: save your shot

$ git commit -am "mario deploy"

3. upload the project by pushing it to Heroku:

$ git push heroku main

Note: It can be done by master before, due to the respect of BLM…. you know that!

Wait….for a second let the website be built...and …Congratulations! Mission completed! But! But! But! The grade is posted somewhere. We should go and check if we get R or not.

The princess peach is encore escaping!!! Let’s open the browser, go to this link (your website) https://{app-name}.herokuapp.com/ and find her now!