Introduction

Nilova – Node JS Bootstrap 5 Premium Admin & Dashboard Template for All Your Web Projects

Nilova – Node JS Bootstrap 5 Premium Admin & Dashboard Template that combines modern and minimal design with full flexibility and responsiveness. It’s crafted using NodeJs , Express , CSS3 and JS offering seamless customization with SASS integration. Whether you’re building a web application, admin dashboard, or project management platform, this template ensures your site stands out with ease.

Support and Updates:

When you purchase Nilova, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

Dependencies for Nilova

What Do You Get with the Nilova:

Nilova provides all necessary ejs, CSS, SCSS, js files, along with detailed Documentation to help you easily customize and implement the template.

All ejs Files
CSS Files
SCSS Files
js Files
Documentation

Nilova Compatibility with Popular Browsers:

Nilova is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

Firefox
Safari
Opera
Chrome
Edge

Getting Start Guide

Setting Up the Local Environment & Workspace

This guide provides step-by-step instructions for setting up your development environment for the Node.js Admin Template built with Express, EJS, and express-ejs-layouts. It covers everything from the required prerequisites to installing dependencies, creating the project workspace, and running the application locally.

By following this guide, you'll have a properly configured development environment and be ready to start building or customizing your admin dashboard with confidence. Whether you're new to Node.js or an experienced developer, this guide will help you get your project up and running quickly.

Prerequisites

Before getting started, make sure you have the following installed:

Node.js (LTS version recommended)
npm (included with Node.js) or Yarn
A code editor such as Visual Studio Code
A modern web browser (Google Chrome, Microsoft Edge, Firefox, or Safari)

Recommended Knowledge

To get the most out of this template, you should have a basic understanding of:

Node.js
Express.js
EJS (Embedded JavaScript Templates)
express-ejs-layouts
HTML, CSS, and JavaScript

Familiarity with Express routing, middleware, and server-side rendering is helpful but not required.

Development Environment Setup

After installing the prerequisites, follow these steps:

Install the project dependencies using npm or Yarn.
Configure the required environment variables (if applicable).
Start the development server.
Open your browser and navigate to the local development URL.
Verify that the application loads successfully.

Once the application is running, you're ready to customize the admin template, create new pages, add routes, integrate APIs, and build your application.

Installation Process

How to Run the Nilova Template:

Step 1:

Download the project, extract it, and navigate to the final template folder named Nilova-Node Final. Open the template to proceed.

Step 2:

Open your terminal or command prompt and run the following command to install the packages:

code

npm install

(Or)

code

yarn install

Step 3:

After the installation, run the project using the following command:

code

npm run dev

(Or)

code

yarn run dev

Once you serve your application by default it will take their default port using http://localhost:3000

How to Convert SCSS to CSS:

If you need to change any styles, modify the SCSS files. To convert SCSS to CSS, run the following command:

code

npm run sass

Note : Whenever you make changes to the SCSS files, run `npm run sass` to start Sass watch mode. After starting, it will continuously monitor the SCSS files and automatically compile any further changes into CSS files inside the `public/assets/css` folder. Keep the terminal running while working on SCSS files.

Note:

If your are using "npm install", You should need to delete the "yarn-lock file" from project root.

If your are using "yarn install", You should need to delete the "package-lock.json file" from project root.

To install the peer Depencies

In general, the npm i command is used to install all dependencies or devDependencies from a package. However, sometimes you may encounter errors while installing certain dependencies. In such cases, the --force argument can be used to force npm to install those dependencies.

Using the --force argument can be helpful when you need to install a specific dependency that is causing issues during installation. However, it should be used with caution, as it can potentially cause conflicts with other dependencies or lead to unexpected behavior. It's always a good idea to thoroughly test your application after using the --force argument to ensure that everything is working as expected.

code

npm install --force

Skipping the installation of peer dependencies can sometimes lead to issues with the functionality or compatibility of the package. To ensure that your package functions correctly, it's important to manually install any missing peer dependencies using the npm install command. When installing peer dependencies, you should also be aware of the potential for conflicts with other packages or dependencies. It's a good idea to carefully review the peer dependencies required by each package and ensure that they are compatible with other packages in your project. By taking these steps, you can avoid potential issues and ensure that your packages are installed and functioning correctly.

code

npm install--legacy-peer-deps

We have to use only one file example: (for yarn yarn-lock) & (for npm package-lock.json) file

"Similarly, the starter kit can be installed as well."

Installation Video

Video Link

Folder Structure

StaterKit Guide

Purpose of a starter kit

Introduction to the Nilova - Node.js Bootstrap 5 Starter Kit Template:

The Nilova Starter Kit is a preconfigured template designed to help developers quickly start building modern web applications using Node.js, Express.js, EJS, and Bootstrap 5. It provides a clean project structure with reusable layouts, pages, partials, controllers, and routes to simplify development.

Purpose of the Nilova Starter Kit Template:

The purpose of the Nilova Starter Kit is to reduce development time by offering a well-organized project structure and essential configurations. Instead of creating the application architecture from scratch, developers can focus on implementing business logic and application features while following industry best practices.

Benefits of Using the Nilova - Node.js Starter Kit Template:

The starter kit includes a structured folder organization for controllers, routes, views, layouts, partials, static assets, and configuration files. It also comes with Express.js, EJS templating, Bootstrap 5, and Express Layouts already configured, making it easier to build scalable and maintainable web applications.

Before using this template, developers should have a basic understanding of Node.js, Express.js, EJS, and web development fundamentals.

Starter Kit Overview

This Starter Kit is ideal for creating new Node.js web applications. It provides the essential project structure without the additional components included in the full admin template, allowing developers to build applications more efficiently.

The template includes pre-built layouts such as the sidebar, header, footer, authentication pages, error pages, and reusable UI components, making it easy to start development immediately.

For further information or support regarding the template, please contact us using the link below.

https://support.spruko.com/

Starterkit Folder Structure

Take a quick look at the folder structure of the "Starterkit."
Integration of your customized ejs pages becomes easy when using the "Starterkit."
The "Starterkit" provides all the layout components, related assets, and plugins.
To explore the contents of the "Starterkit," unzip the project folder received after purchase.

Main Layout

Basic Layout Structure

Main Layout structure of the Nilova template .Root:src/views/Layouts/mainLayout.ejs

ejs

                                            
<!DOCTYPE html>
<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-width="fullwidth" data-menu-styles="dark" data-toggled="close">

  <%- include('../partials/mainHead') %>

  <body class="<%= bodyClassName %>">

    <div class="progress-top-bar"></div>

    <%- include('../partials/switcher') %>

    <%- include('../partials/loader') %>

    <div class="page">

      <%- include('../partials/header') %>

      <%- include('../partials/sidebar') %>

      <!--APP-CONTENT START-->
      <div class="main-content app-content">

        <%- include('../partials/pageHeader') %>

        <div class="container-fluid page-container main-body-container">

          <%- body %>

        </div>

      </div>

      <%- include('../partials/footer') %>

      <%- include('../partials/responsive-search-modal') %>

    </div>

    <%- include('../partials/commonjs') %>

    <%- include('../partials/custom_switcherjs') %>

    <!-- Custom JS -->
    <script src="/assets/js/custom.js"></script>

  </body>

</html>

Svelte File Structure

General Svelte file structure of the Nilova template .Root:src/views/Pages/pages/empty.ejs

ejs

    
<!-- Start::row-1 -->
<div class="row">
  <div class="col-xl-12">
    <div class="card custom-card">
      <div class="card-body">
        <div class="mb-0 fs-16 fw-medium">Empty Card</div>
      </div>
    </div>
  </div>
</div>
<!--End::row-1 -->

Express.js Routing

Routing is one of the core features of Express.js. It determines how your application responds when a user visits a specific URL. In this template, every page follows a structured routing architecture that keeps the project clean, modular, and easy to maintain.

Instead of directly accessing an EJS file, every request passes through a route. The route executes a controller function, and the controller renders the appropriate view using res.render(). This structure follows the MVC (Model-View-Controller) pattern, making the project easier to understand and extend.

Routing Flow

    
                                    
                                       Browser Request
                                             │
                                             ▼
                                       Route
                                             │
                                             ▼
                                       Controller
                                             │
                                             ▼
                                       res.render()
                                             │
                                             ▼
                                       EJS View
                                             │
                                             ▼
                                       Browser Response

How Routing Works

Whenever a user visits a URL, Express searches for the matching route inside the src/routes directory. Once the route is found, Express calls the corresponding controller function. The controller then renders the required EJS file from the src/views directory and returns the generated HTML to the browser.

For example, when a user visits:

http://localhost:3000/401-error

The request follows this sequence:

    

                                Browser
                                   │
                                   ▼
                                src/routes/error/error.routes.js
                                   │
                                   ▼
                                src/controllers/error.controller.js
                                   │
                                   ▼
                                res.render("Pages/pages/error/401-error")
                                   │
                                   ▼
                                src/views/Pages/pages/error/401-error.ejs
                                   │
                                   ▼
                                Browser Response

Adding a New Route

Follow the steps below whenever you want to add a new page to the template.

Step 1 - Create the View

First, create your EJS file inside the src/views/Pages directory. Organize your pages into folders based on their module to keep the project structure clean.

Example

    
        src/views/Pages/pages/error/401-error.ejs

or

    
        src/views/Pages/dashboard/index.ejs

Keeping related pages together makes the project easier to navigate and maintain.

Step 2 - Create the Controller

After creating the view, create a controller function that renders the page. Controller files are located inside:

src/controllers/

Example:


exports.error401 = (req, res) => {
    res.render("Pages/pages/error/401-error", {
        mainHeadTitle: "Error 401",
        layout: "Layouts/authLayout",
        authClassName: "",
    });
};

Understanding `res.render()`

The res.render() method tells Express which EJS file should be displayed. The path passed to res.render() must always match the location of the file inside the src/views directory.


res.render("Pages/pages/error/401-error");

If your file is located at:

src/views/Pages/dashboard/index.ejs

Then it should be rendered like this:


res.render("Pages/dashboard/index");

Note: Do not include the .ejs extension when using res.render().

You can also pass page-specific data by providing an object as the second argument.


res.render("Pages/dashboard/index", {
    mainHeadTitle: "Dashboard",
    layout: "Layouts/mainLayout"
});

Step 3 - Create the Route

Once the controller has been created, register the URL inside the corresponding route file.

Route File

src/routes/error/routes.js


const express = require("express");
const errorController = require("../controllers/error.controller");

const router = express.Router();

router.get("/401-error", errorController.error401);

module.exports = router;

In this example, when a user visits /401-error, Express automatically executes errorController.error401(), which renders the corresponding EJS page.

Step 4 - Register the Route Module

After creating the route file, it must be registered inside the application's main routing file, src/routes/index.routes.js. This file acts as the central router where all module routes are combined.

Main Route File

src/routes/index.routes.js


const express = require("express");
const router = express.Router();

const errorRoutes = require("./error/routes");

router.use("/", errorRoutes);

module.exports = router;

Registering module routes inside index.routes.js keeps your routing structure modular and makes it easier to manage multiple route files.

Step 5 - Register the Main Router in app.js

After registering all module routes inside src/routes/index.routes.js, import the main router into app.js.

app.js


const express = require("express");
const path = require("path");
const expressLayouts = require("express-ejs-layouts");

const app = express();

const routes = require("./routes/index.routes");

// Serve static files
app.use(express.static("public"));

// Enable layouts
app.use(expressLayouts);

// Default layout
app.set("layout", "Layouts/mainLayout");

// Register all routes
app.use("/", routes);

module.exports = app;

Since every module route is already registered inside index.routes.js, only the main router needs to be imported into app.js. This keeps the application's entry file clean and organized.

Step 6 - Add the Sidebar Menu

If you want the page to appear in the application's navigation, add a menu item inside the sidebar component.

Sidebar File

src/views/partials/sidebar.ejs



    <a href="/401-error">
        <i class="ti ti-alert-circle"></i>
        <span>401 Error</span>
    </a>

Once added, users can access the page directly from the sidebar.

Complete Routing Workflow

    

                                 Step 1
                                 Create View
                                 src/views/Pages/

                                         │
                                         ▼

                                 Step 2
                                 Create Controller
                                 src/controllers/

                                         │
                                         ▼

                                 Step 3
                                 Create Route
                                 src/routes/module/routes.js

                                         │
                                         ▼

                                 Step 4
                                 Register Route Module
                                 src/routes/index.routes.js

                                         │
                                         ▼

                                 Step 5
                                 Register Main Router
                                 app.js

                                         │
                                         ▼

                                 Step 6
                                 Add Sidebar Navigation
                                 src/views/partials/sidebar.ejs

                                         │
                                         ▼

                                 Open the URL in Browser

                                 Example:
                                 http://localhost:3000/401-error

Best Practices

Keep all page files inside the src/views/Pages directory.
Create separate controller files for different modules.
Keep route files organized by module inside the src/routes directory.
Always register module routes inside src/routes/index.routes.js.
Import only index.routes.js into app.js.
Ensure the path passed to res.render() matches the view's location.
Never include the .ejs extension in res.render().
Use meaningful route URLs and controller function names.
Add sidebar links only for pages that should be accessible through the navigation.
Follow the existing project folder structure for consistency.

Summary

Every page in this template follows the same workflow: create the view, create the controller, create the route, register the route inside index.routes.js, import the main router into app.js, and finally add the sidebar navigation if required. Following this structure keeps the project modular, organized, and easy to scale as new pages and features are added.

Nilova comes with power of Gulp

Gulp is a popular JavaScript task runner that automates common development tasks, such as compiling Sass to CSS, minifying JavaScript and CSS files, optimizing images, and more. Gulp allows developers to define tasks that process files in a project, and then run those tasks automatically when files are changed or when specific commands are issued.for more information about gulp Check here.

Prerequisites:

To install and set up all the prerequisites, follow these steps:

Ensure that Node.js is installed and running on your computer. If Node.js is already installed, you can skip this step. Otherwise, install it on your computer.

If you want to install and use the latest version of Node.js, you can find the necessary instructions on the official website.

To set up gulp, you need to install it globally on your system. Run one of the following commands in your terminal:

code

 npm install -g gulp

or

code

 npm install --save-dev gulp

Installation

Please follow below steps to install and setup all pre requisites:

Make sure to have all above pre requisites installed & running in your computer

Open your terminal, go to your folder and enter below command. This would install all required dependencies in node_modules folder.

code

 npm install

Build Production File

After completing the above steps, run the following command from the project root (Nilova/) in your terminal or command prompt:

code

 gulp

Note:-Ensure all required node_modules are installed to run the gulp tasks successfully.

The following command performs several tasks to streamline your development workflow below are some of the task it performs :

Generates the libs/ and CSS/ Folders directory

FAQ'S

Step 1:

Go To style.scss (public/assets/scss/styles.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file

How to Select font Family

Step 2:

And paste Your Selected font-family in style.scss

Step 3:

And add the Your Selected font-family in _variables.scss(src/assets/scss/_variables.scss)

code

--default-font-family: "Google Sans", sans-serif;

By default menu icons are lucideicons if you want to change To change Menu icons, open sidebar.html page Path:src/views//Pages/partials/sidebar.ejs and go through app-sidebar section, in that section you will find lucideicons of menu in svg tag, there you can replace previous icon with your icon. Example as shown in below

Before: (lucide icons)

html

After: (bootstrap Icons)

html

Go To "public/assets/images/brand-logos" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

Step1:

To clear LocalStorage loading functions you need to remove localStorageBackup2() function in custom-switcher.min.js public/assets/js/custom-switcher.min.js as shown below

javascript

function localStorageBackup2() {}

Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear in custom-switcher.js public/assets/js/custom-switcher.min.jsfile.Below are the some examples to find out.

javascript

localStorage.setItem( );
localStorage.removeItem( );
localStorage.getItem( )
localStorage.clear();
localStorageBackup();

Step3:

To remove complete LocalStorage saving you also need to remove main.js link present in mainhead.ejs Path:src/views/partials/mainHead.ejs as shown below

ejs

<script src="/assets/js/main.js"></script>

Step1:

To remove switcher icons remove below code shown in header.ejs src/views/partials/header.ejs file

ejs

 <!-- Start::header-element -- >
    <li class="header-element">
        <!-- Start::header-link|switcher-icon -->
        <a href="javascript:void(0);" class="header-link switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
            <svg class="header-link-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
                <path d="M16.3083 4.38394C15.7173 4.38394 15.4217 4.38394 15.1525 4.28405C15.1151 4.27017 15.0783 4.25491 15.042 4.23828C14.781 4.11855 14.5721 3.90959 14.1541 3.49167C13.1922 2.52977 12.7113 2.04882 12.1195 2.00447C12.04 1.99851 11.96 1.99851 11.8805 2.00447C11.2887 2.04882 10.8077 2.52977 9.84585 3.49166C9.42793 3.90959 9.21897 4.11855 8.95797 4.23828C8.92172 4.25491 8.88486 4.27017 8.84747 4.28405C8.57825 4.38394 8.28273 4.38394 7.69171 4.38394H7.58269C6.07478 4.38394 5.32083 4.38394 4.85239 4.85239C4.38394 5.32083 4.38394 6.07478 4.38394 7.58269V7.69171C4.38394 8.28273 4.38394 8.57825 4.28405 8.84747C4.27017 8.88486 4.25491 8.92172 4.23828 8.95797C4.11855 9.21897 3.90959 9.42793 3.49166 9.84585C2.52977 10.8077 2.04882 11.2887 2.00447 11.8805C1.99851 11.96 1.99851 12.04 2.00447 12.1195C2.04882 12.7113 2.52977 13.1922 3.49166 14.1541C3.90959 14.5721 4.11855 14.781 4.23828 15.042C4.25491 15.0783 4.27017 15.1151 4.28405 15.1525C4.38394 15.4217 4.38394 15.7173 4.38394 16.3083V16.4173C4.38394 17.9252 4.38394 18.6792 4.85239 19.1476C5.32083 19.6161 6.07478 19.6161 7.58269 19.6161H7.69171C8.28273 19.6161 8.57825 19.6161 8.84747 19.716C8.88486 19.7298 8.92172 19.7451 8.95797 19.7617C9.21897 19.8815 9.42793 20.0904 9.84585 20.5083C10.8077 21.4702 11.2887 21.9512 11.8805 21.9955C11.96 22.0015 12.0399 22.0015 12.1195 21.9955C12.7113 21.9512 13.1922 21.4702 14.1541 20.5083C14.5721 20.0904 14.781 19.8815 15.042 19.7617C15.0783 19.7451 15.1151 19.7298 15.1525 19.716C15.4217 19.6161 15.7173 19.6161 16.3083 19.6161H16.4173C17.9252 19.6161 18.6792 19.6161 19.1476 19.1476C19.6161 18.6792 19.6161 17.9252 19.6161 16.4173V16.3083C19.6161 15.7173 19.6161 15.4217 19.716 15.1525C19.7298 15.1151 19.7451 15.0783 19.7617 15.042C19.8815 14.781 20.0904 14.5721 20.5083 14.1541C21.4702 13.1922 21.9512 12.7113 21.9955 12.1195C22.0015 12.0399 22.0015 11.96 21.9955 11.8805C21.9512 11.2887 21.4702 10.8077 20.5083 9.84585C20.0904 9.42793 19.8815 9.21897 19.7617 8.95797C19.7451 8.92172 19.7298 8.88486 19.716 8.84747C19.6161 8.57825 19.6161 8.28273 19.6161 7.69171V7.58269C19.6161 6.07478 19.6161 5.32083 19.1476 4.85239C18.6792 4.38394 17.9252 4.38394 16.4173 4.38394H16.3083Z" stroke="currentColor" stroke-width="1.75"></path>
                <path d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z" stroke="currentColor" stroke-width="1.75"></path>
            </svg>
        </a>
        <!-- End::header-link|switcher-icon -->
    </li>
    <!-- End::header-element -- >

Step2:

After removing code in header.ejs page remove switcher.ejs partial link shown below in mainLayout.ejs file

ejs

<%- include('../partials/switcher') %>

Step3:

Remove the switcher partial in every page also remove custom_switcherjs.ejs partial in mainLayout.ejs file

ejs

<%- include('../partials/custom_switcherjs') %>

Step4:

Remove main.js link present in mainHead.ejs Path:src/views/partials/mainHead.ejs as show below

html

<script src="/assets/js/main.js"></script>

Step5:

Remove below shown code in custom.js file Path:public/assets/js/custom.js

javascript

/* for theme primary */
        Remove Between Code
    /* for theme primary */
    
    /* for theme background */
        Remove Between Code
    /* for theme background */

Step6:

Finally add below shown code in custom.js file Path:public/assets/js/custom.js

javascript

  /* header theme toggle */
  
        function toggleTheme() {
          let html = document.querySelector("html");
          if (html.getAttribute("data-theme-mode") === "dark") {
            html.setAttribute("data-theme-mode", "light");
            html.setAttribute("data-header-styles", "light");
            html.setAttribute("data-menu-styles", "dark");
            if (!localStorage.getItem("primaryRGB")) {
              html.setAttribute("style", "");
            }
            html.removeAttribute("data-bg-theme");
            document.querySelector("#switcher-light-theme").checked = true;
            document.querySelector("#switcher-menu-dark").checked = true;
            document.querySelector("html").style.removeProperty("--body-bg-rgb", localStorage.bodyBgRGB);
            html.style.removeProperty("--body-bg-rgb2");
            html.style.removeProperty("--light-rgb");
            html.style.removeProperty("--form-control-bg");
            html.style.removeProperty("--input-border");
            document.querySelector("#switcher-header-light").checked = true;
            document.querySelector("#switcher-background4").checked = false;
            document.querySelector("#switcher-background3").checked = false;
            document.querySelector("#switcher-background2").checked = false;
            document.querySelector("#switcher-background1").checked = false;
            document.querySelector("#switcher-background").checked = false;
            localStorage.removeItem("nilovadarktheme");
            localStorage.removeItem("nilovaMenu");
            localStorage.removeItem("nilovaHeader");
            localStorage.removeItem("bodylightRGB");
            localStorage.removeItem("bodyBgRGB");
            html.setAttribute("data-header-styles", "light");
          } else {
            html.setAttribute("data-theme-mode", "dark");
            html.setAttribute("data-header-styles", "dark");
            if (!localStorage.getItem("primaryRGB")) {
              html.setAttribute("style", "");
            }
            html.setAttribute("data-menu-styles", "dark");
            document.querySelector("#switcher-dark-theme").checked = true;
            document.querySelector("#switcher-menu-dark").checked = true;
            document.querySelector("#switcher-header-dark").checked = true;
          
            document.querySelector("#switcher-background4").checked = false;
            document.querySelector("#switcher-background3").checked = false;
            document.querySelector("#switcher-background2").checked = false;
            document.querySelector("#switcher-background1").checked = false;
            document.querySelector("#switcher-background").checked = false;
            localStorage.setItem("nilovadarktheme", "true");
            localStorage.setItem("nilovaMenu", "dark");
            localStorage.setItem("nilovaHeader", "dark");
            localStorage.removeItem("bodylightRGB");
            localStorage.removeItem("bodyBgRGB");
          }
        }
      document.querySelectorAll(".layout-setting").forEach((el) => {
          el.addEventListener("click", toggleTheme);
      });
      
        /* header theme toggle */

Step1:

Remove below shown code in head part of the head.ejs file Path:src/views/partials/landing/head.ejs

javascript

<script>
if(localStorage.nilovadarktheme){
    document.querySelector("html").setAttribute("data-theme-mode","dark")
}
if(localStorage.nilovartl){
    document.querySelector("html").setAttribute("dir","rtl")
    document.querySelector("#style")?.setAttribute("href", "/assets/libs/bootstrap/css/bootstrap.rtl.min.css");
}
if(localStorage.nilovaltr){
    document.querySelector("html").setAttribute("dir","ltr")
    document.querySelector("#style")?.setAttribute("href", "/assets/libs/bootstrap/css/bootstrap.min.css");
}
let html = document.querySelector("html");
if (window.innerWidth < 992) {
html.setAttribute("data-toggled", "close");
}
</script>

Step2:

Remove below code from landing.js file Path:public/assets/js/landing.js

javascript

/*------swipter-js-----*/
    Remove Code Between
    /*------swipter-js-----*/

Step3:

Remove below shown code in app-sidebar of landing.ejs file Path:src/views/Pages/pages/landing.ejs

ejs

<a href="javascript:void(0);" class="btn btn-icon btn-primary-light switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
        <i class="ti ti-settings"></i>
    </a>

Step4:

Remove below shown code in app-header of landing.html file Path:src/views/Pages/pages/landing.ejs

ejs

<button class="btn btn-icon btn-success switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
        <i class="ri-settings-3-line"></i>
    </button>

Please follow the below steps to change Primary Color

Step 1 :

To change Primary Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (public/assets/scss/_variables.scss )

Note : After changing the styles, you must run the gulp command "gulp" . For more gulp commands, see the gulp page click here.

8. How to Change Dark body Color?

Please follow the below steps to change Dark body Color

Step 1 :

Make sure the theme is set completely to dark mode by adding the following attributes to the html tag data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

Step 2 :

To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (public/assets/scss/_variables.scss )

Step 3 :

Also Change the following variable colors to the desired theme background accordingly in [data-theme-mode="dark"]

--light-rgb :
--form-control-bg :
--input-border :
--gray-3 :

Additional Plugins Included :

The following plugins have also been included, apart from the ones already listed in the above sections

Plugin	Version	URL
Bootstrap	v5.3.3	https://www.npmjs.com/package/bootstrap
apexcharts	v3.42.0	https://www.npmjs.com/package/apexcharts
chart.js	v4.4.3	https://www.npmjs.com/package/chart.js?activeTab=readme
Echarts	v5.5.1	https://www.npmjs.com/package/echarts
select2 dropdown	v8.4.4	https://www.npmjs.com/package/select2
shepherd.js	v11.2.0	https://www.npmjs.com/package/shepherd.js?activeTab=readme
vanilla-wizard	v0.0.7	https://www.npmjs.com/package/wizard

Credit's

Icons Credit

Icons	References
Bootstrap Icons	https://icons.getbootstrap.com/
Boxicons	https://boxicons.com/
Remix Icons	https://remixicon.com/
Feather Icons	https://feathericons.com/
Tabler Icons	https://tabler-icons.io/
Line Awesome Icons	https://icons8.com/line-awesome
Phosphor Icons	https://phosphoricons.com/

Images Credit

Images	References
Vecteezy	https://www.vecteezy.com/
Iconscount	https://iconscout.com/
Unsplash	https://unsplash.com/
Png Tree	https://pngtree.com/
flaticon	https://www.flaticon.com/authors/flat-icons
freepik	https://www.freepik.com

Fonts Credit

Font	References
Google Fonts	https://fonts.google.com/

Sidemenu Icons

Icon	References
phosphor Icons	https://phosphoricons.com/

Switcher styles

You can change the Theme Styles & Colors by adding the attribute to the html tag in mainhead.ejs (Root:src/views/Layouts/mainLayout.ejs)

ejs

<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="transparent" data-width="fullwidth" data-menu-styles="transparent" data-page-style="flat" data-toggled="close"  data-vertical-style="doublemenu" data-toggled="double-menu-open">

Default:

html

data-theme-template="default" data-header-styles="light" data-menu-styles="dark"

Fusion:

html

data-theme-template="fusion" data-header-styles="transparent" data-menu-styles="light"

Modern:

html

data-theme-template="modern"  data-header-styles="gradient" data-menu-styles="light"

SaaS:

html

data-theme-template="saas"  data-header-styles="transparent" data-menu-styles="dark"

Neon:

html

data-theme-template="neon"  data-header-styles="transparent" data-menu-styles="dark"

Galaxy:

html

data-theme-template="galaxy" data-them-mode="dark" data-header-styles="dark" data-menu-styles="dark"

Elegant:

html

data-theme-template="elegant" data-header-styles="transparent" data-menu-styles="dark"

Flat:

html

data-theme-template="flat" data-header-styles="light" data-menu-styles="light" data-vertical-style="doublemenu" data-toggled="double-menu-open"

Prism:

html

data-theme-template="prism" data-header-styles="transparent" data-menu-styles="transparent"

Retro:

html

data-theme-template="retro" data-header-styles="transparent" data-menu-styles="dark" data-vertical-style="detached"

Frost:

html

data-theme-template="frost" data-header-styles="transparent" data-menu-styles="gradient"

Nova:

html

data-theme-template="nova"  data-header-styles="light" data-menu-styles="dark"

Light:

html

data-theme-mode="dark" data-header-styles="light" data-menu-styles="light"

Dark:

html

data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

LTR (Left to Right):

html

dir="ltr"

RTL (Right to Left):

html

dir="rtl"

Vertical:

html

data-nav-layout="vertical"

Horizontal:

html

data-nav-layout="horizontal" data-nav-style="menu-click"

Default:

Menu Click

data-nav-style="menu-click"

Menu Hover

html

data-nav-style="menu-hover"

Icon Click:

html

data-nav-style="icon-click"

Icon Hover:

html

data-nav-style="icon-hover"

Regular:

html

data-page-style="regular"

Classic:

html

data-page-style="classic"

Mordern:

html

data-page-style="modern"

Default Width:

html

data-width="default"

Full Width:

html

data-width="full-width"

Boxed:

html

data-width="boxed"

Fixed:

html

data-menu-position="fixed"

Scrollable:

html

data-menu-position="scrollable"

Fixed:

html

data-header-position="fixed"

Scrollable:

html

data-header-position="scrollable"

Closed:

html

data-vertical-style="closed"

Icontext:

html

data-vertical-style="icontext"

Overlay:

html

data-vertical-style="overlay"

Detached:

html

data-vertical-style="detached"

Doublemenu:

html

data-vertical-style="doublemenu"

Enable:

html

loader="enable"

Disable:

html

loader="disable"

Light Style:

html

data-menu-styles="light"

Dark Style:

html

data-menu-styles="dark"

Color Style:

html

data-menu-styles="color"

Gradient Style:

html

data-menu-styles="gradient"

Transparent Style:

html

data-menu-styles="transparent"

Light Style:

html

data-header-styles="light"

Dark Style:

html

data-header-styles="dark"

Color Style:

html

data-header-styles="color"

Gradient Style:

html

data-header-styles="gradient"

Transparent Style:

html

data-header-styles="transparent"

Background Image Style-1:

html

data-bg-img="bgimg1"

Background Image Style-2:

html

data-bg-img="bgimg2"

Background Image Style-3:

html

data-bg-img="bgimg3"

Background Image Style-4:

html

data-bg-img="bgimg4"

Background Image Style-5:

html

data-bg-img="bgimg5"

Choices JS :

Choices JS is very simple javascript plugin to style default select..

html

css

js

plugin link

https://choices-js.github.io/Choices/

Reference Link

https://www.npmjs.com/package/choices.js

Swiper JS :

Swiper JS is very modern javascript plugin to replace bootstrap carousel..

html

css

js

Plugin Link

https://swiperjs.com/

Reference Link

https://www.npmjs.com/package/swiper

Sweet Alerts :

Sweet Alerts is a modern javascript plugin for alert messages..

html

css

js

Plugin link

https://sweetalert2.github.io/

Reference Link

https://www.npmjs.com/package/sweetalert2

noui slider :

noui slider is a modern javascript plugin for alert messages..

html

css

js

<!-- noUiSlider JS -->
<script src="../assets/libs/nouislider/nouislider.min.js"></script>
<script src="../assets/libs/wnumb/wNumb.min.js"></script>

/* default slider */
var slider = document.getElementById('slidermain');
noUiSlider.create(slider, {
    start: [30, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

Plugin link

https://refreshless.com/nouislider/

Reference Link

https://www.npmjs.com/package/nouislider

FlatPickr :

FlatPickr is a modern javascript plugin alternative for date and time pickers..

html

css

js



    /* To choose date */
    flatpickr("#date", {});

Plugin link

https://flatpickr.js.org/examples/

Reference Link

https://www.npmjs.com/package/flatpickr

simonwep/pickr(ColorPicker) :

It is a modern javascript color picker..

html

css

js

Plugin link

https://simonwep.github.io/pickr/

Reference Link

https://www.npmjs.com/package/@simonwep/pickr

GLightbox (Gallery) : :

GLightbox is a modern javascript gallery plugin..

html

css

js


    

    var lightboxVideo = GLightbox({
        selector: '.glightbox'
    });
    lightboxVideo.on('slide_changed', ({ prev, current }) => {
        console.log('Prev slide', prev);
        console.log('Current slide', current);

        const { slideIndex, slideNode, slideConfig, player } = current;
    });

Plugin link

https://biati-digital.github.io/glightbox/

Reference Link

https://www.npmjs.com/package/glightbox

Full Calendar :

Full Calendar is a modern javascript calendar plugin..

html

js


   <!-- Moment JS -->
   <script src="../assets/libs/moment/min/moment.min.js"></script>

   <!-- Fullcalendar JS -->
   <script src="../assets/libs/fullcalendar/index.global.min.js"></script>
   <script src="../assets/js/fullcalendar.js"></script>

Plugin link

https://fullcalendar.io/

Reference Link

https://www.npmjs.com/package/fullcalendar

Leaflet Maps :

Leaflet Maps is a modern javascript maps plugin..

html

css

js

<!-- Leaflet Maps JS -->
<script src="../assets/libs/leaflet/leaflet.js"></script>

    /* default map */
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '© OpenStreetMap'
    }).addTo(map);

Plugin link

https://leafletjs.com/

Reference Link

https://www.npmjs.com/package/leaflet

Jsvector Maps :

Jsvector Maps is a modern javascript maps plugin..

html

css

js

<!-- JSVector Maps JS -->
    <script src="../assets/libs/jsvectormap/js/jsvectormap.min.js"></script>

    <!-- JSVector Maps MapsJS -->
    <script src="../assets/libs/jsvectormap/maps/world-merc.js"></script>

    /* basic vector map */
    var map = new jsVectorMap({
    selector: "#vector-map",
    map: "world_merc",
    });

Plugin link

https://jsvectorjs.com/

Reference Link

https://www.npmjs.com/package/jsvectormap

Gmaps.js :

gmaps is a modern javascript maps plugin..

html

js

 <!-- Google Maps API -->
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCW16SmpzDNLsrP-npQii6_8vBu_EJvEjA"></script>
<script src="../assets/libs/gmaps/gmaps.min.js"></script>

/* basic map */
var map = new GMaps({
    el: '#google-map',
    lat: -12.043333,
    lng: -77.028333
});

Plugin link

https://hpneo.dev/gmaps/

Reference Link

https://www.npmjs.com/package/gmaps

Simplebar Js :

Simplebar is a modern javascript scrollbar plugin..

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, obcaecati natus quidem optio a quasi quod consequuntur at sunt quos! Recusandae dicta facilis dolorem ad saepe officia earum, rem eum.

html

css

js

 var myElement = document.getElementById('scroll');
    new SimpleBar(myElement, { autoHide: true });

Plugin link

https://grsmto.github.io/simplebar/

Reference Link

https://www.npmjs.com/package/simplebar

Quill Editor:

Quill Editor is a modern javascript editor plugin..

Quill Snow is a free, open source Quill Editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

Write text select and edit with multiple options.
This is quill snow editor.
Easy to customize and flexible.

Quill officially supports a standard toolbar theme "Snow" and a floating tooltip theme "Bubble"

html

css

js

 <!-- Quill Editor JS -->
<script src="../assets/libs/quill/quill.min.js"></script>

/* quill snow editor */
var toolbarOptions = [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'font': [] }],
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'align': [] }],

    ['image', 'video'],
    ['clean']                                         // remove formatting button
];
var quill = new Quill('#editor', {
    modules: {
        toolbar: toolbarOptions
    },
    theme: 'snow'
});

Plugin link

https://quilljs.com/

Reference Link

https://www.npmjs.com/package/quill

File Pond :

File Pond is a modern javascript file upload plugin..

html

css

js

<!-- Filepond JS -->
<script src="../assets/libs/filepond/filepond.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-edit/filepond-plugin-image-edit.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js"></script>
<script src="../assets/libs/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-crop/filepond-plugin-image-crop.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-resize/filepond-plugin-image-resize.min.js"></script>
<script src="../assets/libs/filepond-plugin-image-transform/filepond-plugin-image-transform.min.js"></script>

/* filepond */
FilePond.registerPlugin(
    FilePondPluginImagePreview,
    FilePondPluginImageExifOrientation,
    FilePondPluginFileValidateSize,
    FilePondPluginFileEncode,
    FilePondPluginImageEdit,
    FilePondPluginFileValidateType,
    FilePondPluginImageCrop,
    FilePondPluginImageResize,
    FilePondPluginImageTransform
);

/* multiple upload */
const MultipleElement = document.querySelector('.multiple-filepond');
FilePond.create(MultipleElement,);

Plugin link

https://pqina.nl/filepond/

Reference Link

	https://www.npmjs.com/package/filepond

Drop Zone :

Drop Zone is a modern javascript file upload plugin..

html

css

js

 <!-- Dropzone JS -->
<script src="../assets/libs/dropzone/dropzone-min.js"></script>

/* dropzone */
let myDropzone = new Dropzone(".dropzone");
    myDropzone.on("addedfile", file => {
});

Plugin link

https://www.dropzone.dev/

Reference Link

https://www.npmjs.com/package/dropzone

Grid.js Tables :

Grid.js is a modern javascript tables plugin..

html

css

js

 <!-- Grid JS -->
<script src="../assets/libs/gridjs/gridjs.umd.js"></script>

// basic example
new gridjs.Grid({
    resizable: true,
    columns: [{
        name: "Date",
        width: "150px",
    }, {
        name: "Name",
        width: "150px",
    }, {
        name: "Email",
        width: "200px",
    }, {
        name: "ID",
        width: "150px",
    }, {
        name: "Price",
        width: "100px",
    }, {
        name: "Quantity",
        width: "100px",
    }, {
        name: "Total",
        width: "100px",
    }],
    data: [
        ["24-10-2022 12:47", "john", "john123@gmail.com", "#12012", "$1799", "1", "$1799"],
        ["12-09-2022 04:24", "mark", "markzenner23@gmail.com", "#12013", "$2479", "2", "$4958"],
        ["18-11-2022 18:43", "eoin", "eoin1992@gmail.com", "#12014", "$769", "1", "$769"],
        ["10-09-2022 10:35", "sarahcdd", "sarahcdd129@gmail.com", "#12015", "$1299", "3", "$3997"],
        ["27-10-2022 09:55", "afshin", "afshin@example.com", "#12016", "$1449", "1", "$1449"]
    ],
}).render(document.getElementById("grid-example1"));
// basic example

Plugin link

https://gridjs.io/

Reference Link

https://www.npmjs.com/package/gridjs

Rater Js :

Rater Js is a modern javascript ratings plugin..

html

js

<!-- Rater JS -->
<script src="../assets/libs/rater-js/index.js"></script>  

 /* Basic Rater */
        var starRating1 = raterJs({
            starSize: 24,
            element: document.querySelector("#rater-basic"),
            rateCallback: function rateCallback(rating, done) {
                this.setRating(rating);
                done();
            }
        });
        /* Basic Rater */

Plugin link

https://fredolss.github.io/rater-js/

Reference Link

https://www.npmjs.com/package/rater-js

tarekraafat/autocomplete :

tarekraafat/autocomplete Js is a modern javascript Advanced Forms plugin..

html

Css

js

<!-- Auto Complete JS -->
    <script src="../assets/libs/@tarekraafat/autocomplete.js/autoComplete.min.js"></script>

    /* Auto Complete Basic */
    const autoCompleteJS = new autoComplete({
        selector: "#autoComplete",
        placeHolder: "Search for Food & Drinks Combo",
        data: {
            src: ['Pizza, Soda',
                'Burger, Milkshake',
                'Tacos, Margarita',
                'Pasta, Red Wine',
                'Sushi, Green Tea',
                'Steak, Whiskey',
                'Salad, Sparkling Water',
                'Chicken Wings, Beer',
                'Fish and Chips, Lemonade',
                'Burrito, Iced Tea'],
            cache: true,
        },
        resultItem: {
            highlight: true
        },
        events: {
            input: {
                selection: (event) => {
                    const selection = event.detail.selection.value;
                    autoCompleteJS.input.value = selection;
                }
            }
        }
        });
            /* Auto Complete Basic */

Plugin link

https://smartscheduling.com/en/documentation/autocomplete

Reference Link

https://www.npmjs.com/package/autocompleter

yaireo/dragsort :

yaireo/dragsort Js is a modern javascript Advanced Forms plugin..

html

Css

js

 <!-- Tagify JS -->
<script src="../assets/libs/@yaireo/tagify/tagify.js"></script>

<!-- Dragsort JS -->
<script src="../assets/libs/@yaireo/dragsort/dragsort.js"></script>

Reference Link

https://www.npmjs.com/package/@yaireo/dragsort

yaireo/tagify :

yaireo/tagify Js is a modern javascript Animation plugin..

html

Css

js

<!-- tagify  JS -->
 <script src="../assets/libs/@yaireo/tagify/tagify.js"></script>

 /* Basic Tagify */
 // The DOM element you wish to replace with Tagify
 var inputtagify = document.querySelector('input[name=basic]');

 // initialize Tagify on the above input node reference
 new Tagify(inputtagify)
 /* Basic Tagify */

Reference Link

https://www.npmjs.com/package/@yaireo/tagify

Dual-listbox :

dual-listbox Js is a modern javascript Advanced Forms plugin..

html

Css

js

<!-- Dual ListBox JS -->
 <script src="../assets/libs/dual-listbox/dual-listbox.js"></script>

 /* Basic DualList */
    let dlb1 = new DualListbox('.select1');
/* Basic DualList */

Plugin Link

https://maykinmedia.github.io/dual-listbox/

Reference Link

https://www.npmjs.com/package/dual-listbox

fg-emoji-picker :

fg-emoji-picker Js is a modern javascript to pick the emoji plugin..

html

js

<!-- Emojji Picker JS  -->
 <script src="../assets/libs/fg-emoji-picker/fgEmojiPicker.js"></script>

 new FgEmojiPicker({
    trigger: [".emoji-picker"],
    insertInto: document.querySelector(".chat-message-space"),
    closeButton: true,
    position: ['top', 'right'],
    preFetch: true,
    dir:"../assets/libs/fg-emoji-picker/"
});

Plugin Link

https://nolanlawson.github.io/emoji-picker-element/

Reference Link

https://www.npmjs.com/package/emoji-picker-element

Intl-tel-input :

Intl-tel-input Js is a modern javascript is Advanced Form plugin...

html

Css

js

<!-- intl-tel-input JS -->
<script src="../assets/libs/intl-tel-input/build/js/intlTelInput.min.js"></script>

/* intl-tel-input Basic */
const input = document.querySelector("#phone");
window.intlTelInput(input, {
    utilsScript: "../assets/libs/intl-tel-input/build/js/utils.js"
});
/* intl-tel-input Basic */

Reference Link

https://www.npmjs.com/package/intl-tel-input

plyr :

plyr Js is a modern javascript is music playing plugin..

html

Css

js

<!-- Plyr JS -->
<script src="../assets/libs/plyr/plyr.min.js"></script>

const player = new Plyr('#player');

plugin Link

https://plyr.io/

Reference Link

	https://www.npmjs.com/package/plyr

Sortablejs :

sortablejs is a modern javascript is drag element in the list plugin..

Design logo for fictional company
Draft 300-word blog post
Create project plan with milestones
Develop sample interview questions
Generate customer feedback for product.
Write email template for newsletter.

html

js

<!-- Sortable  JS -->
<script src="../assets/libs/sortablejs/Sortable.min.js"></script>

/* simple sortable */
var simple = document.getElementById('simple-list');
new Sortable(simple, {
    animation: 150,
});
/* simple sortable */

plugin Link

https://sortablejs.github.io/Sortable/

Reference Link

https://www.npmjs.com/package/sortablejs

toastify :

toastify Js is a modern javascript is music playing plugin..

html

Css

js

<!-- Toastify JS -->
                            <script src="../assets/libs/toastify-js/src/toastify.js"></script>
                            
                            /* Toastify js */
                            document.getElementById("toast-button").addEventListener("click", function () {
                            Toastify({
                                text: "I'm a toast Message",
                                duration: 3000,
                                newWindow: true,
                                close: true,
                                gravity: "top", // `top` or `bottom`
                                positionRight: true, // `true` or `false`
                                backgroundColor: "linear-gradient(to right, var(--primary-color), rgb(215, 124, 247))"
                            }).showToast();
                            });

plugin Link

https://apvarun.github.io/toastify-js/

Reference Link

https://www.npmjs.com/package/toastify-js

Additional Plugins Included :

The following plugins have also been included, apart from the ones already listed in the above sections

Plugin	Version	URL
Bootstrap	v5.3.3	https://www.npmjs.com/package/bootstrap
apexcharts	v3.42.0	https://www.npmjs.com/package/apexcharts
chart.js	v4.4.3	https://www.npmjs.com/package/chart.js?activeTab=readme
Echarts	v5.5.1	https://www.npmjs.com/package/echarts
select2 dropdown	v8.4.4	https://www.npmjs.com/package/select2
shepherd.js	v11.2.0	https://www.npmjs.com/package/shepherd.js?activeTab=readme
vanilla-wizard	v0.0.7	https://www.npmjs.com/package/wizard

Switcher

Introduction

Nilova – Node JS Bootstrap 5 Premium Admin & Dashboard Template for All Your Web Projects

Support and Updates:

Dependencies for Nilova

What Do You Get with the Nilova:

Nilova Compatibility with Popular Browsers:

Getting Start Guide

Setting Up the Local Environment & Workspace

Prerequisites

Recommended Knowledge

Development Environment Setup

Installation Process

How to Run the Nilova Template:

Step 1:

Step 2:

Step 3:

How to Convert SCSS to CSS:

Note:

To install the peer Depencies

Installation Video

Folder Structure

Nilova-NodeJs Final -The main folder contain all .ejs, css, scss, images and other files.

public/ - stores static assets like CSS, JavaScript, images, and files accessible by the browser.

assets/ - Folder contain all the Nilova Template assets which has css, scss,images,js and remaning.

css / - This folder for css-related files.

icon-fonts / - This folder for icon-fonts-related files.

images / - This folder for images.

scss / - This folder for scss-related files.

js / - This folder for js-related files.

libs / - This folder for plugins related files.

src / - contains application logic, including controllers, routes, and views files.

controllers / - Contains controllers that process requests and render application views.

Routes / - Defines application routes.

Views / - Contains templates used to render application pages.

Layouts / - Defines common page structure.

landingLayout.ejs / - This file for landing layout .

authLayout.ejs / - This file for authenication layout .

mainLayout.ejs / - This file for main layout .

Pages / - Contains individual page views.

application / - This folder for application route files .

charts / - This folder for charts related files .

dashboards / - This folder for dashboard related files .

general / - This folder for general related files .

maps / - This folder for maps related files .

pages / - This folder for pages related files .

tables / - This folder for tables related files .

Partials / - Stores reusable template fragments.

authenication / - This folder for authenication resuables .

landing / - This folder for landing resuables .

commonjs.ejs -This file for common js files.

custom_switcherjs.ejs -This file for custom switcher js file.

footer.ejs -This file for footer component file.

header.ejs -This file for header component file.

loader.ejs -This file for loader component file.

mainHead.ejs -This file for mainHeader component file.

pageHeader.ejs -This file for pageHeader component file.

responsive-search-modal.ejs -This file for responsive search modal component file.

sidebar.ejs -This file for Sidebar component file.

switcher.ejs -This file for Switcher component file.

app.js -Initializes middleware, layouts, and routes.

index.js -Configures the server and starts listening for requests.

package-lock.json -Ensures consistent package installations.

package.json - Project configuration and dependencies.

StaterKit Guide

Purpose of a starter kit

Introduction to the Nilova - Node.js Bootstrap 5 Starter Kit Template:

Purpose of the Nilova Starter Kit Template:

Benefits of Using the Nilova - Node.js Starter Kit Template:

Starter Kit Overview

Starterkit Folder Structure

Starterkit -The main folder contain all .ejs, css, scss, images and other files.

public/ - stores static assets like CSS, JavaScript, images, and files accessible by the browser.

assets/ - Folder contain all the Nilova Template assets which has css, scss,images,js and remaning.

css / - This folder for css-related files.

icon-fonts / - This folder for icon-fonts-related files.

images / - This folder for images.

scss / - This folder for scss-related files.

js / - This folder for js-related files.

libs / - This folder for plugins related files.

Understanding `res.render()`