Sai Yerni Akhil's Blog

Sai Yerni Akhil's Blog

Flask — from development to deployment in 15 minutes

Flask — from development to deployment in 15 minutes

A brief guide to develop a basic flask app and deploying it into Heroku cloud.

Flask is a micro framework written in Python…blah…blah..blah! I’m not gonna waste you time so, more info at flask.pocoo.org!

Developing a Flask app

  • Install flask through pip using —
pip install flask
  • Running a sample “Hello World!” flask web app
from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
  return "Hello, World!"

Running a flask app is just flask runaway, just head over to your app location in your command prompt/bash/terminal.

C:/[Path /to your/ app/]>flask run

When you make some changes to your app, you should run flask run again by quitting.

Debug mode is a very useful tool while you’re developing an app and you are in need of frequent reloads. Here’s what you can do in your cmd to activate debug mode in Windows set FLASK_ENV=development

Now you can see the following on your cmd —

* Environment: production
 WARNING: Do not use the development server in a production environment.
 Use a production WSGI server instead.
 * Debug mode: off
 * Running on [http://127.0.0.1:5000/](http://127.0.0.1:5000/) (Press CTRL+C to quit)

The above app generates some content in the browser which looks like this —

A Hello WorldA Hello World

Now, Let us know what each line in the above code works or does the things

from flask import Flask

More about “Flask” at here.

The 3rd line in the code creates an instance of our WSGI Application.

If you have ever noticed your address bar while visiting websites like Wikipedia, Instagram, Reddit etc., you should have noticed this

In the first image there’s Instagram’s default route. It is always showed up when you navigate to instagram.com. The default route is a “/” (forward slash)

In the second image, when you want to navigate to specific Instagram profile then you need to give the specify like “<username>” after the default route like “/sachintendulkar” for viewing Sachin Tendulkar’s Instagram profile.

The function below the route serves the content to be displayed or served for that route.So that we’re clear how routes work. We can now start adding routes for our web app.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

@app.route("/first")
def first():
    return "The First Route"

Which results in this —

The First RouteThe First Route

Its achieves our purpose of adding routes but, is that what an actual web app look like? No! There a no HTML pages and no anchor tags and nothing in there. But do not panic we’ll now be dealing with rendering HTML pages rather than generating a simple plain text. For that we need to import a function render_template from flask.

All the HTML files to be served via render_templateshould be placed in a folder named templates inside your working directory

from flask import Flask,render_template

app = Flask(__name__)

@app.route("/")
def hello():
    return render_template("index.html")

@app.route("/first")
def first():
    return render_template("first.html")
<html>
    <head>
        <title>My Web App</title>
    </head>
    <body>
        <h1>This is the first route</h1>
        <a href="/">back</a>
    </body>
</html>
<html>
    <head>
        <title>My Web App</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <a href="/first">first</a>
    </body>
</html>

The navigation functions as —

Deploying the Flask app to Heroku Cloud

Now that the basic app is ready and now its time for deployment. We are now going to deploy it to Heroku Cloud. Why Heroku? It offers a command line interface for configuring and deploying python or any web app with version controlling, which makes it easier to track your files and versions of your web app.

For starting with Heroku you need to create a Heroku account and install Heroku CLI in your local computer. You can download it here

For you to use Heroku, you need to install and configure git. Steps to install git can be found here — https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

  • After installing Heroku CLI, now use the heroku logincommand to connect your Heroku account to the CLI in your local computer.

  • Install a python package gunicorn by pip install gunicorn . (Wikipedia)

  • Its time to create a Procfile, which tells the Heroku cloud which server our web app runs on. The Procfile contents for our web app looks like —

web: gunicorn app:app
  • Now move over to the working directory in the command prompt and generate a requirements.txt file which tells about the package dependencies for our web app by running pip freeze requirements.txt

  • Now initialize a git repository in the current working directory git init .

    adding a .gitignore file is an optional

  • Next, stage and commit all changes git add . and git commit -m 'first commit' .

  • Create a Heroku app heroku create

The result of **heroku create** commandThe result of heroku create command

  • Let us push all the contents of our repository into the Heroku cloud by git push heroku master .Its takes some time for the cloud to be configured for our app to be run.

  • heroku open to open your web app in your browser.

Its done! you’ve now created a basic flask app and deployed it to Heroku cloud.

The app I’ve created is now live at https://safe-waters-62537.herokuapp.com/

Now that you’ve got an idea about developing and deploying basic flask application. You can continue to build some advanced flask applications by learning at Edx.

 
Share this