MDB 5 Webpack Starter

Introduction

This guide describes in detail the capabilities of Webpack Starter.

The use of this Starter is at your own risk and assumes basic knowledge of Webpack, JavaScript and CSS preprocessors. We recommend creating custom versions of MDB UI KIT and themes only for advanced developers.

Note: Installing MDB with Webpack is very useful for experienced developers. Now you can install ready MDB5 package with Webpack through MDB CLI.

Prerequisites

Before starting a project make sure to install Node LTS (12.x.x or higher recommended).

Clone or download the repository

Installation

        
            
        npm install
      
        
    

Pro Essential users

        
            
        npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
      
        
    

Pro Advanced users

        
            
        npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced
      
        
    

Token generation

Please follow the tutorial.

Basic features

• Bundling via webpack
• ES6+ Support via babel
• SASS Support via sass-loader
• Linting via eslint-loader
• Unit Testing via jest
• Code Formatting via prettier

Dev Server

        
            
        npm start
      
        
    

Build

        
            
        npm run build
      
        
    

MDB UI KIT integration

Importing JS modules

        
            
        import * as mdb from 'mdb-ui-kit'; // lib
        import { Input } from 'mdb-ui-kit'; // module
        import { Input as CustomInput } from 'mdb-ui-kit'; // module with custom name
      
        
    

Importing CSS file

        
            
        @import '~mdb-ui-kit/css/mdb.min.css';
      
        
    

Custom version of MDB UI KIT

It is possible to prepare a custom version of MDB UI KIT. It can be useful when the project uses only several modules of our library and you want to reduce the size of the compiled files. To achieve this, follow the steps:

Getting MDB UI KIT source code

        
            
        npm run getMDBsrc
      
        
    

Importing JS components

Copy the content from mdb/js/mdb.free.js or mdb/js/mdb.pro.js to src/js/index.js file. Pick only the components you need and update path to the mdb dir. Here's an example:

        
            
        import Carousel from '../../mdb/js/free/carousel';
        
        export { Carousel };
      
        
    

Some components may require additional dependencies to be installed. Webpack should report this after starting a devServer.

Importing SCSS files

Same as with js files, copy the content from mdb/scss/mdb.free.scss or mdb/scss/mdb.pro.scss to src/scss/index.scss. Remove the lines with the import of modules that you will not use and update the paths to point the mdb dir.

Keep in mind that many scss files are related to each other. For example, a modal will need files for buttons, ripple, modal, close and transtions to work properly. We recommend that you only delete the files described by comments BOOTSTRAP COMPONENTS and MDB COMPONENTS.

Example path for a carousel file:

        
            
        (...)
        @import '../../mdb/scss/free/carousel';
      
        
    

Configuration

Webpack config for MDB development is located in /webpack/mdb/ directory and index.html file is placed in /src/mdb/ directory.

Dev Server

        
            
        npm run startMDB
      
        
    

Build

        
            
        npm run buildMDB
      
        
    

Custom theme

Webpack Starter allows pro users to prepare a personalized theme for all UI KIT components.

Installation

Theming system is available only for pro users. Make sure you have installed one of the packages below:

Pro Essential users

        
            
        npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
      
        
    

Pro Advanced users

        
            
        npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced
        
        
    

SCSS config

Creating a new theme requires that you define primary and secondary colors for your application. We prepared functions and mixins that will help you to create a ready to use theme using these colors. Here's an example code:

        
            
        @import '~mdb-ui-kit/src/scss/mdb.pro.scss';

        $my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
        $my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme

        $my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors

        // include theme styles
        @include mdb-theme($my-theme);