Serving a web app with Flask

Pasha KravtsovSupport Engineer
Flask is a microframework for Python based on Werkzeug and Jinja 2. This requires you to have a good understanding of Python 2.7.

Lets install Flask!
To install Flask you can use a python repository for libraries tool called pip. Download this file Python Pip and save it as ''
To run it:
Windows -
Linux -
Actually using pip to install flask:
pip install flask
Great, now Flask is installed as a python library and can be used in any python script.

In the beginning we'll just be able to connect to our web application through http://localhost:5000/ and later we will can make it available to anyone on the internet!

To start our project, create a folder that will house your files. We'll be using a special folder structure that flask will use to find correct .html, .css, image files and .js files.

Name your folder whatever you want and put it somewhere easily accessible. I called mine "MyWebApp". Inside your folder create another two folders. One named "static" and another named "templates".
Excuse my horrid picture but it will do:
File StructureNow that you have created a organized directory, create a Python file named ""

In this file you're going to want to add this Python code.
from flask import Flask
app = Flask(__name__)

def hello():
    return "Hello World!"

if __name__ == "__main__":

Open in new window

Let's break down the code.
This can be ignored for windows users. If you're using linux this tells the compiler when you run the file as an executable to compile it with python2

from flask import Flask
Here we are adding the flask library so you are able to use it.
This is the interesting part of Flask. Here you define what happens when a user goes to any url on your website. Example if you wanted a user to see "Hi" when they go to you would do

and use the code below to serve what they see

def hello():
    return "Hello World!"
Here the Flask interpreter will run this function/method which returns "Hello World!" and it will serve this when you go to ""

if __name__ == '__main__':
This should be pretty self-explanatory if you're familiar with Python. Basically this initializes Flask and the program.

Now save your file and run it by doing "python.exe" in cmd prompt or for Linux
chmod +x

Open in new window

or alternatively

Open in new window

Now load up or in your web browser.
Check out the sweet sweet "Hello, World"

Now let's look at serving an html file. Create a file called "style.html" in /MyWebApp/templates. Put this HTML into it:
<!DOCTYPE html>
    <title>EE Tutorial</title>   
      <div class="container">
        <h1 class="logo">Experts Exchange</h1>
    <div class="container">
      {% block content %}
      {% endblock %}

Open in new window

The {% block content %} lets you "insert" other pieces of HTML so you don't have to keep writing the same code over and over again. Now lets make a "index.html" file in /MyWebApp/templates/. Put this HTML into it:
{% extends "style.html" %}
{% block content %}
  <div class="jumbo">
    <h2>"The ride never ends"<h2>
    <h3>- Mr. Bones<h3>
{% endblock %}

Open in new window

As you can see this piece of html will be 'extended' or 'inserted into 'style.html' which is pretty sweet because there are endless possibilities you can do such as creating one master html file and linking a bunch of different components so you don't have to keep rewriting them.

How do we show this html file on http://localhost:5000/ ? Easy! We use render_template(). This Flask function looks for the specified file in the 'templates' folder and loads it for us.

Lets edit your "" file again so it shows these changes:
from flask import Flask, render_template
app = Flask(__name__)

def index():
    return render_template("index.html")

if __name__ == "__main__": = True)

Open in new window

Save and start up your python code ("python.exe" or "./" or "python" and go to http://localhost:5000/ and you can see your new html being processed!

If you spot any issues with the code/have any suggestions post in the comments!

Pasha KravtsovSupport Engineer

Comments (1)




Congratulations! Your article has been published.

Page Editor

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.

Get access with a 7-day free trial.
Continue Growing Your Skills and Your Career
  • Interact with leading experts on your specific technology problems.
  • Receive the guidance of experienced professionals.
  • Learn from troubleshooting others have experienced.
  • Gain knowledge from a library of courses, all included.