A step-by-step guide on how to use FAB to build a simple web app.
Flask is a very popular (micro) framework for web application development. While one can build everything from scratch directly based on Flask and Jinja2, extensions built on top of Flask are available to make web app development more efficient and effective.
Flask AppBuilder (F.A.B) is one of them. As an (extended) web app development framework, FAB is open source, and initiated and maintained by Daniel Vaz Gaspar. It is easy to use, rapid in application development. It includes detailed security, auto CRUD generation for your models, Google charts, and much more. Widely used web applications, such as Apache Airflow, Apache Superset, and so on, are developed using FAB.
In this post, I am going to demonstrate how to use FAB to build a simple web app step by step.
Before building our first simple web app, we need to prepare the environment for our development. Here we create a virtual environment and install dependencies as demonstrated below.
appbuilder % python -V
Python 3.8.5
appbuilder %
appbuilder % python -m venv .env
appbuilder % source .env/bin/activate
(.env) appbuilder %
(.env) appbuilder % pip install --upgrade pip
Collecting pip
Using cached pip-21.3.1-py3-none-any.whl (1.7 MB)
Installing collected packages: pip
Attempting uninstall: pip
Found existing installation: pip 20.1.1
Uninstalling pip-20.1.1:
Successfully uninstalled pip-20.1.1
Successfully installed pip-21.3.1
(.env) appbuilder %(.env) appbuilder % pip install -r requirements.txt
Collecting Flask==1.1.4
Using cached Flask-1.1.4-py2.py3-none-any.whl (94 kB)
Collecting Flask-AppBuilder==3.4.0
Using cached Flask_AppBuilder-3.4.0-py3-none-any.whl (1.9 MB)
Collecting alembic==1.7.5
Using cached alembic-1.7.5-py3-none-any.whl (209 kB)
... ... ...
Successfully installed Babel-2.9.1 Flask-1.1.4 Flask-AppBuilder-3.4.0 Flask-Babel-2.0.0 Flask-JWT-Extended-3.25.1 Flask-Login-0.4.1 Flask-OpenID-1.3.0 Flask-SQLAlchemy-2.5.1 Flask-WTF-0.14.3 Jinja2-2.11.3 Mako-1.1.6 MarkupSafe-2.0.1 PyJWT-1.7.1 PyYAML-6.0 SQLAlchemy-1.3.24 WTForms-2.3.3 Werkzeug-1.0.1 alembic-1.7.5 apispec-3.3.2 attrs-21.2.0 click-7.1.2 colorama-0.4.4 defusedxml-0.7.1 dnspython-2.1.0 email-validator-1.1.3 idna-3.3 importlib-metadata-4.8.2 importlib-resources-5.4.0 itsdangerous-1.1.0 jsonschema-3.2.0 marshmallow-3.14.1 marshmallow-enum-1.5.1 marshmallow-sqlalchemy-0.26.1 prison-0.2.1 pyrsistent-0.18.0 python-dateutil-2.8.2 python3-openid-3.2.0 pytz-2021.3 six-1.16.0 sqlalchemy-utils-0.37.9 zipp-3.6.0
(.env) appbuilder %
(.env) appbuilder %Now we are ready to build our simple web app.
Step 1: Starting with the default Web App
To create an application skeleton, we call the create-app command interactively:
(.dev) appbuilder$ flask fab create-app
Your new app name: myapp
Your engine type, SQLAlchemy or MongoEngine (SQLAlchemy, MongoEngine) [SQLAlchemy]:
Downloaded the skeleton app, good coding!
(.dev) appbuilder$ or, equivalently, with all options explicitly specified
(.env) appbuilder % flask fab create-app --name demo-myview-01 --engine SQLAlchemy
Downloaded the skeleton app, good coding!
(.env) appbuilder %First, let’s see what is included in the automatically created skeleton.
(.env) appbuilder % tree
.
└── demo-myview-01
├── README.rst
├── app
│ ├── __init__.py
│ ├── models.py
│ ├── templates
│ │ └── 404.html
│ ├── translations
│ │ └── pt
│ │ └── LC_MESSAGES
│ │ ├── messages.mo
│ │ └── messages.po
│ └── views.py
├── babel
│ ├── babel.cfg
│ └── messages.pot
├── config.py
└── run.py7 directories, 11 files
(.env) appbuilder %
The file, README.rst, is the initial readme file including the following contents.
(.env) appbuilder % cat demo-myview-01/README.rst
Base Skeleton to start your application using Flask-AppBuilder
--------------------------------------------------------------- Install it::pip install flask-appbuilder
git clone https://github.com/dpgaspar/Flask-AppBuilder-Skeleton.git- Run it::$ export FLASK_APP=app
# Create an admin user
$ flask fab create-admin
# Run dev server
$ flask runThat's it!!
(.env) appbuilder %
We can update it during or after the application development. The files under the folders babel and app/translations are for internationalization. It is beyond the scope of this post, we will ignore them. The file, run.py, simply includes the command for starting the application server, we will leave it as is.
(.env) demo-myview-01 % cat run.py
from app import appapp.run(host="0.0.0.0", port=8080, debug=True)
(.env) demo-myview-01 %
In the rest of this post, we will mainly focus on the three Python files under the app folder.
Before going ahead to modify anything, let’s check what the skeleton app looks like. First, we need to create an admin user, with which users can be added and edited.
(.env) demo-myview-01 % export FLASK_APP=app/__init__.py
(.env) demo-myview-01 % flask fab create-admin
Username [admin]:
User first name [admin]:
User last name [user]:
Email [admin@fab.org]:
Password:
Repeat for confirmation:
... ... ... ... ...
Recognized Database Authentications.
2021-12-11 18:33:08,252:INFO:flask_appbuilder.security.sqla.manager:Added user admin
Admin User admin created.
(.env) demo-myview-01 % ls -l
total 168
-rw-r--r-- 1 chuan.zhang staff 389 Dec 11 17:49 README.rst
drwxr-xr-x 3 chuan.zhang staff 96 Dec 11 18:39 __pycache__
drwxr-xr-x 10 chuan.zhang staff 320 Dec 11 18:30 app
-rw-r--r-- 1 chuan.zhang staff 73728 Dec 11 18:41 app.db
drwxr-xr-x 4 chuan.zhang staff 128 Dec 11 17:49 babel
-rw-r--r-- 1 chuan.zhang staff 3671 Dec 11 18:39 config.py
-rw-r--r-- 1 chuan.zhang staff 68 Dec 11 17:49 run.py
(.env) demo-myview-01 %From the above command line output, we can see that a new file app.db is created. This is because in config.py, the default meta
(.env) demo-myview-01 % flask run
* Serving Flask app "app/__init__.py"
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
... ... ... ... ...
2021-12-11 18:37:40,936:INFO:flask_appbuilder.base:Registering class MenuApi on menu
2021-12-11 18:37:40,936:INFO:flask_appbuilder.api:Registering route /api/v1/menu/ ['GET']
2021-12-11 18:37:40,965:INFO:werkzeug: * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)The above screenshots show the functionality the skeleton app includes, Security. With this default functionality, one can manage users and roles, and check permission and views/menus related information. Roles are used to specify what permissions a user can have. In the next section, I am going to add a view and demonstrate how to define a role such that any user associated with the role only has permission to access the new view.
Step 2: Adding a New View
In FAB, a view is essentially a flask blueprint and is automatically created by the framework. Next, we add a new view with three methods, and each method renders a web page. As page development is not the main topic of this post, we are not trying to exhaust all different cases. Instead, we include only three different variations of the same web page.
The first two web pages are identical, but the corresponding methods/APIs are different. The third web page is rendered by extending the FAB base layout. The first two web pages have the same HTML file as shown below.
The third web page extends the base layout as follows.
With web pages prepared, we are ready to add the view in the views.py file.
The add_view() function above adds a menu with category name specified as Demo View, and associates it with the baseview specified as DemoView() class. The function also inserts a menu item named Message1 and associates it to the link "/demoview/method1/".
The add_link() functions add two more menu items, Message2 and Message3, respectively, and associate them with "/demoview/method2/FAB_Demo_view" and "/demoview/method3/".
Step 3: Creating a Role and a User
Next, we start the web service, and demonstrate how to create a role, a user, and associate the role to the new user.
(.env) demo-myview-01 % flask run --with-threads --reload
* Serving Flask app "app/__init__.py" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
2021-12-12 20:35:37,026:INFO:werkzeug: * Restarting with stat
... ... ... ...
First, we log in with the admin credential, then click the menu Security > List Roles, then click the + button to add a new role as shown in the panel A in the above figure. Then click the menu Security > List Users, then click the + button to add a new user as shown in the panel B in the above figure.
Login to the web service using the new user credential, then by clicking the Message1, Message2, and Message3 items of the Demo View menu, we can access the three web pages respectively (see B, C, and D panels in the above figure respectively). The messages printed on the page (see the line inside the red box) are as what defined in the views.py source file. The third web page extends the FAB base layout, and from the panel D in the above figure, we can see that the web contents are indeed embedded in the FAB layout.
In the post, we have demonstrated how to use the Flask-AppBuilder (FAB) extension to develop a simple web service with very convenient user/role management. The source code of the example demonstrated in this post is available on this GitHub repo: https://github.com/chuan2019/FAB-Demo/tree/main/demo-myview-01. Interested readers can further study the FAB documentation, and related source code of the open-source applications, such as Apache Superset, Apache Airflow, and others on GitHub.
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
