Flask is a python framework suited for developing websites and other web applications. It is easy to install and use Flask . Here we will look at how to run a simple web application using Flask. We will create our applications on localhost. We’ll look at how to deploy a flask application on a live server later. For now we’ll just be keen to create an functional application on localhost
Prerequisites
Before you get started, please ensure you have these:
– Python 3 installed. You can run the command below to check if you have it installed
]$ python3 –version
– Ubuntu 20.04. Python is cross platform though and will work on other Linux distros, Mac and Windows
-Text Editor installed. I use free versions of sublime text or PyCharm IDE for coding in Flask.
Create a simple Flask App
1.Open PyCharm
2. Go to File >> New Project then type the project name. We’ll call ours hello-world.
3.Click Create button.
When this is done, PyCharm installs for you a virtual environment and creates main.py file where you can start typing your code. A virtualenvironment is a tool to create isolated Python environments. This allows you to install python packages you need independently from system installed packages.
PyCharm support three types of virtual environments: virtualenv, pipenv and conda. We’ll use virtualenv
4. Open the main.py file created and copy-paste in the following code
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return 'Hello World!'
if __name__ == "__main":
app.run(debug=True)
5. As soon as you type in the code, the words flask and Flask on line 1 will have a red underline. This is because our virtual environment does not have flask framework installed. There are 2 ways to fix this:
- Method 1: On PyCharm, open Terminal Tab which is located at the bottom of the page. Run the command below to install flask
(venv) $ pip install flask
- Method 2: Place your cursor on top of the word flask and a red colored bulb will appear. Click the bulb and select Install package flask…
6. You have created a simple flask app.
Adding HTML and Static files to your application
However, any practical web app you create will be using HTML files, images and CSS to display pages. To use this, you need to create locations for these additional files. In Flask, HTML files are normally stored on a folder called templates. Static files that do not change like images, documents, CSS and Javascript files are stored.
1.In our working directory, in the same location where your main.py file was created, you need to create two folders called templates and static
2.Once created, create an index.html and template.html file inside templates folder; and a template.css file inside css folder which is under static folder.
Your folder structure will look like this:
-main.py
-templates
-index.html
-header.html
-static
-css
-template.css
The content of the files should be as follows
main.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html")
if __name__=="__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Tutorial</title>
</head>
<body>
{% extends "template.html" %}
{% block content %}
<h1> My First Try Using Flask </h1>
<p> Flask is Fun </p>
{% endblock %}
</body>
</html>
template.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Parent Template</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/template.css') }}">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">First Web App</h1>
<strong><nav>
<ul class="menu">
<li><a href="{{ url_for('home') }}">Home</a></li>
</ul>
</nav></strong>
</div>
</header>
{% block content %}
{% endblock %}
</body>
</html>
You can now save the files and run the flask app again and when you access http://127.0.0.1:5000/, you should see the site below display.
