MDB CLI – Quick Start

Note 1: According to your preference, you can follow a video or written version of the MDB CLI Quick Start

Note 2: To log in to MDB CLI you need an MDB account. If you do not have it, register first - it is also free.

Note 3: Social login not supported yet!

Video version:

Written version:

1 min quick start (short version)

To show the simplicity of using MDB CLI tool, we have prepared an ultra-short tutorial which covers all required steps to create and publish MDB project. Down below the short version you can find comprehensive version including detailed description.

Note : In order to use MDB CLI you have to have npm installed. If you don't have it please check this tutorial first

1. Install CLI:

npm install -g mdb-cli

2. Log into the CLI using your MDB account:

mdb login

3. Initialize a project:

mdb init

4. Publish your project:

mdb publish

You're done. You have just created and published an MDB project in 3 steps. Cool, isn't it?

If you are not familiar with how to install the MDB CLI tool or need better explanation or more commands, please read the tutorial below.

Step by step tutorial (long version)

MDB CLI is a useful tool that helps you create or publish MDB projects using a single command. Our CLI allows you to quickly initialize projects in different technology like jQuery, Angular, React and Vue.

Since we are using the inquirer module, you have to be aware of the fact that not all terminals are supported. As of now, these terminals are supported by MDB CLI:

• Mac OS:
  • Terminal.app
  • iTerm
• Windows:
  • ConEmu
  • cmd.exe
  • Powershell
  • Cygwin
• Linux (Ubuntu, openSUSE, Arch Linux, etc):
  • gnome-terminal (Terminal GNOME)
  • konsole

You are going to need a couple of tools installed before you can start using MDB CLI

Choose your operating system to display detailed instruction:

> npm install -g mdb-cli

# nvm install node

# node -v
v10.9.0
# npm -v
6.4.0

# pacman install git

# git --version
git version 2.18.0

# npm install -g mdb-cli

Step 4. Creating a project using MDB CLI

This is where the fun starts. Open your command line and navigate to the chosen location where you want to create a project

1. Open Windows PowerShell or other favourite terminal and type:

2. Log in to your MDB account:

mdb login

Please provide your username and password which you use to login on our website (https://mdbootstrap.com). Social login not supported yet!

3. List available packages:

Before we initialize a project, we need to see which are available for us. The availability is based on your orders. If you are a PRO user of our UI KIT you will see it available. Other packages will be unavailable until you buy a license. To see your orders, please type mdb orders in your terminal.

Let's check which packages are available for us:

mdb list

You should see a table with all our main products with Available field indicating that the product is available for you or not. Similar to this one:

[panseba@archlinux my-mdb-project]$ mdb list
┌─────────┬────────────────────────────────────────────────┬─────────────────────────────────────────────────────────┐
│ (index) │                  Product Name                  │                        Available                        │
├─────────┼────────────────────────────────────────────────┼─────────────────────────────────────────────────────────┤
│    0    │  'Material Design for Bootstrap 4 (Angular)'   │                          'Yes'                          │
│    1    │ 'Material Design for Bootstrap Pro (Angular)'  │ 'No (https://mdbootstrap.com/products/angular-ui-kit/)' │
│    2    │   'Material Design for Bootstrap 4 (React)'    │                          'Yes'                          │
│    3    │  'Material Design for Bootstrap Pro (React)'   │  'No (https://mdbootstrap.com/products/react-ui-kit/)'  │
│    4    │    'Material Design for Bootstrap 4 (Vue)'     │                          'Yes'                          │
│    5    │   'Material Design for Bootstrap Pro (Vue)'    │   'No (https://mdbootstrap.com/products/vue-ui-kit/)'   │
│    6    │   'Material Design for Bootstrap 4 (jQuery)'   │                          'Yes'                          │
│    7    │ 'Material Design for Bootstrap 4 Pro (jQuery)' │                          'Yes'                          │
└─────────┴────────────────────────────────────────────────┴─────────────────────────────────────────────────────────┘

Since this tutorial is directed to all our users I will show how to initialize the MDB jQuery FREE but if you want to go with the PRO version this is not a problem, the process is the same.

Ok now it's time to initialize a project.

4. Initialize a project:

mdb init

You should be prompted with a list of all our main products, similar to this one:

[panseba@archlinux my-mdb-project]$ mdb init
    ? Choose project to initialize (Use arrow keys)
    ❯ Material Design for Bootstrap Pro (Angular version)
    Material Design for Bootstrap 4 (Angular)
    Material Design for Bootstrap Pro (React version)
    Material Design for Bootstrap 4 (React)
    Material Design for Bootstrap Pro (Vue version)
    Material Design for Bootstrap 4 (Vue)
    Material Design for Bootstrap 4 Pro (jQuery version [standard Bootstrap] )
    (Move up and down to reveal more choices)

Please use arrows to move up and down to choose desired project. I'll go with Material Design for Bootstrap 4 (jQuery).

Once the initialization is done, you should see a following result:

[panseba@archlinux my-mdb-project]$ mdb init
? Choose project to initialize bootstrap-material-design
Initializing...
Cloning into 'bootstrap-material-design'...

┌─────────┬────────┬─────────────────────────────┐
│ (index) │ Status │           Message           │
├─────────┼────────┼─────────────────────────────┤
│    0    │   0    │ 'Initialization completed.' │
└─────────┴────────┴─────────────────────────────┘

Let's open the cloned directory and see what's inside:

cd bootstrap-material-design && ls -l

As you can see, we have a ready-to-use project with all necessary MDB files linked properly. Let's give it a name. To do it, simply open the package.json file and change name property, like this:

{
"name": "my-mdb-project",
...
}

From now on, you can modify the project in any way you want. For the demo purposes, I've only changed the index.html file a little bit.

Step 5. Publish the project:

Once your project is done, you surely would like to show it to the world. You can achieve this by simply running the following command from the root of your project:

mdb publish

After that, you should see that the MDB CLI tool is publishing your project on our servers. Once finished, the result should be similar to this one:

[panseba@archlinux bootstrap-material-design]$ mdb publish
Publishing...
✔ Uploading files | 9.192 Mb

Your application will be available under https://mdbootstrap.com/projects/s-kaczmarek/my-mdb-project address in about 3-5 mins.

┌─────────┬─────────────┬─────────────────┐
│ (index) │   Status    │     Message     │
├─────────┼─────────────┼─────────────────┤
│    0    │ 'published' │ 'Sent 9.192 Mb' │
└─────────┴─────────────┴─────────────────┘

The reason why it says that application will be available [...] in about 3-5 mins. is because it takes some time to properly upload the project on our servers. Nevertheless, it shouldn't take more than a few minutes (usually a few seconds) to do it.

That's it! You've learned how to install and configure MDB CLI tool and how to use it to initialize and publish MDB project on our servers. Good job!