Objectives of this article
- Know what Flask is all about
- Understand what virtual environment is and how to create one in Python.
- Build a one page app with flask
- Adding HTML to your app.
Flask Web Development
Flask is a Python Framework for Back End Web Development. Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja and has become one of the most popular Python web application frameworks.
It is commonly referred to as a micro-framework when compared to Django though you can build a strong and great app with it.
While defining Flask above, I used some terminologies, let me explain them now.
- WSGI web application framework: The Web Server Gateway Interface (WSGI, pronounced whiskey) is a simple calling convention for web servers to forward requests to web applications or frameworks written in the Python programming language.
- Werkzeug: Werkzeug is a comprehensive WSGI web application library. It began as a simple collection of various utilities for WSGI applications and has become one of the most advanced WSGI utility libraries. Flask wraps Werkzeug, using it to handle the details of WSGI while providing more structure and patterns for defining powerful applications.
- Jinja : Jinja, also commonly referred to as “Jinja2” to specify the newest release version, is a Python template engine used to create HTML, XML or other markup formats that are returned to the user via an HTTP response. Jinja2 is useful because it has consistent template tag syntax and the project is cleanly extracted as an independent open source project so it can be used as a dependency by other code libraries.
A Virtual Environment is an isolated working copy of Python which allows you to work on a specific project without worry of affecting other projects It enables multiple side-by-side installations of Python, one for each project.
You can check the python’s documentation on virtual environment.
Steps in Enabling Virtual Environment
- Open a terminal, if you’re using Windows you can open command prompt instead or your IDE’s terminal.
- Setup the pip package manager.
- Install the virtualenv package.
- Create the virtual environment.
- Activate the virtual environment.
- Deactivate the virtual environment.
- Optional: Make the virtual environment your default Python.
- More: Python virtualenv documentation.
If you’re just installing Python, download and install Python, ensure you install it correctly.
Setting the pip package manager :
If you’re using Windows:
py -m pip --version
## You should get something like the one below.
## pip 9.0.1 from c:\python36\lib\site-packages (Python 3.6.1)##You can upgrade your pip by writing
py -m pip install --upgrade pip
If you’re using Mac or Linux:
python3 -m pip install --user --upgrade pippython3 -m pip --version
## pip 9.0.1 from $HOME/.local/lib/python3.6/site-packages (python 3.6)
python3 -m pip install --user virtualenv # For Mac and Linux userspy -m pip install --user virtualenv # For Windows user
Creating the virtual environment
py -m venv env # For Windows users
python3 -m venv env # For Mac and Linux users
The second argument env is the name of the virtual environment which can be anything. All of this should be done in your working directory.
Activating the virtual environment
source env/bin/activate #For Mac and Linux users
.\env\Scripts\activate #For Windows users.
Note : env used in the command above should be replaced with whatever you named your virtual environment.
To confirm that you’re in the virtual environment
which python # For Windows users
.../env/bin/pythonwhere python # For Mac and Linux users
Deactivating your virtual environment
To leave the virtual environment, just type deactivate.
Next is to install the necessary libraries
For this project we need to install flask
pip install flask
To confirm that you have flask installed, type in your terminal
python “import flask; print(flask.__version__)”
If you noticed what I did above, I used the python keyword, which opens ther shell for me, but I added some parameters seperated by semi-colon in a string which is what I want to write in the shell, the semi-colon breaks each expression line by line. This is useful if I want to just confirm something in this case if flask is installed.
Now we’ve confirmed that we have flask and it’s dependencies installed.
Let’s build our Flask App
In your working directory, create a new python file and save it. I’ll be saving my file app.py
Next is to run the app.
As we can see we’ve built our flask app.
Let’s look at each line deeper
In line 1: We import the Flask from flask which is what we used to create our app.
In line 2: We created our class decorator and save it as Flask, this is a standard convention.
In line 3: We used the app to decorate our function. You can read more on decorators. We route the decorator to the home page of the site. I could route it to the about endpoint by doing app.route(‘/about/’) .
In line 4: We created a function and called it home which has no parameter.
In line 5: We returned Hello world! in the function.
Lastly, we used the run method on our decorator.
In the terminal
I used the set keyword (If you’re using Mac or Linux, use export instead)
I set the FLASK_APP to the script that runs my app excluding the extension which will always be .py note the convention. Uppercase, no space, note that all of this must be done in the root directory of your project which your run file is. Note that by default FLASK_APP in the configuration of flask variable is set to app or wsgi so if you're running your script with any of this two you might not need to set it.
I also set FLASK_ENV to development, note that in this case we’re just developing and not deploying, note by default it’s in the production
All what we set in the terminal are configurations that flask will use to run our app.
Lastly, I run the app.
You can see the url of the app
Let’s Add HTML To Our Page
Flask uses Jinja2 engine. Firstly, we create a templates folder and put all our HTML codes in it.
In our .py file, we’ll write
You’ll notice some changes in the file now.
- We import an additional function, called render_template which we use to render our HTML files. It’s what Jinja uses to get the html in our view function.
- Above our home function we have 2 decorators. What these do is that the page has two endpoints. if I go to the home endpoint, I’ll get the same page.
- There’s a new decorator(route), this routes the function to the about endpoint. And the about function which we use to perform this.
In the first html code, home.html we have
- Within the body tag, is what we see on the browser
- The head tag describe the meta data of the web page.
- In between the body tag, I put the h1, p, a and footer tags.
Next is for us to run the app.
Since we’ve written some file which is used in the project outside the .py file, we need to run it again. But all we need to do is type flask run in the terminal
The first two images are the same because the home view function has two endpoints ‘/’ and ‘/home/’. Note that the presence of the trailing back slash in the route from the view function allows flexibility, i.e I can decided to add it or not in the browser.