The World’s #1 Bootstrap 5 HTML,
VueJS, React, Angular, Laravel, Asp.Net Core, Blazor, Django & Flask

Admin Dashboard Ecosystem

This is Metronic 7 documentation!

Upon purchase you can get Metronic 7 version from our Github Repository.
Request Github access
The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel foundation with a solid light and dark mode design system, extensive utility classes and custom made in-house components.
View Metronic 8 documentation

To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/



Webpack is a module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, and images if the corresponding plugins are included. Webpack takes modules with dependencies and generates static assets representing those modules. More information can be found in the official Webpack site https://webpack.js.org/

Build Command and Options

These are the list of commands available:

The default build using Webpack.

npm run build --demo1

This command use to start the Webpack real-time watcher. This task watches the sass/js files and automatically recompile whenever the source files are changed.

npm run watch --demo1

Webpack use webpack-dev-server to quickly develop an application. Use below command to start the Webpack in localhost.

npm run localhost --demo1
Parameter Type Description
--rtl=true boolean

Optional. Default is false. To generate RTL for all CSS files.

npm run build --rtl=true --demo1
--prod boolean

Optional. Default is false. Set the Webpack to production mode and minify all assets.

npm run build --prod --demo1
--css boolean

Compile only css files.

npm run build --css --demo1
--js boolean

Compile only javascript files.

npm run build --js --demo1

Add New Plugin

The new plugins from npm can be added into existing plugins.js file or in separate bundle. [metronic]/theme/html/tools/webpack/plugins/plugins.js

To create a separate bundle, check on these existing samples in [metronic]/theme/html/tools/webpack/plugins/custom/*

Get the new plugin package from yarn site; https://yarnpkg.com/en/. Install the new plugin using yarn (refer to this guide https://yarnpkg.com/en/docs/usage). This is the example command to add a new npm plugin. After running this command, the new plugin name will be added into package.json

yarn add [package]

Use below sample code to include the new plugin. The Webpack will first look for the plugins in the node_modules folder.


For some case, the included plugin that need to be initialized within your custom codes by pass it to the global window. Then can be used globally within your custom codes. For example as below;

window.Dropzone = require("dropzone");

This is to fix the browser to recognize the plugin when need to use it as new Dropzone()

To include CSS file from the plugin, use this;


Webpack Config Structure

Below is a file structure inside the default Metronic's Webpack config. The Metronic's Webpack config is located in [metronic]/theme/html/tools/webpack/*

Path Description
plugins3rd party vendor's plugins from node_modules.
customThis folder contains separate vendor's bundles.
plugins.jsThis is the global vendor includes which required for all pages.
plugins.scssThis is the global vendor includes which required for all pages.
scripts.jsThe Metronic's core plugins and scripts.
Think About The Future, Stay Connected With Us
The More We Learn, The More We Are Able To Innovate & To Develop