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
$ # 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 )
# run.py - file contents from app import app if __name__ == "__main__": app.run()
# __init__.py from flask import Flask app = Flask(__name__) @app.route('/') 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 http://127.0.0.1:5000/
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:
- 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:
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:
App released under the MIT license, Design credit goes to Creative-Tim.
The app is released under the MIT license, and use Bulma CSS to style te layout.
A beautiful dashboard, released as an open-source UI Kit by Creative-Tim agency.
Open-Source app with HTML5Up Solid-State design, released under the CCY30 license (preserve the designer footer)
A simple Flask Dashboard starter with Material design (MIT license).
To access the Full index with generated and open-source Flask Apps, please access the official repository. Thank you!
Where to go from here
- Access the official repository to see what we are providing
- Generate a full-stack app in minutes using our service
- Need support? We are providing 24/7 LIVE support via Discord and eMail for paid plans.
- Follow us on Twitter and Facebook