Few days ago I wanted to include CreativeTim’s awesome project (Light Bootstrap Dashboard), into one of my bootstrap projects.
The scenario is: There is existing project, existing setup for admin dashboard, but now I want it to be more like the ‘Light Bootstrap Dashboard’.
Light Bootstrap Dashboard project doesn’t offer a direct way of achieving this, there is no npm package that I can pull -or maybe what I did here, is in fact the direct way of doing it?-. The documentation is a manual copy-paste files setup, I don’t want to check all this files in my project.
What I did was:
1- Created a third_party/ directory on my main project root.
2- Following the Official Git Submodules tutorials, From the command line:
git submodule add https://github.com/creativetimofficial/light-bootstrap-dashboard/ third_party/light-bootstrap-dashboard
3- Waiting for the clone to finish cloning from the remote repo, to the specified folder: third_party/light-bootstrap-dashboard. After that, now I see the actual repo inside my repo, this is cool!
4- At this point it came into my mind: What if this submodule project changed?! how I didn’t consider that? is it going to have a different lifespan than my root project? (I was concerned, because the root project still and mostly will still use bootstrap 3 for a while, and bootstrap 4 is already out and the folks at creative-tim is expected to migrate to bootstrap 4)
Googling it, found the answer on this SO post, and the confident accepted answer: Freezing is the whole point of submodules!
Yes, Let’s continue.
5- opened the file third_party/light-bootstrap-dashboard/dashboard.html to checkout the structure and what to extract to integrate with my own project.
6- Among the libraries used in this project, there is Bootstrap Notify, Chartist, ..etc. I will pick up what I need from there, I don’t have to use it all.
7- From my javascript entrypoint I Included the nessecary files:
require("../../../third_party/light-bootstrap-dashboard/assets/js/chartist.min.js");
require("../../../third_party/light-bootstrap-dashboard/assets/js/bootstrap-select.js");
require("../../../third_party/light-bootstrap-dashboard/assets/js/bootstrap-notify.js");
require("../../../third_party/light-bootstrap-dashboard/assets/js/light-bootstrap-dashboard.js");
// yeah, the multi-level navigation to the parent directory is annoying
8- From my sass entrypoint I included the nessecary files:
// .....
// Light Bootstrap Dashboard
@import "../../../third_party/light-bootstrap-dashboard/assets/css/animate.min";
@import "../../../third_party/light-bootstrap-dashboard/assets/sass/light-bootstrap-dashboard";
@import "../../../third_party/light-bootstrap-dashboard/assets/css/pe-icon-7-stroke";
And, lucky me, using Webpack -through Laravel-mix-, I don’t have to worry about copying the fonts, images, and all url() relative files called from css files. Read More about this here.
Now, That did it for me, Light-Bootstrap-Dashboard is integrated successfully, git submodule did what was expected. I don’t have to track in my version control the package/theme/template files. maybe there is another ways better that I didn’t discover yet, but for now I’m happy with this : )