Hello Coders,

The goal of this article is to help beginners to code their first app in Flask, the famous library written in Python. For newcomers, Flask is a lightweight web application framework written in Python. Sometimes classified as a microframework, Flask provides a lightweight codebase that can be easily extended to become an API, a simple web app, or a complex eCommerce platform.

Thanks for reading! - Content provided by App Generator.

✨ Install Python

Python can be downloaded from the official website. Choose the installer for your operating system, download, and click a few times.
By typing python --version in a terminal window, you should see something like this:

$ python --version
Python 3.7.2

✨ Install Flask

We have two options here. Install Flask using a virtual environment or globally. I will choose the simple option:

$ pip install Flask
$ pip freeze | grep Flask 

First command install Flask, the second will print the version.

✨ Next step: decide the project structure

Flask leaves the organization of your web application up to you. The whole app can be saved in a single file or break down in multiple files or packages. The first two options are:

• Single module structure, where all files are saved in the same directory. This structure is suitable for a small project, or learning projects.

• Basic Package structure - if your project is not a small one anymore, maybe this project structure is recommended.

We can see now a much more organized directory structure where each file represents:

• run.py - app launcher
• requirements.txt - the file with the project required modules
• app / __init__.py - the constructor for our app

✨ Add code and run the app

I will choose the package structure and create a few files to code the app. The minimal project structure requires two files:

<ROOT> / run.py
       / app /
       / app / __init__.py

The contents of run.py

from app import app

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

The contents of __init__.py

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello Coder, you are up!'

✨ Set up the environment

Before running your app you must set the variable FLASK_APP, to inform Flask what should be executed first

• Set up for Unix: export FLASK_APP=run.py
• Set up for Windows CMD set FLASK_APP=hello.py
• Set up for Windows Powershell $env:FLASK_APP = "run.py"

Navigate to the directory where run.py was saved, and type flask run.
By visiting localhost:5000 in your preferred browser you should see the app running.

✨ Integrate a design

To make the app more appealing, I will integrate a popular design, crafted by Creative-Tim - Material Kit.

✨ The new structure of our project

Integrate a new design is quite an easy task, and the steps are:

• copy the UI kit assets under the directory app / static / assets
• add the index.html under the templates directory

✨ Updated files, to render the template

• The app __init__.py

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello')
def hello():
    return 'Hello Coder, you are up!'

@app.route('/')
def index():
    return render_template( 'layouts/default.html',
                            title='Flask - Learn by Coding',
                            description='Simple Flask tutorial for beginners.',
                            content=render_template('pages/index.html') ) 

The above code does the following:

• Load the default layout
• Inject three variables in the template: page title, description and content

✨ Structure of the layout page

✨ Structure of the index page

Thanks for reading! For more resources, feel free to access:

• 👉 More Flask Dashboards crafted in Django, Flask, and React
• 👉 More Flask Apps - free & PAID