Hello Web

Reading Time: 4.06 minutes

• Installing Flask
• Using Flask to Create a Server
• The Code
  • The import statement
  • Flask instance
  • Route
• Function Definition
• Summary

Hello guys!

In this chapter, we will be making a simple web page to start our app. Just to give a taste of how to start developing web application in flask.

We are going to install a package and will be needing our virtual environment from here so make sure that your virtual environment is activated.

Installing Flask

After making sure that the virtual environment is activated, let's install flask. Head over to the terminal where the environment is activated and type in the following:

pip install Flask

This will install the flask package for our project.

Installing flask

Installing the flask package adds other dependency packages to our environment so not just the flask library. To check what other packages are installed, you can do

pip freeze

Installed packages with flask

Tips

With our virtual environment activated, we are making sure that the packages we are installing or removing are not affecting our whole computer.

Using Flask to Create a Server

Now getting back with our main.py file, previously we have

Previous main.py content

We will replace it with the following:

from flask import Flask


app = Flask(__name__)

@app.route('/')
def index():
    return "Hello Web!"

Don't worry about the code this time, we will break it down later. The important thing now is we try and see it running.

After that, we can already run our app using

FLASK_APP=main.py flask run

Flask run using main.py

This means our web server is already running at the address http://127.0.0.1:5000.

So let's go over to our web browser and paste the address.

hello web preview

I hope you reached this point. Now let's break down the code.

The Code

Let's get back to the code.

from flask import Flask


app = Flask(__name__)

@app.route('/')
def index():
    return "Hello Web!"

The import statement

On line 1, we imported the Flask object. This is one of ways of importing packages in python.

There are various types of importing in python.

1. Importing from the standard library

This is the simplest way to import modules that come pre-installed with Python. You just use the import statement followed by the module name:

import math

# Use functions from the math module

2. Importing a specific function or variable:

If you only need a specific function or variable from a module, you can import it directly:

from math import pi

# Use the imported constant pi

3. Importing all functions and variables (not recommended):

While technically possible, it's generally not recommended to import all functions and variables from a module using from module import *. This can clutter your namespace and make your code harder to read, especially if you have functions with the same names in different modules.

4. Importing from a package:

import statistics  # Assuming statistics is a module within a package

# Use a function from the statistics module

This is what we used in our example.

Flask instance

On line 3, app = Flask(__name__), we are assigning what we can call an object instance, or in this case, Flask instance to the variable app.

Our app variable will now contain all properties and functionalities of a Flask application.

Route

On line 6, this is known in python as a decorator. And in this decorator, we are defining a route. This will dictate the web address of this view.

Line 7-8 is our function that defines our view.

The route represented by "/" means that the domain or host has no trailing components.

For example, the address https://syncster.dev/ can be represented by "/"

and the address https://syncster.dev/sample can be represented by "/sample".

I hope you get the idea 😄.

Function Definition

Let's get back in the function in python.

You should remember that our funciton in javascript looks like this

function functionName(args) {
  // Statements
}

in python, the function definition signature is like this

def function_name(args):
    # Statements

Notice that we have no curly braces.

The function body in python will reside inside the indented statements below the function definition ended with the colon :.

Summary

So in this chapter, we learned

• The basic structure of a flask application
• How to run a flask application
• Object instance and
• Function definition signature in python.

In the next chapter, we will be dealing with html template to structure our web page. See you there!