Metronic

The Ultimate Bootstrap & Angular 6 Admin Theme Framework For Next Generation Applications

Build Tools

Overview

Metronic build tools provides easy package management and production deployment for any type of web application that also comes with powerful asset bundle tools to organize assets structure with custom bundling for production.

Metronic's central default.conf.json and angular.conf.json build config files allows you manage the entire assest bundling for production by taking advantage of yarn package manager.

Build Config

The build config file is located at [root]/tools/themes/metronic/[version_package].conf.json/[version_package].json and you can fully customize the build settings to meet your project requirements:

Check the dist output path config.dist for the build tools to output the compilation.

{
    "config": {
        "demo": "",
        "debug": false,
        "compile": {
            "rtl": {
                "enabled": true,
                "skip" : [
                    "select2",
                    "socicon",
                    "line-awesome",
                    "flaticon",
                    "metronic",
                    "fontawesome5",
                    "jstree",
                    "owl.carousel",
                    "fullcalendar",
                    "bootstrap-datepicker",
                    "bootstrap-datetime-picker",
                    "bootstrap-switch",
                    "nouislider"
                ]
            },
            "jsUglify": false,
            "cssMinify": false,
            "jsSourcemaps": false,
            "cssSourcemaps": false
        },
        "path": {
            "src": "./../themes/themes/metronic/src",
            "node_modules": "./node_modules",
            "demo_api_url": "https://keenthemes.com/metronic/preview/"
        },
        "dist": [
            "./../themes/themes/metronic/dist/preview/assets",
            "./../themes/themes/metronic/dist/default/**/assets",
            "./../themes/themes/metronic/dist/classic/assets"
        ]
    },
    "build": {
        "vendors": {
            "base": {
                "src": {
                    "mandatory": {
                        "jquery": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery/dist/jquery.js"
                            ]
                        },
                        "popper.js": {
                            "scripts": [
                                "{$config.path.node_modules}/popper.js/dist/umd/popper.js"
                            ]
                        },
                        "bootstrap": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js"
                            ]
                        },
                        "js-cookie": {
                            "scripts": [
                                "{$config.path.node_modules}/js-cookie/src/js.cookie.js"
                            ]
                        },
                        "moment": {
                            "scripts": [
                                "{$config.path.node_modules}/moment/min/moment.min.js"
                            ]
                        },
                        "tooltip.js": {
                            "scripts": [
                                "{$config.path.node_modules}/tooltip.js/dist/umd/tooltip.min.js"
                            ]
                        },
                        "perfect-scrollbar": {
                            "styles": [
                                "{$config.path.node_modules}/perfect-scrollbar/css/perfect-scrollbar.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/perfect-scrollbar/dist/perfect-scrollbar.js"
                            ]
                        },
                        "wnumb": {
                            "scripts": [
                                "{$config.path.node_modules}/wnumb/wNumb.js"
                            ]
                        }
                    },
                    "optional": {
                        "jquery.repeater": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery.repeater/src/intro.js",
                                "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                                "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                                "{$config.path.node_modules}/jquery.repeater/src/repeater.js",
                                "{$config.path.node_modules}/jquery.repeater/src/outro.js"
                            ]
                        },
                        "jquery-form": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-form/dist/jquery.form.min.js"
                            ]
                        },
                        "tether": {
                            "styles": [
                                "{$config.path.node_modules}/tether/dist/css/tether.css"
                            ],
                            "scripts": []
                        },
                        "block-ui": {
                            "scripts": [
                                "{$config.path.node_modules}/block-ui/jquery.blockUI.js"
                            ]
                        },
                        "bootstrap-datepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-datepicker.init.js"
                            ]
                        },
                        "bootstrap-datetime-picker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"
                            ]
                        },
                        "bootstrap-timepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-timepicker.init.js"
                            ]
                        },
                        "bootstrap-daterangepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-daterangepicker.init.js"
                            ]
                        },
                        "bootstrap-touchspin": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js"
                            ]
                        },
                        "bootstrap-maxlength": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                            ]
                        },
                        "bootstrap-switch": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/js/bootstrap-switch.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-switch.init.js"
                            ]
                        },
                        "bootstrap-multiselectsplitter": {
                            "scripts": [
                                "{$config.path.src}/vendors/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js"
                            ]
                        },
                        "bootstrap-select": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-select/dist/css/bootstrap-select.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-select/dist/js/bootstrap-select.js"
                            ]
                        },
                        "select2": {
                            "styles": [
                                "{$config.path.node_modules}/select2/dist/css/select2.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/select2/dist/js/select2.full.js"
                            ]
                        },
                        "typeahead.js": {
                            "scripts": [
                                "{$config.path.node_modules}/typeahead.js/dist/typeahead.bundle.js",
                                "{$config.path.node_modules}/handlebars/dist/handlebars.js"
                            ]
                        },
                        "inputmask": {
                            "scripts": [
                                "{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.date.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.numeric.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.phone.extensions.js"
                            ]
                        },
                        "nouislider": {
                            "styles": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.js"
                            ]
                        },
                        "owl.carousel": {
                            "styles": [
                                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.carousel.css",
                                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.theme.default.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/owl.carousel/dist/owl.carousel.js"
                            ],
                            "images": [
                                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.video.play.png",
                                "{$config.path.node_modules}/owl.carousel/dist/assets/ajax-loader.gif"
                            ]
                        },
                        "autosize": {
                            "scripts": [
                                "{$config.path.node_modules}/autosize/dist/autosize.js"
                            ]
                        },
                        "clipboard": {
                            "scripts": [
                                "{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
                            ]
                        },
                        "ion-rangeslider": {
                            "styles": [
                                "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.css",
                                "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.skinFlat.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/ion-rangeslider/js/ion.rangeSlider.js"
                            ],
                            "images": [
                                "{$config.path.node_modules}/ion-rangeslider/img/sprite-skin-flat.png"
                            ]
                        },
                        "dropzone": {
                            "styles": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.js"
                            ]
                        },
                        "summernote": {
                            "styles": [
                                "{$config.path.node_modules}/summernote/dist/summernote.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/summernote/dist/summernote.js"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/summernote/dist/font/**"
                            ]
                        },
                        "bootstrap-makrdown": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-markdown/css/bootstrap-markdown.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/markdown/lib/markdown.js",
                                "{$config.path.node_modules}/bootstrap-markdown/js/bootstrap-markdown.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-markdown.init.js"
                            ]
                        },
                        "jquery-validation": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-validation/dist/jquery.validate.js",
                                "{$config.path.node_modules}/jquery-validation/dist/additional-methods.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/jquery-validation.init.js"
                            ]
                        },
                        "remarkable-bootstrap-notify": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-notify/bootstrap-notify.min.js",
                                "{$config.path.src}/js/framework/components/plugins/base/bootstrap-notify.init.js"
                            ]
                        },
                        "animate.css": {
                            "styles": [
                                "{$config.path.node_modules}/animate.css/animate.min.css"
                            ]
                        },
                        "toastr": {
                            "styles": [
                                "{$config.path.node_modules}/toastr/build/toastr.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/toastr/build/toastr.min.js"
                            ]
                        },
                        "jstree": {
                            "styles": [
                                "{$config.path.node_modules}/jstree/dist/themes/default/style.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/jstree/dist/jstree.js"
                            ],
                            "images": [
                                "{$config.path.src}/vendors/jstree/32px.png",
                                "{$config.path.node_modules}/jstree/dist/themes/default/40px.png",
                                "{$config.path.node_modules}/jstree/dist/themes/default/*.gif"
                            ]
                        },
                        "morris.js": {
                            "styles": [
                                "{$config.path.node_modules}/morris.js/morris.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/raphael/raphael.js",
                                "{$config.path.node_modules}/morris.js/morris.js"
                            ]
                        },
                        "chartist": {
                            "styles": [
                                "{$config.path.node_modules}/chartist/dist/chartist.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/chartist/dist/chartist.js"
                            ]
                        },
                        "chart.js": {
                            "scripts": [
                                "{$config.path.node_modules}/chart.js/dist/Chart.bundle.js",
                                "{$config.path.src}/js/framework/components/plugins/charts/chart.init.js"
                            ]
                        },
                        "bootstrap-session-timeout": {
                            "scripts": [
                                "{$config.path.src}/vendors/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js"
                            ]
                        },
                        "jquery-idletimer": {
                            "scripts": [
                                "{$config.path.src}/vendors/jquery-idletimer/idle-timer.min.js"
                            ]
                        },
                        "counterup": {
                            "scripts": [
                                "{$config.path.node_modules}/waypoints/lib/jquery.waypoints.js",
                                "{$config.path.node_modules}/counterup/jquery.counterup.js"
                            ]
                        },
                        "sweetalert2": {
                            "styles": [
                                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/es6-promise-polyfill/promise.min.js",
                                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.min.js",
                                "{$config.path.src}/js/framework/components/plugins/base/sweetalert2.init.js"
                            ]
                        },
                        "socicon": {
                            "styles": [
                                "{$config.path.node_modules}/socicon/css/socicon.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/socicon/font/**"
                            ]
                        },
                        "line-awesome": {
                            "styles": [
                                "{$config.path.src}/vendors/line-awesome/css/line-awesome.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/line-awesome/fonts/**"
                            ]
                        },
                        "flaticon": {
                            "styles": [
                                "{$config.path.src}/vendors/flaticon/css/flaticon.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/flaticon/fonts/**"
                            ]
                        },
                        "metronic": {
                            "styles": [
                                "{$config.path.src}/vendors/metronic/css/styles.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/metronic/fonts/**"
                            ]
                        },
                        "fontawesome5": {
                            "styles": [
                                "{$config.path.src}/vendors/fontawesome5/web-fonts-with-css/css/fontawesome-all.min.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/fontawesome5/web-fonts-with-css/webfonts/**"
                            ]
                        }
                    }
                },
                "bundle": {
                    "styles": "{$config.output}/vendors/base/vendors.bundle.css",
                    "scripts": "{$config.output}/vendors/base/vendors.bundle.js",
                    "images": "{$config.output}/vendors/base/images",
                    "fonts": "{$config.output}/vendors/base/fonts"
                }
            },
            "custom": {
                "jquery-ui": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/vendors/jquery-ui/jquery-ui.min.css"
                        ],
                        "scripts": [
                            "{$config.path.src}/vendors/jquery-ui/jquery-ui.min.js"
                        ],
                        "images": [
                            "{$config.path.src}/vendors/jquery-ui/images/*"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.js",
                        "images": "{$config.output}/vendors/custom/jquery-ui/images"
                    }
                },
                "fullcalendar": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.js",
                            "{$config.path.node_modules}/fullcalendar/dist/gcal.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.js"
                    }
                },
                "gmaps": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/gmaps/gmaps.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/gmaps/gmaps.js"
                    }
                },
                "jqvmap": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/jqvmap/dist/jqvmap.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/jqvmap/dist/jquery.vmap.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.europe.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.germany.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.russia.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.usa.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.world.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.js"
                    }
                },
                "jquery-flot": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.resize.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.categories.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.pie.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.stack.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.crosshair.js",
                            "{$config.path.node_modules}/jquery-flot/jquery.flot.axislabels.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/flot/flot.bundle.js"
                    }
                },
                "datatables.net": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/datatables.net-bs4/css/dataTables.bootstrap4.css",
                            "{$config.path.node_modules}/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css",
                            "{$config.path.node_modules}/datatables.net-select-bs4/css/select.bootstrap4.min.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
                            "{$config.path.node_modules}/datatables.net-bs4/js/dataTables.bootstrap4.js",
                            "{$config.path.src}/js/framework/components/plugins/misc/datatables.init.js",

                            "{$config.path.node_modules}/datatables.net-autofill/js/dataTables.autoFill.min.js",
                            "{$config.path.node_modules}/datatables.net-autofill-bs4/js/autoFill.bootstrap4.min.js",

                            "{$config.path.node_modules}/jszip/dist/jszip.min.js",
                            "{$config.path.node_modules}/pdfmake/build/pdfmake.min.js",
                            "{$config.path.node_modules}/pdfmake/build/vfs_fonts.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.flash.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",

                            "{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.min.js",

                            "{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",

                            "{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",

                            "{$config.path.node_modules}/datatables.net-keytable/js/dataTables.keyTable.min.js",

                            "{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.min.js",
                            "{$config.path.node_modules}/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js",

                            "{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",

                            "{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",

                            "{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.min.js",

                            "{$config.path.node_modules}/datatables.net-select/js/dataTables.select.min.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/datatables/datatables.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/datatables/datatables.bundle.js"
                    }
                }
            }
        },
        "demo": {
            "default": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/default/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/plugins/misc/mdatatable.init.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/default/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/default/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/default/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/default/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/default/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/default/custom/",
                        "media": "{$config.output}/demo/default/media/"
                    }
                }
            },
            "demo2": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo2/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo2/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo2/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo2/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo2/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo2/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo2/custom/",
                        "media": "{$config.output}/demo/demo2/media/"
                    }
                }
            },
            "demo3": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo3/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo3/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo3/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo3/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo3/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo3/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo3/custom/",
                        "media": "{$config.output}/demo/demo3/media/"
                    }
                }
            },
            "demo4": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo4/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo4/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo4/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo4/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo4/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo4/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo4/custom/",
                        "media": "{$config.output}/demo/demo4/media/"
                    }
                }
            },
            "demo5": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo5/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo5/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo5/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo5/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo5/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo5/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo5/custom/",
                        "media": "{$config.output}/demo/demo5/media/"
                    }
                }
            },
            "demo6": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo6/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo6/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo6/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo6/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo6/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo6/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo6/custom/",
                        "media": "{$config.output}/demo/demo6/media/"
                    }
                }
            },
            "demo7": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo7/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo7/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo7/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo7/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo7/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo7/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo7/custom/",
                        "media": "{$config.output}/demo/demo7/media/"
                    }
                }
            },
            "demo8": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo8/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo8/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo8/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo8/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo8/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo8/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo8/custom/",
                        "media": "{$config.output}/demo/demo8/media/"
                    }
                }
            },
            "demo9": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo9/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo9/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo9/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo9/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo9/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo9/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo9/custom/",
                        "media": "{$config.output}/demo/demo9/media/"
                    }
                }
            },
            "demo10": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo10/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo10/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo10/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo10/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo10/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo10/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo10/custom/",
                        "media": "{$config.output}/demo/demo10/media/"
                    }
                }
            },
            "demo11": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo11/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo11/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo11/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo11/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo11/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo11/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo11/custom/",
                        "media": "{$config.output}/demo/demo11/media/"
                    }
                }
            },
            "demo12": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo12/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/base/util.js",
                            "{$config.path.src}/js/framework/base/app.js",
                            "{$config.path.src}/js/framework/components/general/datatable/datatable.js",
                            "{$config.path.src}/js/framework/components/general/**/*.js",
                            "{$config.path.src}/js/demo/demo12/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo12/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo12/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo12/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo12/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo12/custom/",
                        "media": "{$config.output}/demo/demo12/media/"
                    }
                }
            }
        },
        "snippets": {
            "apps": {
                "src": {
                    "scripts": [
                        "{$config.path.src}/js/snippets/apps/**/*.js"
                    ]
                },
                "output": {
                    "scripts": "{$config.output}/snippets/apps"
                }
            },
            "custom": {
                "src": {
                    "scripts": [
                        "{$config.path.src}/js/snippets/custom/**/*.js"
                    ]
                },
                "output": {
                    "scripts": "{$config.output}/snippets/custom"
                }
            }
        },
        "app": {
            "src": {
                "scripts": [
                    "{$config.path.src}/js/app/custom/**/*.js"
                ],
                "media": [
                    "{$config.path.src}/media/app/**/*.*"
                ]
            },
            "output": {
                "scripts": "{$config.output}/app/js",
                "media": "{$config.output}/app/media"
            }
        }
    }
}

Required Core CSS and JS files

Vendors list under build.vendors.base.src.mandatory is required, and the build.vendors.base.src.optional is optional. Also JS & CSS files in build.demo.[demo_id]* is required for specific demo styles and scripts.

*[demo_id] is the unique demo name, like default, demo2, demo3, etc.

Under snippets and app nodes are for preview demo and optional plugins.

Build Config
Field Type Description
config.demo string Specify an ID of the selected demo for gulp tool to build assets only for selected demo
config.debug boolean Enable/disable debug console log.
config.compile.rtl.enabled boolean Enable/disable compilation with RTL version of CSS along with default LTR CSS.
config.compile.rtl.skip array An array of plugin to be skipped from being compile as RTL.
config.compile.jsUglify boolean Enable/disable output Javascript minify.
config.compile.cssMinify boolean Enable/disable output CSS minify.
config.compile.jsSourcemaps boolean Enable/disable output Javascript with sourcemaps.
config.compile.cssSourcemaps boolean Enable/disable output CSS with sourcemaps.
config.path object Predefined paths the where src/, node_modules/ and theme/[root]/src/ are located. demo_api_url is the ajax API path used by datatables, dropdowns with live search and other json server side data source related demos.
config.dist object dist stands for distributable and refers to the directories where the minified and bundled assets will be stored for production uses.
Build Items
build.vendors object vendors object specifies all 3rd party resources to be deployed to assets/vendors/ folder for production usage
build.vendors.base object This object specifies global 3rd party resources to be added into the base css and js vendors bundles assets/vendors/base/vendors.bundle.js and assets/vendors/base/vendors.bundle.css

The 3rd party plugin images or font files also will be deployed into assets/vendors/base/images and assets/vendors/base/fonts
build.vendors.custom object This object specifies 3rd party resources that are includable on demand from assets/vendors/custom/ folder
build.demo.default object Default demo assets
build.demo.default.base object This object specifies the global assets of the demo to be added into the base css and js demo bundles assets/demo/default/base/scripts.bundle.js and assets/demo/default/base/styles.bundle.css

The media(e.g: images) of the demo are deployed into assets/demo/default/media
build.demo.default.custom object This object specifies custom assets that are includable on demand from assets/demo/default/custom/ folder
build.snippets object This object specifies snippets assets that are includable on demand from assets/snippets/ folder
build.app object This object specifies application level global assets that are includable on demand from assets/app/ folder. Useful if you want to add custom scripts that are used in some spesific pages only.

Build Tasks

Update the Node.js, global npm and yarn to the latest version, if you got the error related to the node-sass.

Make sure that before running below tasks the demo parameter in [root]/tools/themes/metronic/[version_package].conf.json/[version_package].json is set to your current selected demo id (e.g: default, demo2, demo8 or demo12).
Leave the demo parameter empty to build for all demos.
Set config.path.demo_api_url parameter in [root]/tools/themes/metronic/[version_package].conf.json/[version_package].json URL to your installed localhost API.

Launch your terminal and change its current directory to the project's tools folder where the build files are located. All commands below must be run in this tools folder.

cd [root]/tools/

For the first time launch, run the command below to install the npm dependencies defined in [root]/tools/package.json (if you haven't done it) :

yarn install

For the first time or after every modification in [root]/src/, run below task to compile the assets as defined in [root]/tools/themes/metronic/[version_package].conf.json/[version_package].json :

gulp

Provide argument --prod to build assets with JS and CSS minify enabled.

gulp --prod

Run below task to update server side ajax demo API URL fix (required fix for angular and html versions) as defined in config.path.demo_api_url right after gulp task completed:

gulp apiurl

For Angular assets, use gulp command with flag --angular for the assets compilation.

gulp --prod --angular

Base theme CSS & JS in [root]/src/. When you run gulp, all CSS & JS from [root]/src/ will be compiled and place into several demo locations, for Angular and static HTML. The compile output folder is defined in [root]/tools/themes/metronic/[version_package].conf.json/[version_package].json file, under config.dist. You can create another compile output path.

"dist": [
	"./../themes/themes/metronic/dist/preview/assets",
	"./../themes/themes/metronic/dist/default/**/assets"
]

Gulp can run automatically when a file changed. Watch tasks file is located in [root]/tools/gulp/watch.js.

To run watcher for all JS and CSS files. Run command below.

gulp watch

You also can run watcher separately for JS and CSS.

gulp watch:js
gulp watch:scss
I run a team of 20 product managers, developers, QA and UX resources. Previously we designed everything ourselves. For our newest platform we tried out Metronic. I cannot overestimate the impact Metronic has had. It's accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it's probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward.
The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes! Jonathan Bartlett, Metronic Customer

Powerful Framework

Everything within Metronic is customizable globally to provide limitless unique styled projects

Multi Demo

Choose a perfect design for your next project among hundreds of demos

Limitless Components

A huge collection of components to power your application with the latest UI/UX trands

Angular 6 Support

Enterprise ready Angular 6 integration with built-in authentication module and many more

Bootstrap 4

Metronic deeply customizes Bootstrap with native look and feel

Exclusive Datatable Plugin

Our super sleek and intuitive Datatable comes packed with all advanced CRUD features

60,000+ Strong

Metronic is the only theme trusted by over 60,000 developers world wide

Continuous Updates

Lifetime updates with new demos and features is guaranteed

Quality Code

Metronic is writer with a code structure that all developers will be able to pick up easily and fall in love

The Ultimate Bootstrap Admin Theme Trusted By Over 60,000 Developers World Wide