{"id":139588,"date":"2020-11-04T12:46:59","date_gmt":"2020-11-04T12:46:59","guid":{"rendered":"https:\/\/www.softwaretestinghelp.com\/?page_id=139588"},"modified":"2025-04-01T08:34:40","modified_gmt":"2025-04-01T08:34:40","slug":"python-flask-tutorial","status":"publish","type":"page","link":"https:\/\/www.softwaretestinghelp.com\/python-flask-tutorial\/","title":{"rendered":"Python Flask Tutorial – Introduction To Flask For Beginners"},"content":{"rendered":"

This introductory Python Flask tutorial explains what is Flask, installation of Python, Virtualenv, Flask Hello World example with a section on code examples, debugging, and testing:<\/strong><\/p>\n

Website development is more of an art than a skill. It requires patience and diligence, along with perseverance, courage, and dedication to create what’s necessary for it to be a real success. These days, it is essential for learners to get to speed as soon as possible.<\/p>\n

We have created this Python Flask tutorial for the students to get up to speed and implement simple as well as complex web programming using Python 3.<\/p>\n

<\/em><\/strong><\/p>\n

\"Flask<\/a><\/p>\n

This Python Flask tutorial is more like a flask beginner tutorial, which will cover the installation of Python, Virtualenv, and other essential packages. In this series of tutorials, we will also install Flask along with the other necessary Flask plugins. We have also included a section on code debugging, testing, and continuous integration using Git Actions.<\/p>\n

List Of Tutorials In This Flask Series<\/h2>\n

Tutorial #1:<\/strong><\/span> Python Flask Tutorial – Introduction To Flask For Beginners<\/a>
\nTutorial #2:<\/span><\/strong> Flask Template, Form, View, And Redirect With Examples<\/a>
\nTutorial #3:<\/strong><\/span> Flask Database Handling – How To Use Flask With A Database<\/a>
\nTutorial #4:<\/span><\/strong> Flask App And Flask Project Layout With Blueprint & Bootstrap<\/a>
\nTutorial #5:<\/span> <\/strong>Flask Design Patterns And Best Practices For Web Applications<\/a>
\nTutorial #6:<\/span><\/strong> Flask API Tutorial With Example | Extending Flask With APIs<\/a>
\nTutorial #7:<\/span><\/strong> Django Vs Flask Vs Node: Which Framework To Select<\/a>
\nTutorial #8:<\/span> <\/strong>Top 31 Popular Python Flask Interview Questions With Answers<\/a><\/p>\n

\n

What Is Flask<\/h2>\n

Flask is a web development framework.<\/strong> It is a framework with a built-in development server and a debugger.<\/p>\n

Flask framework in itself is different from the other archetypes as it allows web developers to be flexible and to comfortably accommodate the frequently released changes in the software development community.<\/p>\n

What Is Flask Used For<\/h3>\n

We use the Flask framework for developing Web Applications in Python programming language. It integrates with other third-party services and APIs to bring richness and meaning to the application under development. Flask’s core concepts are simple, and it has a tiny footprint.<\/p>\n

Let’s start with this Python Flask tutorial to understand web development with the help of a Flask GitHub repository. However, before proceeding, please clone the project from Github for easy follow up on the discussed code examples.<\/p>\n

Prerequisites<\/h3>\n

Other than the mentioned headings in this section, we recommend creating a Github Account. Let’s proceed with the below-mentioned steps in the prerequisites.<\/p>\n

Step 1: Install Python<\/strong><\/p>\n

Check whether you have installed Python 3 or not. If not, then download Python 3 from\u00a0here<\/a> and install it as per your Operating System.<\/p>\n

Step 2: Create a Python Virtual Environment<\/strong><\/p>\n

Create a virtual environment using the below command.<\/p>\n

python3 -m venv venv<\/pre>\n
Use the below command to activate the Python virtual environment.<\/strong><\/p>\n
source venv\/bin\/activate<\/pre>\n
We have given an example of activation and deactivation of the virtual environment below.<\/p>\n
\"activation<\/a><\/p>\n
All the subsequent commands in this tutorial should run in an activated virtual environment. Install the wheel package so that we can build wheels inside the virtual environment.<\/p>\n
pip install wheel<\/pre>\n
Step 3: Flask Download And Insall<\/strong><\/p>\n
We need to perform the Flask download steps and install Flask using the below-mentioned steps.<\/p>\n
Now install Flask.<\/p>\n
pip install flask<\/pre>\n
Some of us like to work along with the latest source code changes. We can use the below-given command to install with the latest changes to the sources of Flask.<\/p>\n
Make a temporary directory.<\/p>\n
mkdir tmp<\/pre>\n
Now install Flask from the Github repository. You need to remain connected to the internet for the below command to work.<\/p>\n
pip3 install -e git+git@github.com:pallets\/flask.git#egg=flask<\/pre>\n
Look at the console outputs to check the successful installation. Now check if we can access Flask commands.<\/p>\n
flask --help<\/pre>\n
You might see some exceptions about the absence of a Flask application. However, neglect those as we have not created any Flask app. Our app is an instance of Flask, which is a wrapper on the Werkzeug web framework and Jinja templating engine.<\/p>\n
Werkzeug<\/strong><\/p>\n
Werkzeug is a WSGI toolkit. WSGI is only a calling convention for web servers to forward web requests<\/strong> to web applications written in Python programming language.<\/p>\n
Jinja<\/strong><\/p>\n
Templating is an essential skillset of web developers. Jinja is a fully-featured and popular templating engine for Python. It is quite an expressive language and provides a robust set of tools to template authors.<\/p>\n
Step 4: Install MongoDB<\/strong><\/p>\n
Follow the below-mentioned steps to install MongoDB. We have outlined the steps to install it in a Debian based Linux. If you are using another operating system, then access the\u00a0link<\/a> and install as per the intended operating system.<\/p>\n
Install gnupg for importing MongoDB public GPG key.<\/strong><\/p>\n
sudo apt-get install gnupg<\/pre>\n
Now import the key using the command below.<\/strong><\/p>\n
wget -qO - https:\/\/www.mongodb.org\/static\/pgp\/server-4.2.asc | sudo apt-key add -<\/pre>\n
Create the sources list file as per your Linux distribution. We have added the list of sources as per Debian.<\/strong><\/p>\n
echo \"deb http:\/\/repo.mongodb.org\/apt\/debian buster\/mongodb-org\/4.2 main\"\r\n | sudo tee \/etc\/apt\/sources.list.d\/mongodb-org-4.2.list<\/pre>\n
Run update command<\/strong><\/p>\n
sudo apt-get update<\/pre>\n
Now install MongoDB, using the below command.<\/strong><\/p>\n
sudo apt-get install -y mongodb-org<\/pre>\n
Once the installation is successful, start MongoDB using the below command.<\/strong><\/p>\n
sudo systemctl start mongod<\/pre>\n
Check the status of MongoDB, using the command below.<\/strong><\/p>\n
sudo systemctl status mongod<\/pre>\n
Now ensure that mongod automatically starts at system reboot by issuing the below-shown command.<\/strong><\/p>\n
sudo systemctl enable mongod<\/pre>\n
Now check if you can connect to the MongoDB server using mongo client.<\/strong><\/p>\n
mongo<\/pre>\n
In the mongo shell, try using the help and show dbs commands.<\/p>\n
Create A Flask App<\/h3>\n
Use the command below to install flask-appbuilder and mongoengine.<\/strong><\/p>\n
pip install flask-appbuilder\r\npip install mongoengine\r\npip install flask_mongoengine<\/pre>\n
Create a skeleton app with the values shown as comments in the below code snippet.<\/strong><\/p>\n
flask fab create-app\r\n# Give the following values in the command line questionnaire\r\n# Application Name: flaskTutorialApp\r\n# EngineType : MongoEngine<\/pre>\n
We will see the output similar to the one given below.<\/p>\n
Your new app name: exampleApp\r\nYour engine type, SQLAlchemy or MongoEngine (SQLAlchemy, MongoEngine) \r\n[SQLAlchemy]: MongoEngine\r\nDownloaded the skeleton app, good coding!<\/pre>\n
Have a look at the layout of the project and the app. We have shown the output of the tree command below.<\/strong><\/p>\n
\"output<\/a><\/p>\n
Let’s have a look at the Flask config file. It is a default config generated as the result of the last command. Uncomment Cyborg<\/strong> theme, as shown below.<\/p>\n
# Theme configuration for Cybord=g\r\n# these themes are located on static\/appbuilder\/css\/themes\r\n# We can create our own and easily use them by placing them on the same dir structure to override\r\n#APP_THEME = \"bootstrap-theme.css\" # default bootstrap\r\n#APP_THEME = \"cerulean.css\" # cerulean\r\n#APP_THEME = \"amelia.css\" # amelia theme\r\n#APP_THEME = \"cosmo.css\" # cosmo theme\r\nAPP_THEME = \"cyborg.css\" # cyborg theme\r\n#APP_THEME = \"flatly.css\" # flatly theme<\/pre>\n
To run the skeleton app, use the below-given command on the terminal.<\/p>\n
flask run<\/pre>\n
Flask Hello World<\/h3>\n
To create your first program in the flaskTutorialApp, open file views.py under the app directory and add the following code. Look for import statements given in the file. Add these statements if not already present.<\/p>\n
from flask_appbuilder import BaseView, expose\r\n\r\nfrom app import appbuilder\r\n\r\nclass HelloWorld(BaseView):\r\n    """ This first view of the tutorial """\r\n    route_base = "\/hello"   \r\n\r\n @expose("\/")\r\n    def hello(self):\r\n        return "Hello, World! from Software Testing Help"\r\n\r\n# at the end of the file\r\nappbuilder.add_view_no_menu(HelloWorld())<\/pre>\n
Save the file after adding the above source code. Go to the project’s root directory and use the below command to run the Flask’s development server.<\/p>\n
flask run<\/pre>\n
Now navigate to http:\/\/localhost:5000\/hello\/ to see the output in the browser.<\/p>\n
Debugging<\/h3>\n
Currently, the development server is not running in the Debug mode. Without debugging mode, it is difficult to find the errors in the source code of the Flask Application.<\/p>\n
Debug Mode in Flask results in the following:<\/strong><\/p>\n
    \n
  1. Debug mode activates Automatic reloader. It means that we need not restart the development server after we make changes in the source code of the application.<\/li>\n
  2. Debug mode activates the Python debugger. We can inspect the values of variables during the Exception.<\/li>\n
  3. Debug mode enables Flask application debugging. We can check the values of various variables in debugging sessions.<\/li>\n<\/ol>\n
    Stop the development server if it is already running. You can use CTRL + C or Keyboard interrupt to do the same.<\/p>\n
    Use the following code to enable the debug mode and run the development server temporarily.<\/strong><\/p>\n
    FLASK_ENV=development flask run<\/pre>\n
    Search the console for Debugger PIN and make a note of it.<\/p>\n
    Now let’s change the above written HelloWorld view with the following lines of the code snippet. Notice that we have introduced a custom exception.<\/p>\n
    @expose(\"\/\")\r\ndef hello(self):\r\nraise Exception(\"A custom exception to learn DEBUG Mode\")\r\nreturn \"Hello, World! from Software Testing Help\"<\/pre>\n
    Navigate to http:\/\/localhost:5000\/hello\/, and you will see that the application has raised an exception. The browser displays the stack trace, as shown below.<\/p>\n
    \"Flask<\/a>
    Flask Debug View in the Browser<\/figcaption><\/figure>\n
    Furthermore, look at the console where the development server is running. You will find that this time, the changes in the views.py are automatically detected, and the debug server restarts by itself. Now we need not manually restart it.<\/p>\n
    The console will have lines, as shown below. We need to note down the Debug PIN for later.<\/strong><\/p>\n
    * Detected change in '\/work\/sth\/flaskTutorialApp\/app\/views.py', reloading\r\n2020-06-02 14:59:49,354:INFO:werkzeug: * Detected change in\r\n '\/work\/sth\/flaskTutorialApp\/app\/views.py', reloading\r\n * Restarting with stat\r\n2020-06-02 14:59:49,592:INFO:werkzeug: * Restarting with stat\r\n * Debugger is active!\r\n * Debugger PIN: 150-849-897\r\n<\/pre>\n
    Now check the stack trace in the browser and go to the last line. Click on it to expand its view and click on the CLI icon to open the shell in interactive mode.<\/p>\n
    \"Debug<\/a>
    Debug Mode Interactive Shell Icon<\/figcaption><\/figure>\n
    Once you open it, You will see that the browser will show a prompt for Debug PIN. Give the Debug PIN and click on OK.<\/p>\n
    \"Debug<\/a>
    Debug Mode Debug PIN<\/figcaption><\/figure>\n
    Once we proceed ahead after giving the Debug PIN, we can access the interactive shell.<\/p>\n
    We access the shell from within the browser and can inspect the values of variables to find the cause of the Exception and handle the error in a better way. Please look at one of the examples shown in the image below.<\/p>\n
    \"Variables<\/a>
    Variables in Debug Mode<\/figcaption><\/figure>\n
    Now change the code in view.py, as shown below. Note that we have commented on the line that had the raised Exception.<\/p>\n
    @expose(\"\/\")\r\ndef hello(self):\r\n      # raise Exception(\"A custom exception to learn DEBUG Mode\")\r\n      return \"Hello, World! from Software Testing Help\"<\/pre>\n
    Testing The Flask Application<\/h3>\n
    Now let’s write our first test for the Flask application that we are developing. First, install the PyTest<\/a>. PyTest is a testing framework. It helps us to write better code.<\/p>\n
    Moreover, just because we can write unit tests while developing our applications, it is possible to follow the TDD approach. TDD stands for Test-Driven Development. In our subsequent tutorials of this series, we shall always write tests first and develop our views or models.<\/p>\n
    Install PyTest<\/strong><\/p>\n
    pip install pytest<\/pre>\n
    Now create a directory called tests inside the app directory and in that create a file called test_hello.py. Let’s write our first unit test to test our view.<\/p>\n
    Copy the following code snippet and paste it into test_hello.py.<\/strong><\/p>\n
    #!\/usr\/bin\/env python\r\nfrom app import appbuilder\r\nimport pytest\r\n\r\n@pytest.fixture\r\ndef client():\r\n    """ A pytest fixture for test client """\r\n    appbuilder.app.config["TESTING"] = True\r\n    with appbuilder.app.test_client() as client:\r\n        yield client\r\n\r\ndef test_hello(client):\r\n    """ A test method to test view hello """\r\n    resp = client.get("\/hello", follow_redirects=True)\r\n    assert 200 == resp.status_code<\/pre>\n
    Use the below pytest command to run the tests. PyTest automatically collects the Tests and displays the results on the standard output.<\/p>\n
    \"PyTest<\/a>
    PyTest results on Command Line<\/figcaption><\/figure>\n
    Create A GitHub Workflow<\/h3>\n
    We use Git Actions to create a CI\/CD workflow for our sample application. Follow the below-mentioned steps for your project.<\/p>\n
    Step 1: Navigate to the repository page on GitHub. Click on Git Actions.<\/strong><\/p>\n
    \"Click<\/a>
    Click on Git Actions<\/figcaption><\/figure>\n
    Step 2: Scroll down on the page and find an existing workflow template for a Python package.<\/strong><\/p>\n
    \"Click<\/a>
    Click on Python Package Git Workflow<\/figcaption><\/figure>\n
    Step 3: Setup the Python package Workflow.<\/strong><\/p>\n
    \"Setup<\/a>
    Setup Python package Workflow<\/figcaption><\/figure>\n
    Step 4: Once the python-package.yml workflow configuration opens, update it based on the given yaml additional tag values.<\/strong><\/p>\n
    name: flaskTutorialApp\r\njobs:\r\n build:\r\n  runs-on: ubuntu-latest\r\n  strategy: \r\n  matrix:\r\n   python-version: [3.7, 3.8]\r\n   mongodb-version: [4.2]  \r\n\r\n  steps:\r\n   - name: Start MongoDB\r\n     uses: supercharge\/mongodb-github-action@1.3.0\r\n     with:\r\n      mongodb-version: ${{ matrix.mongodb-version }}\r\n   # other values<\/pre>\n
    We want to test our Flask application on the latest Ubuntu Linux distribution. In addition to the OS, we want to run our tests only using Python 3.7 and Python 3.8.<\/p>\n
    Step 5: Commit the python-package.yml with the updated values.<\/strong><\/p>\n
    \"Git<\/a>
    Git Actions Python package file<\/figcaption><\/figure>\n
    Step 6: The commit in the previous page takes us to the GitActions jobs.<\/strong><\/p>\n
    \"Click<\/a>
    Click Git Actions<\/figcaption><\/figure>\n
    Step 7:<\/strong> [Optional]<\/p>\n
    On the Github Jobs page for the sample tutorial app, we can create a badge and place it on the README.md file for displaying the build status.<\/p>\n
    Now, whenever the changes are committed to the master branch, Git Workflow, as written in python-package.yml will be followed and run on Git Actions.<\/p>\n
    Conclusion<\/h2>\n
    In this tutorial, we have covered all the base concepts from prerequisites to setting up CI\/CD workflow for a web application developed using Flask – A Python-based web development framework.<\/p>\n
    This tutorial covers all necessary steps such as installing Python, downloading & installing Flask, working with Flask-Appbuilder, testing with PyTest, etc. to get started with web development using Python. The web development community usually compares Flask with another popular Python web development framework called Django.<\/p>\n
    We will explain these differences and will also compare these frameworks in one of the tutorials in this series.<\/p>\n\r\n\t\t\t
    \r\n\r\n\t\t\t\t
    \r\n\t\t\t\t\t
    \r\n\t\t\t\t\t\t
    Was this helpful?<\/h3>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t
    \r\n\t\t\t\t\t\t
    \r\n\t\t\t\t\t\t\t\r\n\t\t\t
    \r\n\t\t\t\t\r\n                \r\n                    \r\n                        
    \r\n\t\t\t\t\r\n                \r\n                    \r\n                        
    \r\n\t\t\t\t\t
    \r\n\t\t\t\t\t\t