Setup Wieldy Demo

In this article, we are considering that you have already setup all the tools mentioned in the above step Setup Development Environment.

Overview of folder structure

Now, when you download the item Wieldy from themeforest.net. You will receive a zip file with a name like wieldy-v-{x.x} where {x.x} represents to the latest version of Wieldy.

Extracting this file will give you a folder which will further contain multiple sub-folders and one of them is html-bs4/. You can use this folder for the HTML, jQuery and BS4 version.

  • default/

    This is the default layout Wieldy HTMl version offers in its demo. This folder contains all the files presented in demo at themeforest.net

  • vendors/ folder

    This is the folder where we place all the custom developed resources. For example, 200+ custom designed font-icons by us G-axon. You can add more custom developed resources here in this folder which you are intended to use throughout your application.

  • package.json folder

    This file is being used by NPM (Node Package Manager) and lists all the dependencies Wieldy HTML version has. So, if you want to add more packages to your project or remove any if you do not need, this is the right place to make those edits.

  • README.md folder

    This is an almost blank file and you can write any instructions or information here which you want to keep shared with other developers in your team.

The above is just a quick overview of folder structure. The detailed structure is explained in the section Folder & File Structure.

Setup the demo

Now, to setup the exact demo set at our demo, you need to follow below steps:

Step 1 - Setup your project folder

Of course, you need to create a new folder to setup your project on local machine. So, in this step, you can create a folder and give it the name of your project. For example, "my-new-project".

Step 2 - Copy and paste necessary folder and files

In this step, you need to copy below mentioned folder & files and paste them to your new created folder "my-new-project". In our case.

  • default/
  • vendors/
  • package.json
  • README.md (optional)

Step 3 - NPM Commands

Wieldy uses NPM (Node Package Manager) as its dependency manager. You will need to run following commands in terminal after changing your current directory path in terminal with cd /path-to-your-project-folder command. Once you are inside your project folder, run the following command:

 $ npm install

This command will install all the dependency libraries Wieldy uses. So, once this command is successfully ran, it will add another folder node_modules to your project folder and this folder will have all the dependency libraries.

Now, the next step of us will be to compile all the Sass (.scss) files our demo (default/) template need. For that, you will need to run following command:

$ npm run default-watch-style-sass

This command will run the sass compiler to convert the Sass files to css files which are related to default/ demo version.

There is one more command you will need to run as given below to generate the css related to browser compatibility

$ npm run default-css-prefix

Cheers! this is all you need to do to have the demo version installed at your end. You can start browsing the template in browser by accessing them from default/ folder.

Happy Coding!!!