Host web app on Heroku

How to host your flask web app on heroku

introduction:

Deploying your awesome flask web app on Heroku is easier than you think. In this tutorial I will be hosting a simple flask API on heroku. API are really helpful expecially for cross system integration.

Creating your web app:

first things first let’s install Flask that’s the only module we will need for this project

pip3 install flask 

ok that went well let’s start our coding by importing the installed flask module and instantiate it.

from flask import Flask,render_template,request,jsonify
app = Flask(__name__)

secondly we have to create our API’s request function (a function that allows users to communicate with our API)

@app.route("/getecho/", methods = ['GET'])
def get():
   message = request.args.get('msg')
   data = {}
   if not message:
        data["status"] = "null message"
        data["text"] = "didn't recieve any text to echo"
   else:
        print(f"message recieved '{message}'")
        data["status"] = "message recieved"
        data["info"] = f"echo '{message}'"
   return(jsonify(data))

the above code simply get’s a request from a user, if there was no text it returns :

{
  "status": "null message", 
  "text": "didn't recieve any text to echo"
}

if where sent a text to our API it will return something like this:

{
  "info": "echo 'hello word how are you doing'", 
  "status": "message recieved"
}
we are almost done with the API part of the project, we need to run our API by this writing this two lines of code:
if __name__ == "__main__":
    app.run(host="localhost")

putting everything together we have:

from flask import Flask,render_template,request,jsonify
app = Flask(__name__)
@app.route("/getecho/", methods = ['GET'])
def get():
   message = request.args.get('msg')
   data = {}
   if not message:
        data["status"] = "null message"
        data["text"] = "didn't recieve any text to echo"
   else:
        print(f"message recieved '{message}'")
        data["status"] = "message recieved"
        data["info"] = f"echo '{message}'"
   return(jsonify(data))

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

u can see the code in action by running the program, open your browser and type:

localhost:5000/getecho/?msg=hello world this is an API

we should see the result return in JSON format as:

{
"info": "echo 'hello world this is an API'", "status": "message recieved"
}

we are done with the API save the code as app.py or any other name of your choice now to Heroku

Deploying/ host your flask web app on Heroku

Before we go into Setting Heroku up we need to do a few things

First we create a file called Procfile no extention this a file that tells heroku the to run for starting our project

just paste the following text in the Procfile

web: python3 app.py

then save it.

We also need to tell heroku the python modules we need for our app to run, create a text file called requirements.txt

insert the following line of text the requirements.txt file and save

asn1crypto==0.24.0
certifi==2019.3.9
cffi==1.12.3
chardet==3.0.4
Click==7.0
cryptography==2.6.1
Flask==1.0.3
future==0.17.1
gunicorn==19.9.0
idna==2.8
itsdangerous==1.1.0
Jinja2==2.10.1
MarkupSafe==1.1.1
pycparser==2.19
requests==2.22.0
six==1.12.0
urllib3==1.25.2
Werkzeug==0.15.4

okay we are all set for heroku

head to heroku and setup an account.

Download and setup heroku-command-line you will also need to install git

once installed you will need to head to your terminal and run the following commands

heroku login
Heroku login command
running heroku cli — nacbotics

this will open up a browser click on login.

once logged in it will tell you that you can close this page

Heroku cli login page
heroku cli login page

next we will run the following command in our terminal

heroku create

this will create a repository in your heroku account

it will print out your applications web address

Heroku create command

we initialize our git repo so we can add our projects to it we do this by running the command below

git init .
git initialization

next we add our project folder to GIT repository for upload to the heroku cloud

git add .

The files added are the app.py,the requirements.txt and the procfile if you have any other files in the same project directoy the will be added also

next we commit our files to git

git commit -m “my first commit”
Commiting our project

next we add our GIT repo to heroku remote repo

heroku git:remote -a {your-project-name}

{your project name} can be found after the heroku create after the creating app ………done.

NOTE: you are to enter the project name without the braces

finally we push our project to the heroku servers

git push heroku master

this command starts the build process when its done we can see our webapp with the link we where provided

Host flask web app on Heroku

you can interact with your project by simply running the following command in your browser

{your heroku webapp address}/getecho/?msg=hello world i did it

you can see your webapp address my logining into your heroku dashboard and click on open app. you simply interact with it by inserting the text below behind your webapp url

/getecho/?msg={your message}

hope you were able to deploy your own simple flask app on Heroku successfully.

Deploying flask web app(s) on Heroku is easy !!!!!.

Leave a Reply

Your email address will not be published. Required fields are marked *