Build Tools
Refer to the Installation Guide for instructions on using the Webpack build commands specified in the
webpack.config.js script. The Build Tools process the assets(CSS, JavaScript, TypeScript and font files) from src/ folder and processed static files are moved into dist/ folder for deployment in the web directory of applications. CSS Bundle
The Build Tools utilize the Tailwind CLI to compile the entry stylesheet from
src/css/styles.css into the output file at dist/assets/css/styles.css . JavaScript Bundle
The Build Tools utiliz the Webpack and Babel to compile the core components from
src/core/index.ts into the output file at dist/assets/js/core.bundle.js as bundle. Single Scripts
Single JavaScript and TypeScript files in the
src/app/* directory are processed and transferred with their original filenames to the output folder at dist/assets/js/* . The TypeScript files are compiled into JavaScript files. Vendors
With Metronic, you can directly incorporate JavaScript and CSS assets from any 3rd-party vendor packages. Additionally, our Build Tools offer a seamless method for organizing and bundling these vendor assets, facilitating their easy integration into applications.
The below configuration script
webpack.vendors.js defines the procedure for assembling JavaScript and CSS bundles from the src/vendors/ directory and moving them to the dist/assets/vendors/ folder, where they can be utilized as static assets in applications. module.exports = { output: 'dist/assets', entry: { keenicons: [ { src: ['src/vendors/keenicons/**/style.css'], dist: '/vendors/keenicons/styles.bundle.css', bundle: true, }, { src: [ 'src/vendors/keenicons/duotone/fonts', 'src/vendors/keenicons/filled/fonts', 'src/vendors/keenicons/outline/fonts', 'src/vendors/keenicons/solid/fonts', ], dist: '/vendors/keenicons/fonts', }, ], '@form-validation': [ { src: ['src/vendors/@form-validation/umd/styles'], dist: '/vendors/@form-validation', }, { src: [ 'src/vendors/@form-validation/umd/bundle/popular.js', 'src/vendors/@form-validation/umd/bundle/full.min.js', 'src/vendors/@form-validation/umd/plugin-framework/index.min.js', ], dist: '/vendors/@form-validation/form-validation.bundle.js', bundle: true, }, ], leaflet: [ { src: ['node_modules/leaflet/dist/leaflet.css'], dist: '/vendors/leaflet/leaflet.bundle.css', bundle: true, }, { src: [ 'node_modules/leaflet/dist/leaflet.js', 'node_modules/esri-leaflet/dist/esri-leaflet.js', 'node_modules/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.js', ], dist: '/vendors/leaflet/leaflet.bundle.js', bundle: true, }, ], apexcharts: [ { src: ['node_modules/apexcharts/dist/apexcharts.css'], dist: '/vendors/apexcharts/apexcharts.css', }, { src: ['node_modules/apexcharts/dist/apexcharts.min.js'], dist: '/vendors/apexcharts/apexcharts.min.js', }, ], prismjs: [ { src: [ 'node_modules/prismjs/prism.js', 'node_modules/prismjs/components/prism-markup.js', 'node_modules/prismjs/components/prism-markup-templating.js', 'node_modules/prismjs/components/prism-bash.js', 'node_modules/prismjs/components/prism-javascript.js', 'node_modules/prismjs/components/prism-css.js', 'node_modules/prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js', 'src/vendors/prismjs/prismjs.init.js', ], dist: '/vendors/prismjs/prismjs.min.js', bundle: true, }, ], clipboard: [ { src: ['node_modules/clipboard/dist/clipboard.min.js'], dist: '/vendors/clipboard/clipboard.min.js', }, ], ktui: [ { src: ['node_modules/@keenthemes/ktui/dist/ktui.min.js'], dist: '/vendors/ktui/ktui.min.js', }, ], }, }; Add Vendor
The steps below demonstrate how to add a new vendor package via NPM, configure it in the
webpack.vendors.js file, and use it within applications. 1
Install Package
Refer to the ApexCharts Installation Guide and execute the following command in your project's root folder terminal.
npm install apexcharts --save The above command downloads and installs the ApexCharts package into the node_modules/apexcharts folder.
2
Configure Assets
Add the following entry into the
webpack.vendors.js script to bundle the ApexCharts assets for use in your applications by including them from dist/assets/vendors/apexcharts folder. module.exports = { entry: { apexcharts: [ { src: ['node_modules/apexcharts/dist/apexcharts.css'], dist: 'dist/assets/vendors/apexcharts/apexcharts.css', }, { src: ['node_modules/apexcharts/dist/apexcharts.min.js'], dist: 'dist/assets/vendors/apexcharts/apexcharts.min.js', }, ] } }; <!DOCTYPE html> <html> <head> <!--Vendor styles --> <link href="/dist/assets/vendors/apexcharts/apexcharts.css" rel="stylesheet"/> <!--Core styles--> <link href="/dist/assets/css/styles.css" rel="stylesheet"/> </head> <body> <h1> Hello world! </h1> <!--Core bundle script--> <script src="/dist/assets/js/core.bundle.js"> </script> <!--Vendor script --> <script src="/dist/assets/vendors/ktui/ktui.min.js"> </script> <script src="/dist/assets/vendors/apexcharts/apexcharts.min.js"> </script> </body> </html> Its important to follow the vendors assets include order where the JavaScript bundle of the vendor should be included after the core bundle script core.bundle.js and the CSS bundle before the style bundle styles.css .
