Setup Wieldy

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

Now, when you download Wieldy - React Redux Admin Template based on Ant Framework from themeforest.net. You will receive a zip file with a name like Wieldy-{x.x} where {x.x} represents to the latest version number.

Extracting this file will give you a folder which will further contain 4 sub-folders. This folder represents to the React version of Wieldy .

source/. You can use this folder to setup your demo project.

build/. Build folder contains the built distribution (production) version, which is for demo purpose only

To Run the Demo

Note: build/ folder contains the built distribution (production) version, which is for demo purpose only

You can build a local server using WAMP or XAMP (if you use PHP). Also it's pretty easy to build one with Python or Ruby (if you prefer either of them). Here, in our case, we are going to build a local server in NodeJS

Preparation:

You'll need to install Node.js >=v8.5.0 (Recommended Version) (NPM comes along with it) and serve (a NPM package)

For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest:

$ npm install -g serve
$ serve -s build

The last command shown above will serve your static site on the port 5000. Like many of serve’s internal settings, the port can be adjusted using the -p or --port flags.

It'll return something like this: 


   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:5000      │
   │   - On Your Network:  http://192.168.9.63:5000   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘

Then you can view the template on http://localhost:5000 in your browser

To setup Wieldy react demo

you can copy this source/ folder to the location where you want to setup the demo.

For example, to your desktop.

Now, after copying the folder, you can rename this with the project name you want to give it to. Let’s say wieldy-demo

Then open your command line tool. This is powershell in windows and terminal on mac/linux.

In this command line tool, let’s go inside the wieldy-demo folder with command CD

Once you are there, all you need to do is, run the command $ yarn. This will import all the dependencies Wieldy react demo uses.

Okay, so now we have all the dependency libraries imported successfully. Its the time to start demo in browser and all you need to do for that is run the command $ yarn start.

This will shortly run the demo in your default browser automatically.

So, that is all you have to do to import source code of the Wieldy react demo and run it locally. If you want to build a compiled version of demo. You need to run the command $ yarn build and this will build a compiled version of demo for you.

I hope this article was helpful