This is Metronic 7 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/
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-dev-server to quickly develop an application. Use below command to start the Webpack in localhost.
npm run localhost --demo1
Optional. Default is
Optional. Default is
Compile only css files.
Add New Plugin
The new plugins from
npm can be added into existing
plugins.js file or in separate bundle.
To create a separate bundle, check on these existing samples in
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
After running this command, the new plugin name will be added into
yarn add [package]
Use below sample code to include the new plugin. The Webpack will first look for the plugins in the
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
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
|plugins||3rd party vendor's plugins from |
|custom||This folder contains separate vendor's bundles.|
|plugins.js||This is the global vendor includes which required for all pages.|
|plugins.scss||This is the global vendor includes which required for all pages.|
|scripts.js||The Metronic's core plugins and scripts.|