The steps below for the Default jQuery Package. If you want to use the Webpack, go to this Webpack Quick Start section.
-
Download the latest theme source from the marketplace.
-
Download and install Node.js from nodejs.org/en/download/
-
Start command prompt window or terminal and change directory to
[metronic]/theme/default/[demo]/tools/
cd theme/default/demo1/tools
-
Npm is the package manager for JavaScript and the world’s largest software registry. If you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.
npm install --global npm@latest
Verify that npm in successfully installed, and version of installed npm will appear.
npm --version
-
Install yarn via the npm.
npm install --global yarn
Don't forget to run
yarn upgrade
after every Metronic updates released in order to install newly added or updated 3rd-party plugins.
Usenpm cache clean --force
command, if installation had failed at any step. Retry from start after it done. -
Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally.
npm install --global gulp-cli
If you have previously installed a version of
gulp
globally, remove it to make sure old version doesn't collide with newgulp-cli
.npm rm --global gulp
Verify that gulp in successfully installed, and version of installed gulp will appear.
gulp --version
-
Install yarn dependencies. Must execute in
[metronic]/theme/default/[demo]/tools/
folder.yarn
-
This below command will compile all the assets(sass, js, media) and copy HTML templates to
[metronic]/theme/default/dist/
folder.gulp build
By default
dist
folder does not exist and it will be generated only after running gulp task. -
Start the localhost server.
gulp localhost
Keep the console open. Open this link to run
http://localhost:8080/
. It will take a few seconds for the build to finish and you will get a list of all available demos(e.g: demo1, demo2... demo6). Click your prefered demo for further preview.Press
Ctrl+C
to quit from localhost.
For more information about the Gulp
build tool, click here.