Customize Bundle
Learn how to enable certain components and js files for certain pages

Objectives

In this guide we will cover the following:

  • Enable select2 and datatable for all pages
  • Enable chart.js only for the overview.html page

Project Structure

Once we are done with our objectives, our project structure should look something like the following (other files omitted for brevity):

  • folder acme-dashboard
    • description frontal.config.js
    • folder assets
      • folder js
        • description app.js
        • description charts.js
    • folder pages
      • description overview.html
      • description index.html

Configuring the bundle

After creating the outlined files above, and leaving them empty; we need to start letting frontal.js know when and how to bundle these files, as mentioned in the Usage guide, we need to activate components as needed, so, below is how our frontal.config.js should look like:

// frontal.config.js
module.exports = {
    ...

    bundles: {
        // `main` is the bundle that is loaded within all pages by default
        main: {
            components: {
                ...

                // Enable select2 and datatable components
                select2: true,
                datatable: true
            },
        },

        // `stats` is our new bundle, that is only loaded for a certain page
        stats: {
            // the stats bundle is only loaded for the overview.html page
            pages: ['overview.html'],

            // the stats bundle should include our charts initializer script file
            assets: [
                '@assets/js/charts.js'
            ],

            // the stats bundle should enable the chart.js component
            components: {
                chartjs: true
            }
        },
    }

    ...
};

With the configuration outlined above, a new bundle named stats will automatically be injected within our overview.html page, this is very easy and great for performance as we don't have to worry about loading scripts that aren't needed in certain pages.

app.js

Now we can add our init scripts for select2 and datatable within our app.js file and frontal.js will load your javascript file in the appropriate position

// assets/js/app.js

$( function() {
    // init select2
    $('.form-select2').select2();

    // init datatables
    $('.data-table').DataTable();
});

charts.js

Same goes for initiating our charts, within our charts.js file:

// assets/js/charts.js

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: { ... },
    options: { ... }
});
Note: When we activated the chart component, the highlighted Chart constructor class above, is made globally available for use in all files, even for inline script tags within HTML pages, therefore, there is no need to import chartjs with import Chart from 'chart.js'.

Conclusion

Unlike HTML products in the market, Nile Dashboard thanks to frontal.js, makes javascript a lot more fun, it doesn't end there, the official frontal.js documentation explains other features, regarding importing more assets using glob matchers for example and a lot more, read their docs on the bundles property.

Next Up

Learn how to customize the design system and make it yours with your own visual language
Learn how to customize components using sass variables

{title}