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 = {
entry: {
keenicons: [
{
src: ['src/vendors/keenicons/**/style.css'],
dist: 'dist/assets/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: 'dist/assets/vendors/keenicons/fonts',
}
],
'@form-validation': [
{
src: ['src/vendors/@form-validation/umd/styles'],
dist: 'dist/assets/vendors/@form-validation',
},
{
src: [
'src/vendors/@form-validation/umd/bundle/popular.min.js',
'src/vendors/@form-validation/umd/bundle/full.min.js',
'src/vendors/@form-validation/umd/plugin-bootstrap5/index.min.js',
],
dist: 'dist/assets/vendors/@form-validation/form-validation.bundle.js',
bundle: true,
},
],
leaflet: [
{
src: ['node_modules/leaflet/dist/leaflet.css'],
dist: 'dist/assets/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: 'dist/assets/vendors/leaflet/leaflet.bundle.js',
bundle: true,
},
],
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',
},
],
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: 'dist/assets/vendors/prismjs/prismjs.min.js',
bundle: true,
}
],
clipboard: [
{
src: ['node_modules/clipboard/dist/clipboard.min.js'],
dist: 'dist/assets/vendors/clipboard/clipboard.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/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
.