Metronic Bootstrap Admin Installation with Gulp

  • Home -
  • Tutorials -
  • Metronic Bootstrap Admin Installation with Gulp

Before we start with the installation, we will need to make sure that all the necessary files and dependencies are ready and installed. If you already have all the items below downloaded and installed, you can proceed to the next step.

Step 1: Dependency Installations

The first and most important file to get is Metronic. You can purchase and download it here: https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469

Once downloaded, extract the file and it should look something like this:

Metronic Folder

Note: The version number may differ when there is a new version available. However, the process will be the same.

Next, we need to download and install Node JS. Node.JS is a Javascript Runtime Environment that allows us to have convenient build tools for all our customers to enjoy.

Node JS: https://nodejs.org/en/download/

Step 2: Package Managers

Once you have Node JS installed, navigate to your extract location of Metronic and browse to our default HTML version’s tools folder: [Metronic]/theme/html/tools/

Open your command prompt by typing in “cmd” in the address bar of in your windows explorer:

cmd shortcut

For Macs, you will need to open up your terminal and type in the path to the same tools folder above.

Once your command prompt is open, we will proceed to install our package managers by typing in the following command in the command prompt:

npm install --global npm@latest


install npm

Once it is done installing, you will be able to start typing new commands when it is done. We need to install yarn by typing in this command in the same command prompt

npm install --global yarn


Again, once yarn’s installation is done, next package to install is Gulp. You can install it by typing this command:

npm install --global gulp-cli


If you already have an older gulp version installed, you may need to uninstall it to ensure that the older version does not conflict with the latest Gulp version. You can remove it by using this command:

npm rm --global gulp


Once Gulp is installed, you can verify the version by typing this:

gulp --version


Now that all prerequisite packages have been installed, we can proceed to download and install Metronic’s plugin dependencies. To do so, key in:

yarn

Step 3: Compiling Assets

Once all plugin dependencies are done installing, within the same command prompt, key in:

gulp --demo1


To start compiling and deploying the assets (e.g. JS, CSS, media files, plugin files) to the dist folder. The “dist” folder is where all the Metronic HTML files are located. You can control which demo assets you would like to compile by changing the command option.

A command option is a certain keyword that comes after 2 hyphens, in this case it is “--demo1”. By using --demo1, you are instructing the script to compile and deploy demo 1 assets, therefore, if you need to compile and deploy another demo, simply switch this option to another demo name (e.g. --demo2).

Once gulp is done, it should look something like this:

gulp installation completed

Step 4: Running Metronic

There are 2 ways we can run Metronic. First, we can simple open our index.html in a browser. You can locate the index.html in /themes/html/<demo>/dist/index.html

Second, you can run Metronic on a localhost environment by typing in the command below within the same command prompt you have opened:

gulp localhost


Once your localhost is up and running, copy the localhost URL from the command prompt:

gulp localhost

The default localhost URL should be http://localhost:8080

That’s it! You can now start browsing Metronic’s dashboards, widgets, datatables, and so much more.

We also have a video tutorial of this topic here: https://keenthemes.com/tutorials/install-metronic-with-gulp

Stockholm-icons / General / User Created with Sketch. by Shane
Stockholm-icons / Communication / Group-chat Created with Sketch. 0 Comments
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch. 3 weeks ago

Popular Tutorials

Javascript Customization With Metronic Bootstrap Admin Theme

Learn how to customize and organize Metronic Bootstrap Admin Theme's Javascript code with Gulp or...

Metronic Bootstrap Admin Installation with Gulp

Having trouble trying to get Metronic running on your local machine? Check this out. We have outl...

Why Build Tools are Considered essential in Today’s Web Development?

In development, you will most likely come across situations where you’ll need to do certain...

Stay Connected

Need Some More Info?

Support Channels

Stockholm-icons / Code / Github Created with Sketch.
Github Channel

Get access to our Metronic and Keen themes private Github repositories.

Stockholm-icons / General / Clipboard Created with Sketch.
Documentation

Check our extensive Metronic and Keen themes documentation pages.

Stockholm-icons / Communication / Group Created with Sketch.
Reach Our Support

Contact our support team via support@keenthemes.com for any pre-sale and the theme support questions.

FAQ Highlights

Full FAQ Stockholm-icons / Navigation / Arrow-right Created with Sketch.

In short, administrator themes are production ready frontend UI/UX templates that you can use and integrate into your project. In some cases, projects that utilize admin themes may not need to a UI/UX designer or a frontend developer to complete their project.

Admin themes usually come in HTML with CSS and JS all readily packed within it’s application, therefore the project development will only require to have the backend logic sorted and integrate that backend with the admin theme to have a complete working application.

Whilst there are free admin themes available, premium admin themes are where things get more interesting.

The purchased package includes a full source code of SASS, Javascript, HTML, media, compiled assets, build config and documentation files.

All demos, apps, pages, components and plugins shown in the preview will be included as well.

Each purchased license is limited for a single usage, therefore for each usage a separate license is required.
No, you don't have to. All future updates are free of charge per your purchased license.
Purchased licenses have no expiration date and they do not require any recurring payment.
Yes, absolutely. You can reuse your solution that is based on Metronic in multiple projects by purchasing required number of licenses. Each usage must have a separate license.
Stockholm-icons / Navigation / Up-2 Created with Sketch.