MDB 5 Flask Integration
MDB 5 Flask integration
This article shows you how to integrate Flask backend application with MDB Standard UI Kit.
This guide will walk you through steps necessary to include MDB package in your Flask project and to add some basic setup for your project.
Prerequisites
Before starting the project make sure to install the following utilities:
Creating a new Flask application
Let's create a fresh Flask application so that we can go through all the steps together.
Note: Depending on your OS you may need to use either different commands. Copy the commands appropriate for your operating system.
Step 1
First, we need create project directory. We'll use virtual environment to manage the dependencies for your project.
mkdir myproject
cd myproject
python3 -m venv venv
mkdir myproject
cd myproject
py -3 -m venv venv
Step 2
Before you work on your project, activate the corresponding environment.
. venv/bin/activate
venv\Scripts\activate
Your shell prompt will change to show the name of the activated environment.
Step 3
Use the following command to install Flask.
pip install Flask
Step 4
Open your project directory in the code editor. Create folder app, there create
__init__.py file. Paste the content of the snippet below as its content.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run()
Step 5
Inside app directory create folder templates, and there create index.html
file. There paste example content from the snippet below to see if the formatting is correct after you
link CSS files.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
</head>
<body>
<!-- Start your project here-->
<div class="container">
<div class="d-flex justify-content-center align-items-center" style="height: 100vh">
<div class="text-center">
<img class="mb-4" src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
style="width: 250px; height: 90px" />
<h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
<p class="mb-3">MDB Team</p>
<a class="btn btn-primary btn-lg" href="https://mdbootstrap.com/docs/standard/getting-started/"
target="_blank" role="button">Start MDB tutorial</a>
</div>
</div>
</div>
</body>
Step 6
Run your app with a command from the snippet below.
flask --app app run
Now head over to http://127.0.0.1:5000/ and you should see your example page in the browser.
Install MDB
Here you need to decide which method of import you want to choose
CDN import is available only for free version of MDB.
To install the MDB UI KIT in your project easily type the following command in the terminal. If you have PRO package remember to swap the access token before starting the installation.
Token generation
If you don't have access token yet please follow the tutorial.
Install MDB via NPM
Open the terminal and paste the following command.
cd app
mkdir static
cd static
npm init -y
npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
cd app
mkdir static
cd static
npm init -y
npm i mdb-ui-kit
In the <head> of index.html file import CSS files.
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/mdb-ui-kit/css/mdb.min.css' )}}">
At the end of <body> tag in index.html file import JS files.
<script type="text/javascript" src="{{ url_for('static', filename='node_modules/mdb-ui-kit/js/mdb.min.js' )}}"></script>
Download the package.
Import minified JS and CSS files
Skip this step if you want to import unminified versions of the source files. Extract the downloaded package an copy included files into directory app/static.
In the <head> of index.html import static CSS files.
<link rel="stylesheet" href="{{ url_for('static', filename='css/mdb.min.css' )}}">
At the end of <body> tag in index.html file import static JS files.
<script type="text/javascript" src="{{ url_for('static', filename='js/mdb.min.js' )}}"></script>
If you prefer to import source files from MDB package or use custom import there are some additional steps and tweaks that need to be done.
Note: The steps described below are needed only if you want to import source JS and SCSS files.
Add MDB package to assets
In the main project folder create assets/mdb directory and paste content of extracted MDB package there.
Setup webpack
From the command line run content of the snippet below to change the directory and install the required dependencies.
cd assets
npm init -y
npm i --save-dev webpack webpack-cli webpack-dev-server
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
npm i --save-dev @popperjs/core detect-autofill chart.js chartjs-plugin-datalabels deepmerge perfect-scrollbar
cd assets
npm init -y
npm i --save-dev webpack webpack-cli webpack-dev-server
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
npm i --save-dev @popperjs/core detect-autofill
In the assets directory create webpack.config.js file and paste content of the snippet below.
const path = require("path");
module.exports = {
entry: {
main: "./src/main.js",
},
output: {
filename: "main.js",
path: path.resolve(__dirname, "..", "app", "static", "dist"),
clean: true,
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: () => [require("autoprefixer")],
},
},
},
{
loader: "sass-loader",
},
],
},
],
},
watchOptions: {
ignored: /node_modules/,
},
};
In the package.json file add build, dev-build, watch scripts.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode=development",
"watch": "webpack --mode=development --watch",
"prod": "webpack --mode=production"
},
Now we’ll also create our src folder, stylesheet, and JavaScript file to round out the project structure.
Run the following from assets, or manually create the folder and file structure shown below.
mkdir src
touch src/main.js src/styles.scss
When you’re done, your complete project should look like this:
Add the following to assets/src/styles.scss to import all of MDB’s source Sass. File path depends on the package.
@import '../mdb/src/scss/mdb.pro.scss'; // for package Essential
@import '../mdb/src/mdb/scss/mdb.pro.scss'; // for package Advanced
@import '../mdb/src/scss/mdb.free.scss'; // MDB package CSS library
Add the following to assets/src/main.js to load the CSS and import all of MDB's JS. File path depends on the package.
// Import our custom CSS
import './styles.scss';
// Import all of MDB's JS
import * as mdb from '../mdb/src/js/mdb.pro'; // for package Essential
import * as mdb from '../mdb/src/mdb/js/mdb.pro'; // for package Advanced
window.mdb = mdb;
// Import our custom CSS
import './styles.scss';
// Import all of MDB's JS
import * as mdb from '../mdb/src/js/mdb.free';
window.mdb = mdb;
At the end of <body> tag in index.html file import static JS files.
<script type="text/javascript" src="{{ url_for('static', filename='dist/main.js' )}}"></script>
Now we can run watch script to generate static files that wll be used in our app.
npm run watch
Installation via CDN is one of the easiest methods of integrating MDB UI KIT with your project. Just copy the latest compiled JS script tag and CSS link tag from cdnjs to the application.
Don't forget to add also Font Awesome and Roboto font if you need. Here's an example code:
Into the <head> tag in your HTML file copy:
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/>
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css" rel="stylesheet"/>
At the end of <body> tag in your HTML file copy:
<!-- MDB -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js">
</script>
Now you're done
With MDB's CSS and JS fully loaded, after restarting the server your example page should work and you should see MDB styles applied to its content.