Flask Web App Framework with Python

Updated 13 April 2022

There has been uncovered a new worthwhile step on the Python Journey thanks to the help of my co-worker and forum superstar Owen. That step is the Flask Web App Framework for Python. This framework is going to allow you to do things like display variables easily from a Python script onto a webpage. That webpage could then be accessed from any machine on your network and respond dynamically to the data. Simply a framework is a code library created to make a developer's life easier when it comes to building reliable, scalable and maintainable web applications.

There are a number of frameworks for Python and Flask is one of the best created by Armin Ronacher an absolute Austrian wiz who has very contemplative thoughts and writing web blog. Anyhows the contents of this tutorial can be seen below.

- How to Install Flask Framework to Python
- Hello World Example
- Date and Time Example
- Create A Shortcut on your Phone for IOS or Android to get to this Webpage
- Next Step
- Download the Codes

There are several related tutorials on our website to help you become a coding virtuoso. A great place to start would be Python Rundown and Main Windows and Python and MicroPython - Compare and Access. These will also tell you locations to download the programming language Python and places to access online Python emulators. Python is a great language to utilise with Raspberry Pi Boards such as Raspberry Pi 4 Model B 8GB which are microprocessors that can easily fit on the palm of your hand!

As always if you have any questions, queries or things to add please let us know your thoughts!


How to Install Flask Framework to Python

For anyone who has navigated through the Python Workshop this process will seem very familiar to you particularly in regards to Installing Python Packages. So open up your command prompt and type the following into the console and then press enter.

pip install flask

As soon as you press enter if everything worked correctly you will see the following below occurring in your console on your computer. Having completed this you will be ready to use Flask in your codes. If you run into any issues with this check out the troubleshooting process and requirements to install using Pip that can be found here.  

Console Install For Flask


Hello World Example

Now it is time to use this new functionality to actually create some codes. So let us start off easy by creating a webpage that can be accessed on the local network which will say a Hello World text string to us. Below is the code which we will type into the Python Programming Window. Each line has been annotated with comments so it can be easily understood the process being followed.

Code
  
Having written this out and saving it as a Python file you can now execute/run the code. This will open up the Python Terminal and produce the following lines of text to it which can be seen in the image below. 

Result of Code to IDLE
 
This now means we have now created a webpage that can be accessed from our current machine or anywhere on the local network from our Python Codes. Pretty Neat! If you want to stop the webpage you can use CTRL C on this page. So to access the information on a browser we will need two bits of information, the IP address of the computer that is running the script and the port that the information is being sent from.

An IP (internet protocol) address is a unique address that identifies a device on the internet or a local network and is different for all machines. An example of an IP address would be 100.121.11.232 and depending on the computer being used there are a number of ways to find out your devices IP address. If you want to access the information from the computer that is executing the script you can simply use the text 'localhost'.

Simply a port is an interface between the computer and other computers or peripheral devices. From the original script, we can see that Port = 88. This means the port that is transmitting the information which can be accessed by a web browser is 88.

So, knowing the above, if you navigating to a browser on the machine running the code and go to http://localhost:88 you will be met with the “Hello World! Best wishes, your web browser!” message. Seeing that message, as you can below when I typed that address into Firefox browser, you will know it all worked. You can also view the page from another machine on the same network using the IP address of the machine that the script is installed on and going to the same address.  

Firefox Result


Date and Time Example

So this will allow us to send the current date and time from our computer to the local network which can be accessed via any machine through a browser. What this really means is if you have a device without a real-time clock (RTC) but has access to the local network you will be able to provide it with accurate time information.

This is the next step when using the Flask Framework, which will open up the possibility of displaying Python variables and all sorts of data on your own webpage. To do this we will use a part of the Flask Framework called TemplatesBelow is the code which we will use to set this up. Each line has been annotated with comments so it can be easily understood the process being followed.

Date-Time Flask Code in Programming window
 

Now if we run the code as it currently stands you will receive errors. That is because this code needs more information to run correctly, in particular information about where things will go on the webpage, a template effectively. To do this we in the same directory with hello-template.py , create a subdirectory called templates. See below for this having occured.

Creating a sub folder called templates
 

Now click on that templates subdirectory. Here you will create a file (using notepad makes this easy) called main.html and type the code which you can see below. The code here is in an HTML format that references information from templateData to fill the web page. Anything in double curly braces within the HTML template is interpreted as a variable that would be passed to it from the Python script via the render_template function. See below for all this occurring and make sure you save your main.html file.

Notepad being used to create a HTML Template for our Code
 

Now you can go back to the Python programming window and run your code. If it has all been done correctly below is what will display to your Python IDLE shell.

Python Idle Shell running code

 
Then we can open up our web browser (Firefox in my example below) and type http://localhost:88 and it will display the exact time and date from your computer to the webpage which can be accessed anywhere on your local network.

Hello World Here is the Date and Time


Create A Shortcut on your Phone for IOS or Android to get to this Webpage

Now, this is wonderfully easy to do and will allow you to check your webpage from your mobile device so long as it is connected to the local network. You can also do this just by typing in the website name directly into your mobile browser but this will make it a simple one button click. Simply by opening up a browser and selecting the options button you will find the Add to Home Screen button. Clicking on this option and then pressing add will create a Home Screen button which you can click on to access your created website page instantly. See below for the process with a phone running Apple iOS (a very similar process is done on Android Phones). You will need to make sure that your phone is connected to your local network for this to work.

Adding App Phones


Next Step

So the next intuitive step is to create a button in the webpage which we when turned on or off will do certain things. Say if we hooked it up correctly we could use this button to open or close our garage door. Another option is to turn on and off LED lights which are powered by a Raspberry Pi. This will be the next exploration. Here is an article worth a read.


Download the Codes

Below you can find all the code for the above examples. You will be able to run the codes here on your own computing device and modify the code at your leisure. Open the scripts with Python IDLE Shell and run them using the Python Programming Window.

Attachment - Codes_for_Flask.zip

Have a question? Ask the Author of this guide today!

Please enter minimum 20 characters

Your comment will be posted (automatically) on our Support Forum which is publicly accessible. Don't enter private information, such as your phone number.

Expect a quick reply during business hours, many of us check-in over the weekend as well.

Feedback

Please continue if you would like to leave feedback for any of these topics:

  • Website features/issues
  • Content errors/improvements
  • Missing products/categories
  • Product assignments to categories
  • Search results relevance

For all other inquiries (orders status, stock levels, etc), please contact our support team for quick assistance.

Note: click continue and a draft email will be opened to edit. If you don't have an email client on your device, then send a message via the chat icon on the bottom left of our website.

Makers love reviews as much as you do, please follow this link to review the products you have purchased.