File size: 19.13Kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Installation | Boron - Responsive Bootstrap Admin & Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Theme Config Js -->
<script src="assets/js/config.js"></script>
<!-- App css -->
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-style" />
<!-- Icons css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Begin page -->
<div class="wrapper">
<!-- ========== Topbar Start ========== -->
<div class="navbar-custom">
<div class="topbar container-fluid">
<div class="d-flex align-items-center gap-lg-2 gap-1">
<!-- Topbar Brand Logo -->
<div class="logo-topbar">
<!-- Logo light -->
<a href="index.html" class="logo-light">
<span class="logo-lg">
<img src="assets/images/logo.png" alt="logo">
</span>
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
</a>
<!-- Logo Dark -->
<a href="index.html" class="logo-dark">
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="dark logo">
</span>
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
</a>
</div>
<!-- Sidebar Menu Toggle Button -->
<button class="button-toggle-menu">
<i class="ri-menu-2-fill"></i>
</button>
</div>
<ul class="topbar-menu d-flex align-items-center gap-3">
<li class="d-none d-sm-inline-block">
<div class="nav-link" id="light-dark-mode">
<i class="ri-moon-line fs-22"></i>
</div>
</li>
<li class="nav-link"><span class="badge bg-success fs-16">v1.0</span></li>
</ul>
</div>
</div>
<!-- ========== Topbar End ========== -->
<!-- ========== Left Sidebar Start ========== -->
<div class="leftside-menu">
<!-- Brand Logo Light -->
<a href="index.html" class="logo logo-light">
<span class="logo-lg">
<img src="assets/images/logo.png" alt="logo">
</span>
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
</a>
<!-- Brand Logo Dark -->
<a href="index.html" class="logo logo-dark">
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="dark logo">
</span>
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
</a>
<!-- Sidebar Hover Menu Toggle Button -->
<div class="button-sm-hover" data-bs-toggle="tooltip" data-bs-placement="right" title="Show Full Sidebar">
<i class="ri-checkbox-blank-circle-line align-middle"></i>
</div>
<!-- Full Sidebar Menu Close Button -->
<div class="button-close-fullsidebar">
<i class="ri-close-fill align-middle"></i>
</div>
<!-- Sidebar -left -->
<div class="h-100" id="leftside-menu-container" data-simplebar>
<!-- Leftbar User -->
<div class="leftbar-user">
<a href="pages-profile.html">
<img src="assets/images/users/avatar-1.jpg" alt="user-image" height="42" class="rounded-circle shadow-sm">
<span class="leftbar-user-name mt-2">Tosha Minner</span>
</a>
</div>
<!--- Sidemenu -->
<ul class="side-nav">
<li class="side-nav-title">Getting Started</li>
<li class="side-nav-item">
<a href="index.html" class="side-nav-link">
<i class="ri-honour-line"></i>
<span> Introduction </span>
</a>
</li>
<li class="side-nav-item">
<a href="installation.html" class="side-nav-link">
<i class="ri-tools-fill"></i>
<span> Installation </span>
</a>
</li>
<li class="side-nav-title">Customization</li>
<li class="side-nav-item">
<a href="customization.html" class="side-nav-link">
<i class="ri-paint-line"></i>
<span> Customization </span>
</a>
</li>
<li class="side-nav-title">Other</li>
<li class="side-nav-item">
<a href="changelog.html" class="side-nav-link">
<i class="ri-book-open-line"></i>
<span> Changelog </span>
</a>
</li>
</ul>
<!--- End Sidemenu -->
<div class="help-box text-white text-center d-none">
<a href="javascript: void(0);" class="float-end close-btn text-white">
<i class="mdi mdi-close"></i>
</a>
<img src="assets/images/svg/help-icon.svg" height="90" alt="Helper Icon Image">
<h5 class="mt-3">Unlimited Access</h5>
<p class="mb-3">Upgrade to plan to get access to unlimited reports</p>
<a href="javascript: void(0);" class="btn btn-secondary btn-sm">Buy Now</a>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- ========== Left Sidebar End ========== -->
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Boron</a></li>
<li class="breadcrumb-item active">Installation</li>
</ol>
</div>
<h4 class="page-title">Installation</h4>
</div>
</div>
</div>
<!-- end page title -->
<div class="card">
<div class="card-body">
<div class="alert alert-success" role="alert">
<p class="mb-0">
<strong>Note:</strong>
<b>Boron offers enhanced real-time customization of your
layout through the use of CSS variables, which are set
via Sass.</b>
If you are not familiar with Node.js and Gulp, don't
worry. We've provided a ready-to-use (pre-compiled)
version of Boron in the <code>dist</code> folder, which
you can use without any additional setup steps. However,
if you want to take full advantage of Boron's
customization options, we recommend following the setup
steps below to install Node.js and Gulp and build your
own version of the template.
</p>
</div>
<p class="mt-3">
We utilize
<a href="https://gulpjs.com/" target="_blank">Gulp</a> to
automate our build flow, allowing for complete automation
of our development workflows. Gulp is a powerful toolkit
designed to help developers eliminate time-consuming
tasks, allowing them to focus on what really matters:
building great products. If you're not familiar with Gulp,
you can learn more about it
<a href="https://gulpjs.com/" target="_blank">here</a>.
</p>
<h4 class="mt-4">Prerequisites</h4>
<p>
To get started with Boron, please follow the steps below
to install and set up all the necessary prerequisites:
</p>
<ul>
<li>
<h5>Node.js - v16x or v18x</h5>
<p class="mb-2">
To use our build tools and take full advantage of
Boron's customization options, you will need to
download and install Node.js. If you do not have
Node.js v16.x or v18.x installed already, you can
download the package installer from the official
website. We recommend that you download the stable
version of Node.js (LTS) to ensure the best possible
experience.
</p>
<a href="https://nodejs.org/" target="_blank">Download Node.js</a>
</li>
<li>
<h5>Git</h5>
<p class="mb-2">
Ensure that you have Git installed and running on your
system.
</p>
<a href="https://git-scm.com/" target="_blank">Install Git</a>
</li>
<li class="pt-2">
<h5>Gulp & Gulp CLI</h5>
<p>
Ensure that you have
<a href="https://gulpjs.com/" target="_blank">Gulp</a>
installed and running on your computer. If you already
have Gulp installed, you can skip this step. If not,
you can install it by running the following command
from your terminal:
<code>npm install -g gulp@4.0.1</code>.
</p>
</li>
<li>
<h5>Yarn</h5>
<p>
Ensure that you have
<a href="https://yarnpkg.com/lang/en/" target="_blank">Yarn</a>
installed and running on your computer. If you already
have Yarn installed, you can skip this step.
</p>
</li>
</ul>
<h4 class="mt-4">Installation</h4>
<p>
To install all the required dependencies for the template,
open your terminal, navigate to the folder where you have
the Boron files, and run the command
<code>yarn install</code>. This will install all necessary
dependencies in the <code>node_modules</code> folder. Once
the installation is complete, you are ready to run Boron
for the first time.
</p>
<p class="mt-1">
You can run the following commands to run projects
locally: Or build for production use:
</p>
<table class="table table-bordered m-0">
<thead>
<tr>
<th style="width:20%"><i class="ti-file"></i> Command</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>gulp</code></td>
<td>Runs the "vertical" demo locally, starts the development server and
watches for any changes in your code, including your html,
javascript, sass, etc. The development server is accessible at
<a
href="http://localhost:3000/">http://localhost:3000/</a>.
</td>
</tr>
<tr>
<td><code>gulp build</code></td>
<td>It compiles the source assets including scss and bundles into production ready use.</td>
</tr>
</tbody>
</table>
<div class="mt-3">
<h5 class="mt-0 mb-2 font-weight-bold">
Troubleshooting
</h5>
<ul>
<li>
If you encounter the error message "<code>Error: ENOENT: no such file or directory, scandir
'/root/website/node_modules/node-sass/vendor'</code>" while running npm install, there are a couple of
things you can try to resolve it:
<ul>
<li>
1. Run <code>npm rebuild node-sass</code> to
re-install node-sass
</li>
<li>
2. Delete node_modules folder and re run
<code>npm install</code>
</li>
</ul>
</li>
</ul>
<div class="alert alert-info mt-5">
If you encounter any issues or have any questions during
the setup process, please don't hesitate to reach out to
us via email. We are always here to help and would be
glad to assist you in any way we can.
</div>
</div>
</div>
</div>
</div>
<!-- container -->
</div>
<!-- content -->
<!-- Footer Start -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<script>document.write(new Date().getFullYear())</script> © Boron - <a href="https://coderthemes.com/" target="_blank">Coderthemes.com</a>
</div>
<div class="col-md-6">
<div class="text-md-end footer-links d-none d-md-block">
<a href="https://coderthemes.com/" target="_blank">About</a>
<a href="https://coderthemes.com/" target="_blank">Support</a>
<a href="https://coderthemes.com/" target="_blank">Contact Us</a>
</div>
</div>
</div>
</div>
</footer>
<!-- end Footer -->
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- Vendor js -->
<script src="assets/js/vendor.min.js"></script>
<!-- App js -->
<script src="assets/js/app.min.js"></script>
</body>
</html>