Proper way to customize/build/bundle Metronic?
Hi all, what is the proper way to build and bundle Metronic for use in Laravel and/or Symfony?
What I mean, I love the look of Metronic, but I may want to change brand colors, and I definitely don't want to ship a full JS bundle of things I may never need, like Confetti, or DataTables, etc.
It might sound like I'm not looking for a "theme" like Metronic, but I definitely want to use the styling and components and such I just don't want to "ship everything" if a good chunk of it will never be used.
Replies (5)
Hi
core and KtUI cover the main theme behaviour (menus, dropdowns, etc.), while heavier libraries are usually separate vendor bundles (for example charts, maps).
We will consider upgrading Laravel from webpack to Vite soon.
Thanks
Hi Christopher Gilroy
Use Metronic as a source toolkit, then publish only required assets per app/page:
- Customize in source, then build
Work from Metronic package source (src/css, src/core, src/app), not directly in dist. Rebuild with: npm run dev for local work npm run build:prod for production output
- Trim unused vendor bundles before production
In webpack.vendors.js, remove vendor entries you do not use (for example Confetti/DataTables if unused), then rebuild. Keep only assets your pages need under dist/assets/vendors/....
- Laravel integration (Vite)
Use the Laravel integration seed and copy Metronic built assets into public/assets. Keep resources/css/app.css and resources/js/app.js as your Laravel entry points, and include vendor files conditionally in Blade layouts/pages.
- Symfony integration (AssetMapper)
Symfony seed uses symfony/asset-mapper. Import required CSS/JS in assets/app.js and reference only needed Metronic assets in Twig templates. Copy only required built files from Metronic dist/assets into Symfony assets directory.
- Best-practice loading strategy
Global: styles.css, keenicons, core.bundle.js Page-level: optional libraries only where needed (charts, tables, editors, maps, confetti, etc.)
Hmm, I swore the Laravel and Symfony integration kits were still including *everything* in the bundle.
Yes, you need to remove vendor entries you do not use in webpack.vendors.js, then rebuild the assets.
Does it work?
Thanks
OH! I think I understand now. So technically everything *is* already... what would be the words... stripped down per se?
What I mean by that is core.bundle.js is everything *needed* for Metronic to actually function.
Then ktui.min.js is also absolutely needed as it's what does dropdowns, etc.
However, apexcharts.min.js is *JUST* the ApexCharts items.
Leaflet for example isn't included in any of those files, it is in it's own leaflet.bundle.js.
So then, just to be 100% certain, the only real reason I would want to remove (or add) items to webpack.vendors.js is is I wanted to speedup builds realistically?
---
Secondary question, since Vite is meant to replace webpack, where exactly would all of the vite configuration be instead of running webpack?
