Note: To use MDB CLI you will need to create a free account.
Quick Start video version:
Quick Start 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 loginPlease provide your MDB username and password which you use to login on our website.
3. Initialize a project:
mdb initPlease use arrows to move up and down to choose desired project
4. Publish your project:
mdb publishNow you can visit the link which is displayed on your screen, which is similar to this one: https://mdbgo.io/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).
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/pricing/angular/pro/)' │ │ 2 │ 'Material Design for Bootstrap 4 (React)' │ 'Yes' │ │ 3 │ 'Material Design for Bootstrap Pro (React)' │ 'No (https://mdbootstrap.com/pricing/react/pro/)' │ │ 4 │ 'Material Design for Bootstrap 4 (Vue)' │ 'Yes' │ │ 5 │ 'Material Design for Bootstrap Pro (Vue)' │ 'No (https://mdbootstrap.com/pricing/vue/pro/)' │ │ 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!