NPM Project Integration


Topic: NPM Project Integration

snapgravy pro asked 3 years ago

We just purchased the MDB Advanced and plan to use it in a non-Angular/React/Vue Project (Handlebars). We have the Project already setup with NPM and Gulp currently pulling in the BS SCSS from node_module and into the build.

As we migrage from vanilla BS to MDB, can we do this by simply updating our package.json file to pull down the MDB version we want then updating our @includes as part of the SCSS > CSS build? If so, where can I find those instructions? I remember seeing somewhere that this is possible but need to reference an auth key in the package.json asset path including using a hash to hold the version, i.e., #3.9.0?

Also, what are the recommended/required gulp settings relative to things like autoprefixer, postcss, babel, etc.?

Thanks.


Grzegorz Bujański staff answered 3 years ago

We don't have a recommended configuration for Gulp. We recommend using Webpack and we provide a weback starter: https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/

Installation instructions via npm can be found here: https://mdbootstrap.com/docs/standard/pro/installation/#section-npm. Note that the instruction shows a link for the essential package - just replace the essential word with advanced.

If you want to download a specific version of MDB, add the version after @ at the end of the link:

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced@3.9.0

The change itself should be limited to improving the imports. As you wrote, it should be enough to import the SCSS and JS files from our package instead of the Bootstrap package.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: OSX
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No
Tags
npm