Introduction To Flask Web Framework

Flask is a web development framework written in Python. A framework is something that helps to frame or arrange a website in the right way. I’ve started diving deep into Flask today. So, I’ll try to help you learn this framework by writing simple tutorials from what I’ve learned.

Before you start with this tutorial, make sure you know HTML, CSS, as well as Python. These are the prerequisites that you should have in order to learn Flask smoothly.

This article is an introduction to the Flask framework. In this one, we will create a simple web application in Flask to print ‘hello world’ on the screen. We will also learn how to work with HTML files or templates in Flask.

Let’s dive right in.

Creating A Virtual Environment

I prefer creating a virtual environment for doing all the flask projects. If you want to continue without doing this step, feel free to skip this step. Flask will work just fine even if you don’t create a virtual environment.

So, I created a virtual environment called flaskenv on my Anaconda Prompt by typing in the following command:

conda create -n flaskenv python=3.6 anaconda 

It will take some time to complete this process. Once it is done, activate the environment using the following command:

conda activate djangoenv

Now, the virtual environment is ready, and you can install flask here.

Installing Flask

Now, we need to install the flask module in our system.

If you’re using a terminal and the normal version of Python (Python IDLE), use the following command to install Flask:

pip install Flask

If you have any doubts regarding the installation process, check out this Flask installation guide.

If you’re using Anaconda, type in the following command in the virtual environment to install flask:

conda install -c anaconda flask

Once the installation is complete, you can start creating projects using the Flask framework.

First Program In Flask

Let’s create your first program using the flask framework. We will be creating a simple ‘hello world’ app using flask. You can use any code editors as you wish. I’m using the VS Code software for writing code.

Now, create a new folder for your project. I’ve created a folder called ‘demo’. Launch the code editor and open the project folder using it.

Now, create a new file and save it using the name ‘hello.py’.

The first thing we need to do is to import the flask module to the code. So, we’ll write the following line of code for importing Flask.

from flask import Flask

Now, we need to create an app for our Flask project. So, we’ll write the following line of code for that.

app = Flask(__name__)

We use the Flask class that we have imported. We have to pass in a variable called ‘__name__’ as an initializer. This is simply the name of the module that is currently running in Flask.

For example, if you just print this using print(__name__), then it will give the output “hello”. I hope you’ve understood what this variable is.

Now, we need to create something called a route.

A route is simply used to say that if someone visits this webpage, then we should display the following text. Let’s see the code to understand it.

@app.route('/')
def home():
    return 'hello world'

We can use the @app.route() method for defining the rules. Here, we have defined the rule for the homepage (represented by ‘/’ ). Just below that, you can see a function called home(), which returns the string ‘hello world’.

So, what this code block means is that whenever someone visits the homepage of the website, display the string ‘hello world’.

That’s it. We’ve completed writing the code for our hello world program.

For a good practice, you can also include the following lines of code at the end. However, the app will work just fine without these lines.

if __name__ == "__main__":
    app.run()

Now, let’s go ahead and run this program.

Running The Program

If you’re using Windows, go to your command prompt or Anaconda prompt, and navigate to the project directory using the cd command.

cd demo

Now, use the following commands to run the program.

set FLASK_APP = hello.py

This command is used to indicate which file we need to run.

set FLASK_ENV = development

This command will set the environment as development environment. By default, flask will be using the production environment. By using the development environment, the web app will automatically make changes if we make changes in the code.

flask run

This command will run the program.

If you’re using Mac/Linux, use the command export instead of set to run the Flask app.

Now, copy and paste the URL given there to a web browser and hit Enter key. You’ll be able to see the web application running.

That’s it. We’ve created a simple hello world web application using Flask.

Working With Templates In Flask

It isn’t always best to return a string to display something on the webpage. We need the capability to add HTML files along with some CSS and Javascript to make our web apps beautiful. So, let’s learn how to use templates with our Flask web app.

So, first of all, we need to create a new folder called ‘templates’ inside our project folder. This is to let Flask know the location of our template files. Flask uses the Jinja template engine, which helps the web apps to use template files efficiently.

Now, within the templates folder, let’s create a new file called ‘home.html’. Let’s write something on this file.

<h1>This is Home</h1>

Now, let’s go to the hello.py file. Instead of returning the string ‘hello world’, we need to return the HTML file here. For that, we can use a method called render_template().

First of all, import this method from flask. So, change the first line of code to the following:

from flask import Flask,render_template

Now, we can use this method to return the HTML file.

So, change the return statement in hello() function to the following:

return render_template('home.html')

The complete code will look like this:

Now, let’s go ahead and refresh the web page. We will get an output like this:

If it didn’t work, run the program again and check.

That’s how we use templates in Flask framework. Pretty easy, isn’t it?

We’ve covered the most fundamental things about Flask in a simple way. Now, we can move ahead and learn more advanced stuff using Flask.

I hope this article was helpful to you. Flask is an easy framework to learn. Learn more about it and build projects to improve your skills.

Happy coding!

Ashwin Joy

I'm the face behind Pythonista Planet. I learned my first programming language back in 2015. Ever since then, I've been learning programming and immersing myself in technology. On this site, I share everything that I've learned about computer programming.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content