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 (2)
Hi Christopher Gilroy
Use Metronic as a source toolkit, then publish only required assets per app/page:
1. 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
2. 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/....
3. 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.
4. 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.
5. 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.
