keyboard_double_arrow_left
help Help & getting started

Quick Setup

This guide will help you set up and run the project using Gulp for development and production.

1.- Install Node.js
  • Make sure Node.js is installed.

  • Recommended version: Node.js 16.x LTS or later.

  • Download from: https://nodejs.org


2.- Install gulp.js

Install the gulp command from your PC terminal

C:\Users\user_name>
npm install --global gulp-cli
  • Recommended version: gulp.js --cli version 2.0.0 LTS or later.

  • Recommended version: gulp.js --local version 4.0.0 LTS or later.

  • Get More Information on: https://gulpjs.com/docs/

  • Note: This is Mandatory

Install the gulp command from your PC terminal

/Users/your_username ~ %
sudo npm install --global gulp-cli
  • Recommended version: gulp.js --cli version 2.0.0 LTS or later.

  • Recommended version: gulp.js --local version 4.0.0 LTS or later.

  • Get More Information on: https://gulpjs.com/docs/

  • Note: This is Mandatory

Install the gulp command from your PC terminal

/home/your_username ~/
npm install --global gulp-cli
  • Recommended version: gulp.js --cli version 2.0.0 LTS or later.

  • Recommended version: gulp.js --local version 4.0.0 LTS or later.

  • Get More Information on: https://gulpjs.com/docs/

  • Note: This is Mandatory


3.- Install Dependencies

In your terminal or command prompt:

cd /your-project-directory/>
 npm install

This will install all required npm packages listed in package.json.


4.- Start Development Server

Run the following command to start the live preview server:

cd /your-project-directory/>
 gulp
This will:
  • Compile SCSS (LTR only)

  • Include HTML partials using @@include()

  • Copy assets and images to .temp/

  • Launch a browser preview with live reload

  • Watch for file changes (HTML, SCSS, Images)


5.- Build

To compile and optimize all files for production:

gulp build
This will:
  • Compile and minify SCSS, JS, and HTML

  • Generate both LTR and RTL CSS versions

  • Copy all assets (images, icons, SCSS, JS)

  • Replace node_modules paths with assets/vendor

  • Output will be in the dist/ folder, ready for deployment.


6.- Available Gulp Commands (Optional)
Command Description
gulp Start development server with live reload
gulp build Create full production build
gulp cleanDist Remove dist/ folder
gulp compileSCSS Compile SCSS files manually
gulp FileIncludeHtml Compile HTML with partials
gulp dzVendor Copy vendor libraries from node_modules

Quick Setup W3CoreUI

Get started quickly with W3CoreUI by following the essential setup steps for seamless integration.

  • Organize your project efficiently by following the recommended File Structure for better maintainability and scalability.
  • W3CoreUI offers a customizable UI with light & dark modes, color variants, flexible layouts, and responsive design. Refer to the Theme Features guide for setup.
  • Set up Sass compilation to generate the necessary styles for your project.
  • Check the Template Markup guide and include all required and optional assets in your project.
  • Refer to the Dark Mode guide if your project requires Dark Mode support.
  • For further assistance, please reach out to the core team by submitting a ticket through the Support Panel.