Hi everyone I a gonna share one of my first posts I written on Medium, I hope you all will like it useful. We were working with a Jhipster project and wanted to integrate MD Bootstrap that is a material design + Bootstrap framework.JHipster is a web application generator using Spring Boot for backend and Angular for front End with multiple technologies.
Before starting you must have Sass support in your project
Link to Jhipster :http://jhipster.tech/
MD Bootstrap provides various design components based on material design and layouts. You can check here :
Link to MD Bootstrap :
https://mdbootstrap.com/getting-started/
So let’s start steps for integrating MD Bootstrap with JHipster
- First create a directory in your system with name let myAPP or any you want.
- CD using terminal or file explorer in your system into above created myApp folder.
- Open terminal in myApp (If you have not JHipster setup follow link https://www.jhipster.tech/installation/).
Enter Command to generate JHipster project in your folder
yo jhipster
After JHipster is installed. In the same terminal give the command for installing external libraries
npm install -–save chart.js@2.5.0 font-awesome hammerjs
-
To app.module.ts add
import { NgModule,Injector,NO_ERRORS_SCHEMA } from ‘@angular/core’; import { MDBBootstrapModule } from ‘angular-bootstrap-md’; @NgModule({ imports: [ MDBBootstrapModule.forRoot(), ], schemas: [ NO_ERRORS_SCHEMA ] });
-
To Vendor.scss add
/* after changing this file run ‘yarn run webpack:build’ */ $fa-font-path: ‘~font-awesome/fonts’; // Images Path for angular-bootstrap-md $image-path: ‘../../../../../node_modules/angular-bootstrap-md/img’ !default; // Fonts Path for angular-bootstrap-md $roboto-font-path: “../../../../../node_modules/angular-bootstrap-md/font/roboto/” !default; /*************************** put Sass variables here: eg $input-color: red; ****************************/ // Override Boostrap variables @import “bootstrap-variables”; // Import Bootstrap source files from node_modules @import ‘node_modules/font-awesome/scss/font-awesome’; @import ‘node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap’; @import ‘node_modules/angular-bootstrap-md/scss/mdb-free’;
-
In angular-cli.json add
“styles”: [ “../node_modules/font-awesome/scss/font-awesome.scss”, “../node_modules/angular-bootstrap-md/scss/mdb-free.scss”, “./styles.scss”, “content/scss/vendor.scss”, “content/scss/global.scss” ], “scripts”: [ “../node_modules/chart.js/dist/Chart.js”, “../node_modules/hammerjs/hammer.min.js” ]
Add the following into tsconfig.json file located in root folder
“inlcude”: [ “node_modules/angular-bootstrap-md//*.ts ”,
“src//*.ts”
]
Run in terminal to compile styles and scripts and inject to project
yarn webpack:build
That are all steps for integrating MD Bootstrap with Jhipster
Note : If you got any warnings in terminal after running yarn “webpack:build” then you can fix using tsLint manually
Note 2: If you got compile failed errors then you may have styles conflict
You can fix by removing normal bootstrap styles or comment it if you do not want to remove
//@import ‘node_modules/bootstrap/scss/bootstrap’;
Here is the link to my Git Repository with sample project integrated with MD BootStrap :
https://github.com/balvinder294/MaterialThemeJhipster
Thanks for reading. Hope I helped you. if you find it useful then write below and share your views, also let me know if anything needs to be updated if something not works, I will look into it.
Looking forward to sharing more with the community.
Originally published at Tekraze.com
Top comments (0)