MBD Bootstrap PRO &#8211; NPM

Topic: MBD Bootstrap PRO – NPM

tmmidia free asked 6 years ago

Hello guys, I got a MDB Pro license and I need it by npm . I was searching how to do that and then I found https://git.mdbootstrap.com/users/sign_in that you guys have to give me access.
This if my order number #50276.

I tried on contact@mdbootstrap.com but I had no success.
I was talking with f.kapusta@mdbootstrap.com and I had no answer no more.

What should I do ? how to proceed ?

Could you help me ?

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

Dear tmmidia,

If you click on link which Filip provided you, you have to scroll down and you have to find two blue panels called 'free' and 'pro'. You have to click on 'pro' button, and panel will show you step-by-step instruction how to install MDB Pro using npm.

Or, if you click on that link from Filip, just click buttons CTRL + F from your's keyboard, and find NPM installation: header. If you find it, you have to click on 'pro' button in this nice, blue area. And then you will see step-by-step instruction how to install MDB Pro via npm.

If you can't find this instructions, I'll paste here it for you:

Step 1:  Create new angular project using Angular CLI command:

<code>ng new your-angular-project --style=scss</code>

Step 2:  cd your-angular-project

Step 3:  GitLab npm install

<ul>
 	<li>Visit  <a class="external-link" href="https://git.mdbootstrap.com" rel="nofollow">https://git.mdbootstrap.com</a>  and log in , if you are PRO user and do not have account yet, please request one contacting us:  <a class="external-link" href="mailto:contact@mdbootstrap.com" rel="nofollow">contact@mdbootstrap.com</a></li>
 	<li>From top right corner click at your avatar and choose "Setting → Access Tokens" or navigate directly to:  <a class="external-link" href="https://git.mdbootstrap.com/profile/personal_access_tokens" rel="nofollow">https://git.mdbootstrap.com/profile/personal_access_tokens</a></li>
 	<li>Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"</li>
 	<li>Once your token will be generated make sure to copy it and store in safe place. You won't be able to access it again. In case of lose you will have to generate new token again.</li>
 	<li>Navigate to given repository, switch GIT to HTTP and copy it's url i.e. :  <a class="external-link" href="http://git.mdbootstrap.com/mdb/angular/ng-pro.git" rel="nofollow">http://git.mdbootstrap.com/mdb/angular/ng-pro.git</a></li>
 	<li>Adjust following link as per below:
<code>"git+https://oauth2:</code> + <code>access _token</code> + <code>@</code> + <code>repo address" </code>
i.e.

<code>git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-pro.git</code></li>
 	<li>Within existing npm project run:
<code>npm install git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-pro.git --save</code>

if you don't have existing npm project you should crate it first (npm init)

alternatively you can update your dependencies in package.json like below :

<code>
 "dependencies": {
"ng-pro": "git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-pro.git"
}</code>

and run <code>npm install</code></li>
</ul>
Step 4:  add following imports and providers to your app.module.ts:
<pre><code>
import { MDBBootstrapModules } from 'ng-mdb-pro';
import { MDBSpinningPreloader } from 'ng-mdb-pro';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
...
imports: [
 ...
 MDBBootstrapModules.forRoot(),
 ...
],
providers: [
...
MDBSpinningPreloader,
...
],
schemas: [ NO_ERRORS_SCHEMA ]

</code></pre>
Step 5: Into your angular-cli.json file   add styles
<pre><code>
"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/ng-mdb-pro/assets/scss/bootstrap/bootstrap.scss",
"../node_modules/ng-mdb-pro/assets/scss/mdb.scss", 
"./styles.scss"
],</code></pre>
and scripts
<pre><code>
"scripts": [
"../node_modules/chart.js/dist/Chart.js",
"../node_modules/easy-pie-chart/dist/easypiechart.js",
"../node_modules/screenfull/dist/screenfull.js",
"../node_modules/hammerjs/hammer.min.js"
],</code></pre>
Step 6: Update ts.config.json file

add following into tsconfig.json file located in <code>root</code> folder
<pre><code>"include": ["node_modules/ng-mdb-pro/**/*.ts", "src/**/*.ts"], </code></pre>
Step 7: Install 3rd party libraries using
<code> npm i --save chart.js@2.5.0 easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 font-awesome </code>

OR
to package.json add:
<pre><code>"chart.js": "^2.5.0", 
"easy-pie-chart": "^2.1.7", 
"hammerjs": "^2.0.8", 
"screenfull": "3.3.0", 
"font-awesome": "^4.7.0"</code></pre>
and then use <code> npm i </code>

Step 8: if you want to use maps you will have to npm i --save @agm/core and then add<code> import { AgmCoreModule } from '@agm/core';</code> to your app.module. To use them you will also need add it to your imports <code>
 AgmCoreModule.forRoot({
 apiKey: 'Your_api_key'
 })
 </code>

Step 9: ng serve -o

And that's it.

If you need more help, please write new message in this topic, or simply write to me an email: d.gemza@mdbootstrap.com

Best Regards,

Damian

Please insert min. 20 characters.

Dear tmmidia, If you click on link which Filip provided you, you have to scroll down and you have to find two blue panels called 'free' and 'pro'. You have to click on 'pro' button, and panel will show you step-by-step instruction how to install MDB Pro using npm. Or, if you click on that link from Filip, just click buttons CTRL + F from your's keyboard, and find NPM installation: header. If you find it, you have to click on 'pro' button in this nice, blue area. And then you will see step-by-step instruction how to install MDB Pro via npm. If you can't find this instructions, I'll paste here it for you: Step 1: Create new angular project using Angular CLI command: ng new your-angular-project --style=scss Step 2: cd your-angular-project Step 3: GitLab npm install

Visit https://git.mdbootstrap.com and log in , if you are PRO user and do not have account yet, please request one contacting us: contact@mdbootstrap.com
From top right corner click at your avatar and choose "Setting → Access Tokens" or navigate directly to: https://git.mdbootstrap.com/profile/personal_access_tokens
Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"
Once your token will be generated make sure to copy it and store in safe place. You won't be able to access it again. In case of lose you will have to generate new token again.
Navigate to given repository, switch GIT to HTTP and copy it's url i.e. : http://git.mdbootstrap.com/mdb/angular/ng-pro.git
Adjust following link as per below: "git+https://oauth2: + access _token + @ + repo address"
i.e.
git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-pro.git
Within existing npm project run: npm install git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-pro.git --save if you don't have existing npm project you should crate it first (npm init) alternatively you can update your dependencies in package.json like below : "dependencies": { "ng-pro": "git+https://oauth2:sBBYpBsf-mcbHgYHUFa7@git.mdbootstrap.com/mdb/angular/ng-pro.git" } and run npm install

Step 4: add following imports and providers to your app.module.ts:


import { MDBBootstrapModules } from 'ng-mdb-pro';
import { MDBSpinningPreloader } from 'ng-mdb-pro';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
...
imports: [
    ...
    MDBBootstrapModules.forRoot(),
    ...
],
providers: [
...
MDBSpinningPreloader,
...
],
schemas: [ NO_ERRORS_SCHEMA ]

Step 5: Into your angular-cli.json file add styles


"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/ng-mdb-pro/assets/scss/bootstrap/bootstrap.scss",
"../node_modules/ng-mdb-pro/assets/scss/mdb.scss", 
"./styles.scss"
],

and scripts


"scripts": [
"../node_modules/chart.js/dist/Chart.js",
"../node_modules/easy-pie-chart/dist/easypiechart.js",
"../node_modules/screenfull/dist/screenfull.js",
"../node_modules/hammerjs/hammer.min.js"
],

Step 6: Update ts.config.json file add following into tsconfig.json file located in root folder

"include": ["node_modules/ng-mdb-pro/**/*.ts",  "src/**/*.ts"],

Step 7: Install 3rd party libraries using npm i --save chart.js@2.5.0 easy-pie-chart@2.1.7 hammerjs@2.0.8 screenfull@3.3.0 font-awesome OR to package.json add:

"chart.js": "^2.5.0", 
"easy-pie-chart": "^2.1.7", 
"hammerjs": "^2.0.8", 
"screenfull": "3.3.0", 
"font-awesome": "^4.7.0"

and then use npm i Step 8: if you want to use maps you will have to npm i --save @agm/core and then add import { AgmCoreModule } from '@agm/core'; to your app.module. To use them you will also need add it to your imports


    AgmCoreModule.forRoot({
      apiKey: 'Your_api_key'
    })

Step 9: ng serve -o And that's it. If you need more help, please write new message in this topic, or simply write to me an email: d.gemza@mdbootstrap.com Best Regards, Damian

tmmidia free commented 6 years ago

Thank you Damian and Filip for help me, on this refer link that Filip gave me.. has a component tab.. I didn't see that was a component tab.. I figured those steps would be for both versions. As the MBD Pro Steps is "hidden" by component tab.. it confused me.. by the way thank you guys again.

Damian Gemza staff commented 6 years ago

We're glad that everything is okay to you. I'm closing this topic. Best Regards, Damian

Add comment

tmmidia free answered 6 years ago

0 0 Best answer

Hi Filip, thanks for your answer, but I still don't know how to install MDB Pro by npm as MDB Free. MDB Free: npm i angular-bootstrap-md --save MDB PRO: ??? How can I install MDB Pro using npm ?

Filip Kapusta premium commented 6 years ago

If your token is generated you should follow the instruction here: https://mdbootstrap.com/angular/5min-quickstart/ You can choose to install Pro or Free version.

tmmidia free commented 6 years ago

Filip, on this link, doesn't have any mention abou token and MBP Pro. All the instructions and steps, in any time show how to select MDP Pro using nom. I need to know step by step, how to install the MDB Pro using npm. At the link you gave does not explain. Can you help me ?

Add comment

Filip Kapusta premium answered 6 years ago