Hello World in Flask

“Hello World” is really first program in every programming language. In this article, we will write it in flask, but to remind you flask is not a programming language. Most of the programming languages displays Hello World in terminal, but here we will display Hello World in the browser. This will be easy to understand for readers who have basic understanding of python programming language and web application.

What is Flask?

Flask is a python micro-framework for development of web applications and APIs. It provides back-end facilities for web development. Jinja templates can be used for writing HTML with logic, which provides power in normal HTML. Flask is written in python, so we have to write python code in order to write this web application. Here python is a programming language. By mentioning python, we are referring to python3.

Setting up Environment

First we need to install python. You can simply download it here. After installation, check whether it is available to use or not.

$ python --version
Python 3.10.8

If output with version greater then 3 is shown then you are ready to go.

Sometimes it does not shows then you can try

python3 --version

Even this is not working but surely python is installed in your system then you may have to add path in environment variable.

Create a project folder, name whatever you want. I will create hellofk. Then navigate into that folder.

Now we are going to create a virtual environment, where all the necessary packages will be install and store. venv is a python package responsible for creating virtual environment.

Note: Virtual environment is not necessary but it provides isolated environment for a project.

python3 -m venv venv

If this command is not working in your machine, first install pip or pip3 and install venv using pip as

pip install venv

Now we have venv directory in hellofk directory. we will activate virtual environment as

source venv/bin/activate  # Unix or Linux or Mac
venv\Scripts\activate     # Windows

After successfully executing this command we will have terminal like. That means now we are in virtual environment.

fig. terminal showing activated venv

Okey, if all these are completed, we will install flask using pip and continue to our project.

pip install flask  # installing flask under venv

Creating first Flask App

create a file app.py and open it in your favorite text editor and write following code:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
 return "Hello World"
 
if __name__ == "__main__":
 app.run()

Here,

• First section import Flask from flask package. Flask is class and it is used to create instance of web application.
• Second section initialize app as an instance of class Flask.
• Third section means we have ‘/’ route in web app that is when we visit webapp, in homepage hello_world() function is executes and it return “Hello World” to that page in browser. That means we will see Hello World text in browser. Route are the available end points in our web app.
• Fourth section is main() function in python. Control initially goes to that section and our app will be run if app.py is executed.

Running Flask App

Every application have a single entry point. For our terminal to know entry point of our app, we need to set FLASK_APP environment variable. To do so

export FLASK_APP=app.py

Now, run flask app

flask run

fig. terminal on flask run

Alternatively, you can simply run

python3 app.py

fig. terminal while running app.py

Output shown in the browser is

fig. ‘Hello World’ in browser

Note: By default app will run in development server and localhost port 5000.

Modifications

Also, we can change host and port like

if __name__ == "__main__":
 app.run(host="0.0.0.0", port=4000)

Then output while running application will be

fig. terminal with changed host and port

fig. output with custom port

To give clear overview of how route works, lets create another route in above application

@app.route("/welcome")
def welcome():
 return "Welcome to /welcome route"

Now the output in 127.0.0.1:4000/welcome is look like

fig. output in ‘/welcome’ route

The content we write in return will be input for html. So we can write html code in it. changing hello_world() as

@app.route("/")
def hello_world():
 return "<h1>Hello World</h1>"

then the output on browser is

fig. output with h1 tag

Also we can implement the concept of Model View Controller. Instead of just writing content to be shown in browser in return statement, we can call html file. To do so, create templates directory in hellofk directory and write index.html page as:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World from template.</h1>
  </body>
</html>

Now, change hello_world() function as

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

For that, we need to import render_template from flask.

Now we are able to see title and html content written in index.html as

fig. output using template

As already mentioned we can insert logic to html as

{% for i in [1, 2, 3, 4, 5]%}
     <h1>{{i}}. Hello World from template.</h1>
{% endfor %}

fig. output using for loop in index.html

Final code we have is

# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def hello_world():
 return render_template("index.html")
 
@app.route("/welcome")
def welcome():
 return "Welcome to /welcome route"
 
if __name__ == "__main__":
 app.run(host="0.0.0.0", port=4000)

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
   {% for i in [1, 2, 3, 4, 5]%}
     <h1>{{i}}. Hello World from template.</h1>
   {% endfor %}
  </body>
</html>

And file structure is looks like

fig. project file structure

Finally, we completed Hello World project, may be more than that — skills and patterns that are useful for large projects as well. We look little bit on MVC and Jinja template — powerful html. That’s all for now.

Thank You!