Sign in


Sign up


MDBootstrap Webpack tutorial

by MDB tutorials,

This tutorial is created by Arnt Oddvar Pedersen and published thanks to his contribution.

Check out his profile page and Github.


This guide will walk you through how you can quickly get setup with MDB free or pro together with Webpack.

TL/DR
For the lazy ones, I created a GitHub project just for you: https://github.com/SpellCraft/mdb4-boilerplate

This repository uses Babel, Eslint + AirBnb style guide and comes pre-configured with all the dependencies that you need for MDB; It even contains the free MDB repository as a git submodule, making sure that you're always up to date.

Pro users should remove the /src/vendors/mdb folder and replace this with their pro package. Remember to rename the folder from "MDB-Pro" to "mdb". Finally, open up webpack.config.js and uncomment the line at the top and in the plugins section.

1. Getting Started

Create the folder you want your new MDB Webpack project to reside in and initialize it through NPM:


npm init

You can just hit Enter through all the questions if you want to save time. Once the initialization is done, we’re going to need a few development packages to cover all the bases. Babel to transpile ES6 to ES5, linting tools, SASS/SCSS support and of course Webpack.

Execute the following command:


npm i --save-dev babel-core babel-eslint babel-loader babel-polyfill babel-preset-env babel-preset-stage-0 clean-webpack-plugin css-loader eslint eslint-config-airbnb eslint-config-airbnb-base eslint-loader eslint-plugin-import exports-loader extract-text-webpack-plugin file-loader html-loader html-webpack-plugin node-sass sass-loader webpack webpack-cli webpack-dev-server

As a pro user, you also want to install the following plugin:


npm i --save-dev copy-webpack-plugin

2. Installing MDB dependencies

Once all the development plugins are done installing, let’s move over to the plugins that are required* for MDB to function.


npm i --save jquery bootstrap popper.js hammerjs node-waves font-awesome

This might take a few seconds so sit back and relax, we now have all the packages that we need.

3. Set-up

In your project folder, you should have the following files and folders:


package.json
package-lock.json (if you're using Visual Studio Code or similar programs)
/node_modules/

We’re going to need to create a few more files:


webpack.config.js
.eslintrc
.jshintrc (Not needed, but I use both ESLint and JSHint for different projects and this file lets us force the use of ESLint for our project)

Since I like keeping my “source” files, the files that I’m working on, separate from the rest of the project, also create a new folder called “src”. This is where we’ll place our source files.

Inside the source folder, create another folder called “vendors” and then copy the MDB-Pro folder into it. Rename the MDB folder to “mdb” if it’s not already. You should now have the following folder structure:

https://i.imgur.com/DNMOO50.png

3.2. Enable Linting

Open up your .jshintrc and paste the following into it:


{
  "esversion": 6
}

Then open your .eslintrc and add the following code to it:


{
  "extends": "airbnb-base",
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "jquery": true
  }
}

This forces the use of ESLint and tells ESLint what kind of rules we want to use (I like the airbnb style guide), makes it aware of babel and enables the browser and jquery environments. (Otherwise you’re going to a bunch errors.)

3.3 Getting ready for development

Finally, inside your new “src” folder, create an index.html file. Paste the following into it:


<!DOCTYPE html>
    <html lang="en">

    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
      <title>Material Design for Bootstrap</title>
    </head>
    <body>
      <div style="height: 100vh">
        <div class="flex-center flex-column">
          <h1 class="animated fadeIn mb-4">Material Design for Bootstrap</h1>
          <h5 class="animated fadeIn mb-3">Thank you for using our product. We're glad you're with us.</h5>
          <p class="animated fadeIn text-muted">MDB Team</p>
        </div>
      </div>
    </body>
    </html>

4. Setting up Webpack

Let’s get right to it. Open up webpack.config.js and paste the following into it:


module.exports = {
  entry: [
    'babel-polyfill',
    './src/js/index.js',
    './src/scss/main.scss',
    './src/vendors/mdb/scss/mdb.scss'
  ],
  output: {
  path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /.js?$/,
        exclude: [/node_modules/, /vendors/], // Don't lint MDB
        loader: 'eslint-loader',
        options: {
          fix: true,
        },
      },
      {
        test: /.js?$/,
        exclude: [/node_modules/, /vendors/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['env', 'stage-0'],
            },
          },
         ],
      },
      {
        test: /.scss?$/,
        use: extractPlugin.extract({
          use: ['css-loader', 'sass-loader'],
        }),
      },
      {
        test: /.html$/,
        use: ['html-loader'],
      },
      // Font-awesome 4.7.X
      {
        test: /.(ttf|otf|eot|svg|woff(2)?)(?[a-z0-9]+)?$/,
        exclude: [/vendors/, /img/],
        loader: 'file-loader?name=fonts/[name].[ext]',
      },
      // MDB Roboto font
      {
        test: /.(ttf|otf|eot|svg|woff(2)?)(?[a-z0-9]+)?$/,
        exclude: [/node_modules/, /img/],
        loader: 'file-loader?name=font/roboto/[name].[ext]',
      },
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          useRelativePath: true,
        },
      },
   ],
  },
  plugins: [
    extractPlugin,
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery',
      Waves: 'node-waves',
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new CleanWebpackPlugin(['dist']),
  ],
  devtool: 'source-map',
  target: 'web',
};

There is a couple of things going on here. First, we’re loading a few plugins and webpack itself at the top of the file. Then we’re telling the ExtractTextPlugin what file-name to give to the compiled CSS file.

In the Webpack configuration, change the entry-point “entry” to match the name of the JS file in your Package.json “main” section.

In “output”, we’re telling webpack to create a new directory “dist” in the same directory as the configuration file.

Continuing on to the module rule section, it’s important to note that the rules are read from bottom to top. Starting from the top rule, we’re telling Webpack to run all JS files not included in the excluded folders through ESLint and automatically fix any errors if encountered.

We are then telling Webpack that we want Babel to transpile our JS files using the ENV and Stage-0 presets so we can use all the latest features.

Next we’re doing something else; Webpack doesn’t understand CSS or SASS/SCSS, using the extraxt-text-plugin, we’re telling Webpack to convert all SCSSSASS files to CSS, and as mentioned at the top of this section, we’re saving all this text to the given filename.

The HTML rule tells webpack to automatically inject any styles and scripts into the header and end of body for all HTML files. This way we don’t have to manually copy anything over to the “dist” folder and add in the script and stylesheet tags for our HTML.

The next 2 rules copies the font files from node_modules/font-awesome/fonts into the correct “fonts” folder in our “dist” directory and subsequently copies the Roboto font from MDB into a “font” folder.

The last rule copies any image files to the “dist” directory while retaining the original folder structure.

Lastly, in the plugins section, we’re including the plugins declared at the top of the file. With webpacks ProvidePlugin() function, we’re shimming $, jQuery, window.$, window.jQuery and Waves to our entry point as MDB expects window.$, window.jQuery and Waves to be in the global scope. Some other libraries are looking for $ and jQuery in the global scope so we’re adding these as well.

The HTML-Webpack-Plugin defines our main HTML template file, where to inject the script and style tags to. This is also useful if you end up using a templating engine like Handlebars as you can dynamically create new pages based on the index.html file.

Lastly, we’re telling Webpack to remove the “dist” folder on every build using the CleanWebpackPlugin.

4.2 Pro users

As a pro user, you’ve got 2 more steps to do. Together with all the other plugins towards the top of the file, add the following line:


const CopyWebpackPlugin = require('copy-webpack-plugin');

The PRO project has an addon folder that is not present in the free version. Then in the plugins section, add the following line:


new CopyWebpackPlugin([{ from: 'src/vendors/mdb/mdb-addons', to: 'mdb-addons' }]),

This tells Webpack to copy the “mdb-addons” folder to the “dist” folder.

Lastly, you can disable source-maps by removing the devtool line, but I recommend leaving it in as it makes debugging your brand new project a lot easier.

5. Adding entry points.

Before we can start developing anything, we need to create our entry points. Create two new folders inside the “src” folder. “js” and “scss”.

Inside the “js” folder, create a new javascript file and name it after the entry point you sat in package.json and webpack.config.js.

In this file we’re going to include all the files that will be used by webpack. Paste the following into it:


// jQuery
import 'jquery';
// PopperJS
import 'popper.js';
// Bootstrap 4
import 'bootstrap';
// Material Design Bootstrap
import '../vendors/mdb/js/mdb';

Here we are telling webpack that we want to use jQuery, popper.js, bootstrap and the mdb.js file. To avoid any problems when making a distribution version of our project or while developing, we’re not including the minified file.

Lastly, we’re also importing a file we haven’t created yet, our main stylesheet file. You can name this file whatever you want, I just called it main.scss to keep it simple.

Now, navigate into the scss folder we created earlier and add/create a new file. “main.scss”. Inside this file, copy and paste the following:


// FontAwesome 4.7.x
$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome.scss';

// Bootstrap 4
@import '~bootstrap/scss/bootstrap';
    

At the very top, we’re setting the fonts path for font-awesome. This tells webpack where it can find the fonts required to use FontAwesome 4.7, then we’re importing the font-awesome stylesheet.

MDB also require the bootstrap stylesheet so that’s our second import.

At the very end you’ll notice we’re importing the CSS file from MDB. That’s because for some reason when importing the main SCSS file results in an error in core/_colors.scss, where we’re being told that the second argument of the $red color map isn’t a valid map.

6. Final Steps

Lastly, let’s create some commands. Open up your package.json and remove the already existing “scripts” section, then cop/paste the following into its place:


"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack-dev-server --mode development --open --hot"
},
    

Open a command promt or terminal and point it to the root folder of your project, then run this command:


npm run dev
    

If you followed this guide to the letter, webpack should successfully build your project and open a new browser window automatically pointing you at http://localhost:8080 with hot reloading enabled.

Congratulations on setting up MDB with webpack!


Do you want to share?

Facebook Twitter Google +

About author


User avatar

MDB tutorials

Leave a reply

Join MDB Affiliate Program

Get 30% profit from each sale

You earn 30% commission on affiliate sales, when a product is bought by a customer you referred, you will receive a 30% share.

Join us