MDBootstrap in a Symfony

Mdbootstrap ia a great theme to implement the material design rules from google to your your bootstrap 4 CCS framework

Up to now mdbootsrap is not Webpack ready, so you have to implement some more steps to use all Components from your mdbootstrap in your TWIG driven symfony 4 application.

We show you how to implement mdbootstrap PRO with all default components.

The Problem:

We want to use all the default components in a symfony4 application.

In this application we use TWIG to render all the HTML and use Encore Webpack to bundle the CSS and JS scripts from NPM.

1. Step

Install Encore Webpack in your symfony4 application:

I use this guidline to install Encore webpack:

http://iulianpopa.ro/symfony/2017/06/18/symfony-encore/

2. Install mdbootstrap via NPM

If you use the PRO theme then you can install the mdbootrap via NPM directly from the distibutors Gitlab.

  1. Generate a API token in your Gitlab account

https://mdbootstrap.com/docs/jquery/getting-started/installation-guide/#token-generation

  1. Install the Package with your generated token
npm install git+https://oauth2:YOUR_TOKEN_GOES_HERE@git.mdbootstrap.com/mdb/jquery/jq-pro.git --save

3. Extend Encore Webpack with copy-webpack-plugin

To work with mdbootstrap and webpack you need to install the webpack-copy-plugin. With this plugin later we copy the mdbootsrap files t the build path.

npm i copy-webpack-plugin

With this code we copy all the mdbootsrap files to the build path. SO we can use the npm update to get updates from the repo and during the build operation in the CICD pipeline the files are copied to the build path but are not packed from webpack.

To activate the plugin we add the following lines to our webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');
Encore
//some more content
.addPlugin(
        new CopyWebpackPlugin(
            [
                {
                    from: './node_modules/mdbootstrap-pro/js/mdb.min.js',
                    to: 'js/mdb.min.js'
                },
                {
                    from: './node_modules/mdbootstrap-pro/js/mdb.min.js.map',
                    to: 'js/mdb.min.js.map'
                },
                {
                    from: './node_modules/mdbootstrap-pro/js/jquery.min.js',
                    to: 'js/jquery.min.js'
                },
                {
                    from: './node_modules/mdbootstrap-pro/js/bootstrap.min.js',
                    to: 'js/bootstrap.min.js'
                },
                {
                    from: './node_modules/mdbootstrap-pro/js/popper.min.js',
                    to: 'js/popper.min.js'
                }

            ]
        )
    )

4. Prepare your CSS and JS files in your webpack setup

CSS: You can import the CSS files for mdbootrap as you are used to it:

@import '~mdbootstrap-pro/css/bootstrap.css';
@import '~mdbootstrap-pro/css/mdb.css';

JS: The normal import of js files is not supported from mdbootsrap up to now, so you here you have to change your way:

// any CSS you import will output into a single css file (app.css in this case)
import '../css/frontend.css';
import $ from 'jquery';
global.$ = global.jQuery = $;

It's necessary to import jquery into the entrypoint file, but do not import bootsrap.js nor mdbootsrap.js in the entrypoint. We will do this in the next step.

5. Include mdbootstrap, bootsrap and popper

To use all the components especially mdbootsrap select you have to import the bootsrap and mdbootsrap files you have to import them as Asset files in your TWIG Template. The order of the imports is importend to work propperly:

<script type="text/javascript" src="{{ asset('build/js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('build/js/popper.min.js') }}"></script>

{% block webpack %}
    {{ encore_entry_script_tags('frontend') }}
{% endblock %}

<script type="text/javascript" src="{{ asset('build/js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('build/js/mdb.min.js') }}"></script>

First we import jquery.js, which is copied before with the webpack copy plugin, then popper.js, then the webpack entry-point then bootsrap and then mdbootsrap.

If bootsrap is imported in the entry-point JS file again then nothing will work as exptected.

6. $(document).ready()

The document ready function should be implemented in the TWIG template. All the other JS logic can be done in the webpack file. Especially the select dropdown in the forms have to be initialed in the TWIG to work properly.

    $(document).ready(function () {
        $('select')
            .materialSelect();
        $('.pickadate').pickadate({
            format: 'dd.mm.yyyy',
            formatSubmit: 'yyyy-mm-dd',
        });
    });

7. Conclusion

Mdbootsrap is a great theme if it is setup correctly.

Here you can get your mdbootstrap PRO version