HTML Structure | Toner eCommerce + Admin NodeJs Template Documentation

Nodejs Structure

Nodejs Folder Structure

Admin
controller

models

public
- ../assets
  - fonts
  - images
  - js
  - json
  - lang
routes
- routes.js
utils
views
app.js
package.json

package-libs-config.json

config.env

webpack.config.js

NODE file structure (Backend + Components)

Overview

We have used gulp to compile the scss and js files.


<%- include ('../partials/main') %>
<head>
  <%- HeaderCss %>
  <%- include ('../partials/head-css') %>
</head>
<%- include ('../partials/body') %>
<div id="layout-wrapper">
  <%- include ('../partials/menu') %>
  <div class="main-content">
    <div class="page-content">
      <div class="container-fluid">
        <%- body%>
      </div> <!-- container-fluid -->
    </div>
    <%- include ('../partials/footer') %>
  </div>
  <!-- end main content-->
</div>
<%- include ('../partials/customizer') %>
<%- include ('../partials/vendor-scripts') %>
<%- FooterJs %>
<!-- App js -->
<script src="/../assets/js/app.js"></script>
</body>
</html>

Layout setup (Backend + Components)

You can set the default layout in the views/partials/main.ejs file in the html tag.


                  <html data-layout="vertical" data-topbar="light" data-sidebar="light" data-sidebar-size="lg">

data-layout="vertical"	To set default layout as Vertical
data-layout="horizontal"	To set default layout as Horizontal
data-layout="twocolumn"	To set default layout as Two column
data-bs-theme="light"	To set Light layout mode.
data-bs-theme="dark"	To set Dark layout mode.
data-sidebar-size="lg" data-layout-width="fluid"	To set layout width Fluid and left sidebar large.
data-sidebar-size="sm-hover" data-layout-width="boxed"	To set layout width Boxed and left sidebar on hover show menu.
data-layout-position="fixed"	To set layout position Fixed.
data-layout-position="scrollable"	To set layout position Scrollable.
data-topbar="light"	To set the Light color of Topbar.
data-topbar="dark"	To set the Dark color of Topbar.
data-topbar="brand"	To set the Brand color of Topbar.
data-sidebar-size="lg"	To set the Large left sidebar.
data-sidebar-size="md"	To set the Compact left sidebar.
data-sidebar-size="sm"	To set the Icon view left sidebar.
data-sidebar-size="sm-hover"	To set the Icon hover left sidebar.
data-layout-style="default"	To set the Default layout.
data-layout-style="detached"	To set the Detached layout.
data-sidebar="light"	To set the Light color of left Sidebar.
data-sidebar="dark"	To set the Dark color of left Sidebar.
data-sidebar="gradient"	To set the Gradient color of left Sidebar.
data-sidebar="gradient-2"	To set the Gradient-2 color of left Sidebar.
data-sidebar="gradient-3"	To set the Gradient-3 color of left Sidebar.
data-sidebar="gradient-4"	To set the Gradient-4 color of left Sidebar.
data-sidebar-image="none"	To Disable image on left Sidebar.
data-sidebar-image="img-1"	To set the img-1 Image of left Sidebar.
data-sidebar-image="img-2"	To set the img-2 Image of left Sidebar.
data-sidebar-image="img-3"	To set the img-3 Image of left Sidebar.
data-sidebar-image="img-4"	To set the img-4 Image of left Sidebar.
data-preloader="enable"	To enable the preloader on the Page.
data-preloader="disable"	To disable the preloader on the Page.