DEV Community

Cover image for An introduction to the Flask Python web app framework
Bhavya Agrawal
Bhavya Agrawal

Posted on

An introduction to the Flask Python web app framework

In computer programming, a software framework is an abstraction in which software, providing generic functionality, can be selectively changed by additional user-written code, thus providing application-specific software.
"-Source Wikipedia"

Flask is a web framework. This means flask provides you with tools, libraries and technologies that allow you to build a web application. This web application can be some web pages, a blog, a wiki or go as big as a web-based calendar application or a commercial website. Flask is based on WSGI(Web Server Gateway Interface) toolkit and Jinja2 template engine.

Flask makes the web development process rapid & easy with few lines of code.

Create an Simple web Application with Flask -

  1. Open a terminal and install Flask using PIP:

    $ pip install Flask
  2. Create a file with .py extension and paste below code-

    from flask import Flask    
    app = Flask(__name__)   # Flask constructor
    # A decorator used to tell the application
    # which URL is associated function
    def hello():
        return 'HELLO WORLD'
    if __name__=='__main__':

    The variable name is passed as first argument when
    creating an instance of the Flask object (a Python Flask
    application). In this case name represents the name of the
    application package and it’s used by Flask to identify
    resources like templates, static assets and the instance

    route() decorator, to bind the URL to a function. It also
    contains method keyword use to bind request method along
    with url.
    If the server get the request on the binding URL then it calls

    the function bind to that URL.

  3. Now run the file, you will get the localhost URL and paste it in your browser.

Image description

Project Structure in Flask

   |-- app/
   |-- app/
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/
   |    |    |
   |    |    |-- includes/                 # Page chunks, components
   |    |    |    |
   |    |    |    |-- navigation.html      # Top bar
   |    |    |    |-- sidebar.html         # Left sidebar
   |    |    |    |-- scripts.html         # JS scripts common to all pages
   |    |    |    |-- footer.html          # The common footer
   |    |    |
   |    |    |-- layouts/                  # App Layouts (the master pages)
   |    |    |    |
   |    |    |    |-- base.html            # Used by common pages like index, UI
   |    |    |    |-- base-fullscreen.html # Used by auth pages (login, register)
   |    |    |
   |    |    |-- accounts/                 # Auth Pages (login, register)
   |    |    |    |
   |    |    |    |-- login.html           # Use layout `base-fullscreen.html`
   |    |    |    |-- register.html        # Use layout `base-fullscreen.html`  
   |    |    |
   |    |  index.html                      # The default page
   |    |  page-404.html                   # Error 404 page (page not found)
   |    |  page-500.html                   # Error 500 page (server error)
   |    |    *.html                        # All other pages provided by the UI Kit
   |-- requirements.txt
   |-- ************************************************************************
Enter fullscreen mode Exit fullscreen mode

The relevant files:

  • - the entry point used to start the application
  • requirements.txt - a file that specifies all dependencies (for now is just Flask)
  • app - the application folder where we will add our code
  • app/ - This file is required to let us use the app as a Python Package
  • app/static - this folder will contain design assets: JS, CSS, and images.
  • templates - the directory with pages, layouts, and components used by Flask to generate some nice pages for us

Top comments (4)

andrewbaisden profile image
Andrew Baisden

Coming from a JavaScript background when I first used Flask I noticed that it was quite similar to Express. It seems to have a low bar when it comes to learning it which is great even if you are new to the language.

bhavya_agrawal profile image
Bhavya Agrawal

Absolutely, that drives new comers towards it.

andrewbaisden profile image
Andrew Baisden

Yep those common similarities made Python quite easy to learn because I already knew JavaScript.

chrisgreening profile image
Chris Greening

Gotta love Flask :~)

Definitely my go to backend framework (when it makes sense), especially when I need something flexible to prototype an idea or wire up some quick and dirty routing

When I first started web dev a couple years ago I started with Django but struggled to understand a lot of its idiomatic approaches - switched over to Flask not long after and absolutely fell in love with all the different use cases I find for it