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:

            
              myproject/
              ├── venv/
              ├── app/
              │   ├── static/
              │   ├── templates/
              │   │   └── index.html
              │   └── __init__.py
              └── assets/
                  ├── mdb/
                  ├── src/
                  │   ├── main.js
                  │   └── styles.scss
                  ├────── package-lock.json
                  ├────── package.json
                  └────── webpack.config.js
            
          

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.