Introduction to WebApps using Flask Micro Web framework

Web applications are highly in demand because it is platform-independent, easily upgradable, only web browser required in order to use WebApps, etc. features. Flask is Python's microframework to developing web applications. In this article, we will create our first Hello-world WebApplication using Flask only.

What we need to install

  • Python 3 or higher version. Click here to download/Install
  • PIP - It comes by default with Python for Windows. On Linux, you can install by following commands -
    • Debian/Ubuntu – sudo apt install python3-pip
    • Redhat/CentOS/Fedora – sudo yum install python3-pip
  • Virtualenv (To run multiple project on a single host without any conflict). Install by running pip3 install virtualenv

 

What is Python

Python is a programming language that is very popular for Data Science, Machine Learning, Web development, Artificial intelligence. It is very easy to understand if we compare it to other programming languages like Java, C++, etc. 

This is the StackOverflow report of top 10 programming languages in 2020 -

image

 

What is PIP

PIP is Python's package manager used to install required packages for your projects/ Web Applications.

PIP IMPORTANT COMMANDS - 

  • pip install <package name>
    To install a package just type the name of the package after pip install.
  • pip uninstall <package name> – to remove packages
  • pip freeze > requirements.txt – this will create a list of all packages you have installed for your project.
  • Simply take this requirements.txt file and run pip install -r requirements.txt on another computer and you're ready to run your application on another computer. No need to install packages manually.

 

Creating a separate project using Virtualenv

  • Create your project folder -
    mkdir FlaskProject01
    cd FlaskProject01
  • Create your virtual environment - 
    virtualenv -p python3 <project_env>
  • Switch to the virtual environment you've created just now
    For Windows -
    ./project_env/scripts/activate
    For Linux -
    source ./project_env/bin/activate

 

[C:\Users\kamal\FlaskProject01] $ virtualenv -p python3 project_env
-- OUTPUT --

created virtual environment CPython3.8.2.final.0-64 in 1497ms
  creator CPython3Windows(dest=C:\Users\kamal\FlaskProject01\project_env, clear=False, global=False)
  seeder FromAppData(download=False, pip=latest, setuptools=latest, wheel=latest, via=copy, app_data_dir=C:\Users\kamal\AppData\Local\pypa\virtualenv\seed-app-data\v1.0.1)
  activators BashActivator,BatchActivator,FishActivator,PowerShellActivator,PythonActivator,XonshActivator
[C:\Users\kamal\FlaskProject01] $
[C:\Users\kamal\FlaskProject01] $ .\project_env\Scripts\activate

How to confirm that your virtual environment is activated or not (You will see the name of virtual env you've created on the terminal like this) - 

image

 

Now we are ready to start our first project named FlaskProject01

 

Creating our first python file app.py

I assume that you're in the FlaskProject01 folder.

 

Let's create a file named app.py
Windows - 

New-Item -Name app.py

Linux -

touch app.py

I'm opening this folder on my favorite text editor VS Code. You can use any of your favorites.

# APP.PY
from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
    return "Hello From TechAware"

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

This application has 1 requirement as you may guess, FLASK. Let's install it - pip install flask and it's installed.

RUNNING THE APPLICATION - 

On your Virtual environment inside the FlaskProject01 folder run python app.py and there we go. The application running successfully as you can see the output on the terminal.

image
RUNNING ON VS CODE

 

image
OUTPUT ON BROWSER

Please note that the default port used by Flask is 5000 so you need to type localhost:5000 on your browser to get the output. To change this port according to your need, you can pass port argument in app.run(port=8080)

I have this code saved on my Github if you need to reference it. Please have look at this https://github.com/TechAwareIn/FlaskProject01.git

Please check Part-2 of this article where I have demonstrated what these lines meaning in detail.

Introduction to WebApps using Flask Micro Web framework Part  2

On this page
Kamal Kumar @techaware
Posted on October 04, 2020
449  Views   •   118 Likes