Flask Apps - Learn By Coding

Hello Coders,

Thank you for landing on this page. This article aims to help programmers, especially the beginners to set up and build a few simple apps coded in Flask. All starters presented here, are generated by the AppSeed service and released as open-source projects (MIT license) to be used by anyone, without putting a registration form in front of them.

In a rush? Check out the full index with open-source Flask Apps published on Github. Thank you!

Flask (for newcomers)

Flask (source code) is a Python web framework built with a small core and modularity in mind. With a small footprint, well documented and supported by a growing community, Flask can be a good choice to implement on top a nice production-ready apps, landing pages and complex eCommerce services.

Setup Flask Environment

In order to use the boilerplates, we need Python and Flask installed on the workstation. The Python can be downloaded from the official website and Flask can be easily added using PIP command:

$ # Test the Python install 
$ python --version
$ Python 3.7.2

$ # install Flask using PIP
$ pip install Flask

Hello from Flask

Let's write the most simple Flask app from scratch, and start it. Set up a new project, with Flask is quite easy. We need only two files and a small update in our environment:

  • run.py - the app launcher
  • init.py - the file that represents the app constructor
  • Set up FLASK_APP variable export FLASK_APP=run.py to point to the app launcher file ( e.g. run.py )

Flask Boilerplate - Image with the minimal file structure.

# run.py - file contents

from app import app

if __name__ == "__main__":
# __init__.py

from flask import Flask

app = Flask(__name__)

def index():
    return 'Hello from Flask!'
Start the application by typing flask run and visit the browser:
$ flask run
 * Serving Flask app "run.py" (lazy loading)
 * Environment: production
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Running on

If all goes well, by visiting the `localhost:5000` in the browser, we should see the message Hello from Flask.

Integrate the Design  

The next step is to add a nice UI to our app. Usually, this task is executed manually and can take a few hours. To speed up things, we are using an HTML parser to translate any flat HTML into Jinja2 templates, the native format for Flask applications.

Curious how we parse and integrate any HTML into production-ready apps? Please access this article. Thank you!

To integrate a new design into a Flask application, you should follow these steps:

  • Copy the assets (Javascript, Images and CSS files) into the static folder of your app
  • Detect the master layout, by comparing the pages. The master layout is used as the base visual container of your app, where all other components and dinamic content is injected
  • Extract the HTML components, remove the hard coded text and replace the div and spans with your content.
  • Save all components in the template directory
  • Edit the views.py to manage and load the templates for each route

By using any of the Flask application presented in this article, you can skip over all this manual work and jump directly to code some real product features.

Flask Apps Structure and Features

The code-base, used by all applications, is organized using a modular and simple structure:

Flask Boilerplate - Code Structure.

The most relevant files:

  • app.py - starts the app by putting together assets, database, and app logic
  • requirements.txt - contains the app dependencies
  • app\models.py - define a single class (User) used by the authentication flow
  • app\views.py - handles the app routing
  • app\data.py - file where app strings (URL's, titles, etc) are isolated

The boilerplate modules:

  • SQLite database
  • SQLAlchemy ORM
  • Authentication Flow (Login and Registration)
  • Static export via Flask-Frozen

Enough theory, let's present some real apps:

Flask App - Argon Design

App released under the MIT license, Design credit goes to Creative-Tim.

App Links: demo, sources

Flask Argon Design - Gif animated intro.

FlaskPlay - styled with Bulma

The app is released under the MIT license, and use Bulma CSS to style te layout.

App Links: demo, sources

Flask Boilerplate Bulma CSS

Flask Dashboard Black

A beautiful dashboard, released as an open-source UI Kit by Creative-Tim agency.

App Links: demo, sources

Flask Dashboard

Flask Solid-State

Open-Source app with HTML5Up Solid-State design, released under the CCY30 license (preserve the designer footer)

Links: sources, demo

Flask Solid-State - Gif animated intro.

Flask Material Dashboard

A simple Flask Dashboard starter with Material design (MIT license).

Links: demo, sources

Flask Material Dashboard - Gif animated intro.

To access the Full index with generated and open-source Flask Apps, please access the official repository. Thank you!

Where to go from here

Thank you!

Show Comments

Get the latest posts delivered right to your inbox.