Steps For Integrating MD Bootstrap In Jhipster Project

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

1. First create a directory in your system with name let myAPP or any you want.
2. CD using terminal or file explorer in your system into above created myApp folder.
3. Open terminal in myApp (If you have not JHipster setup follow link https://www.jhipster.tech/installation/).

4. Enter Command to generate JHipster project in your folder
   
   yo jhipster
   

5. 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
   

6. 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 ]
   });
   

7. 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’;
   

8. 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”
   ]
   

9. Add the following into tsconfig.json file located in root folder
   
   
   
   “inlcude”: [ “node_modules/angular-bootstrap-md//*.ts ”,

“src//*.ts”

]
   
   

10. Run in terminal to compile styles and scripts and inject to project
    
    
    
    yarn webpack:build
    
    

11. 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