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
Please provide your MDB username and password which you use to login on our website. Social login not supported yet!

3. Initialize a project:

mdb init
Please use arrows to move up and down to choose desired project

4. Publish your project:

mdb publish
Now you can visit the link which is displayed on your screen, which is similar to this one: https://mdbootstrap.com/projects/{username}/{projectName}/

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.


Before we start

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

Installation and configuration guide

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:

Step 1. Node.js installation

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable web applications. To install it, please:

1. Go to nodejs.org and download node.js

2. Launch the installer and install Node with all default settings (that means - click "next" until it gets installed).

Step 2. Git installation

This is necessary both for proper project development and MDB CLI to be able to clone starter projects.

Git is a version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers. To install it, please:

1. Go to gitforwindows.org and download Git.

2. Launch the installer and install Git with all default settings (similar to above - click "next" until it gets installed).

Step 3. Installing MDB CLI globally

1. Open Windows PowerShell and type:

> npm install -g mdb-cli

The npm install command we've used here is a command that uses the Node Package Manager (npm) to install MDB CLI onto your computer.

The -g flag in this command tells npm to install MDB CLI globally onto your computer, which allows you to use the mdb command anywhere on your system.

Note: I'm using Arch Linux 4.18 (https://www.archlinux.org/) with Pacman package manager (https://wiki.archlinux.org/index.php/Pacman). Therefore, the commands used for installing required packages may vary depending on your OS and package manager.

Step 1. Node.js installation

I assume you have nvm installed on your system. If not, please refer to the official installation guide and come back once you're done.

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable web applications. To install it, please:

1. Open your favourite terminal and type:

# nvm install node

2. Make sure Node.js and NPM has been installed on your system by simply checking the versions:

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

The results of the two commands above may show different versions of the packages. Don't worry, it's all fine. Both projects are actively developed and new versions are continuously released.

Step 2. Git installation

This is necessary both for proper project development and MDB CLI to be able to clone starter projects.

Git is a version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers.

1. Open your favourite terminal and type:

# pacman install git

2. Make sure Git has been installed on your system by simply checking the version:

# git --version
git version 2.18.0

The result may show different version. Don't worry, it's all fine. Although it's better to have Git version 2.x, the 1.x version will also work.

Step 3. Installing MDB CLI globally

1. Open your favourite terminal and type:

# 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!