View file Chatvia - Tailwind CSS/docs/setup.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Setup | Chatvia - Responsive TailwindCSS Chat App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Chatvia Premium Multipurpose Admin & Dashboard Template documentation of HTML" name="description" />
<meta content="Themesbrand" name="author" />
<meta name="keywords" content="Chatvia HTML documentation">
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- TailwindCSS Css -->
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
</head>
<body data-topbar="dark" data-spy="scroll" data-target=".right-side-nav" data-offset="175">
<!-- Begin page -->
<div id="layout-wrapper">
<header id="page-topbar">
<div class="navbar-header">
<div class="d-flex">
<!-- LOGO -->
<div class="navbar-brand-box">
<a href="index.html" class="logo logo-light">
<span class="logo-sm">
<img src="assets/images/logo.svg" alt="" height="25">
</span>
<span class="logo-lg">
<img src="assets/images/logo-light.png" alt="" height="22"> <span class="ml-2 badge badge-soft-success">HTML</span>
</span>
</a>
</div>
<button type="button" class="px-3 btn btn-sm font-size-24 header-item waves-effect d-lg-none" id="vertical-menu-btn">
<i class="mdi mdi-menu"></i>
</button>
</div>
<div class="d-flex">
<div class="d-inline-block">
<a href="setup.html#" target="_blank" class="header-item">Support</a>
</div>
<div class="d-none d-md-inline-block">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfiP9bDHzIQdQoMXFrYvJx00wyFzSu_cqBWP0N0uUHpqjrbzQ/viewform" target="_blank" class="header-item">Need Customization?</a>
</div>
<div class="d-inline-block">
<a href="https://1.envato.market/chatvia-tailwind-css-chat-app" target="_blank" class="header-item">Buy Now</a>
</div>
<div class="d-inline-block">
<h5 class="m-0 header-item"><span class="badge badge-danger">v1.0.0</span></h5>
</div>
</div>
</div>
</header>
<!-- ========== Left Sidebar Start ========== -->
<div class="vertical-menu">
<div data-simplebar class="h-100">
<!--- Sidemenu -->
<div id="sidebar-menu">
<!-- Left Menu Start -->
<ul class="metismenu list-unstyled" id="side-menu">
<li class="menu-title">Docs</li>
<li>
<a href="index.html" class="waves-effect">
<i class="mdi mdi-text-box-outline"></i>
<span>Introduction</span>
</a>
</li>
<li>
<a href="setup.html" class=" waves-effect">
<i class="mdi mdi-cog-outline"></i>
<span>Setup</span>
</a>
</li>
<li class="menu-title">Themes</li>
<li>
<a href="light.html" class=" waves-effect">
<i class="mdi mdi-white-balance-sunny"></i>
<span>Light Version</span>
</a>
</li>
<li>
<a href="dark.html" class=" waves-effect">
<i class="mdi mdi-weather-night"></i>
<span>Dark Version</span>
</a>
</li>
<li>
<a href="rtl.html" class=" waves-effect">
<i class="mdi mdi-web"></i>
<span>RTL Version</span>
</a>
</li>
<li>
<a href="colors.html" class=" waves-effect">
<i class="mdi mdi-palette"></i>
<span>Color Version</span>
</a>
</li>
<li class="menu-title">Other</li>
<li>
<a href="changelog.html" class=" waves-effect">
<i class="mdi mdi-format-list-bulleted"></i>
<span>Changelog</span>
</a>
</li>
</ul>
</div>
<!-- Sidebar -->
</div>
</div>
<!-- Left Sidebar End -->
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card ">
<div class="card-body">
<div class="p-lg-1">
<div class="d-xl-flex">
<div class="w-100">
<h4 class="mt-0 mb-4">Setup HTML</h4>
<div id="desc" class="mb-5">
<h5 class="mt-4">Introduction</h5>
<p>
We are using
<a href="https://vitejs.dev/" target="_blank">Vite</a> which
allows having complete automation for build flow. In case if you
don't know Vite then it's easy to use it. At the very basic level, developing using Vite is not that much different from using a static file server. However, Vite provides many enhancements over native ESM imports to support various features that are typically seen in bundler-based setups.<a
href="https://vitejs.dev/" target="_blank">here</a>.
Please follow below steps to install and setup all
prerequisites:
</p>
</div>
<div id="prerequisites" class="mb-5">
<h5 class="mt-4">Prerequisites</h5>
<p>
Please follow below steps to install and setup all
prerequisites:
</p>
<ul>
<li>
<strong>Yarn</strong>
<p>
Make sure to have the <a
href="https://classic.yarnpkg.com/en/"
target="_blank">Yarn</a> installed & running
in your computer.
If you already have installed Yarn on your computer, you
can skip this step. We suggest you to use Yarn instead
of NPM.</p>
</li>
<li>
<strong>Nodejs</strong>
<p>
Make sure to have the <a href="https://nodejs.org/"
target="_blank">Node.js</a> installed & running
in your computer.
If you already have installed Node on your computer, you
can skip this step if your existing node version is
greater than 18. We suggest you to use LTS version of Node.js. </p>
</li>
<li>
<strong>Git</strong>
<p>Make sure to have the <a href="https://git-scm.com/"
target="_blank">Git</a> installed globally &
running on your computer. If you already have installed
git on your computer, you can skip this step.</p>
</li>
</ul>
</div>
<div id="installation">
<h5 class="mt-4">Installation</h5>
<p>
To setup the admin theme, follow below-mentioned steps:
</p>
<ul>
<li>
<strong>Install Prerequisites</strong>
<p>
Make sure to have all above prerequisites installed
& running on your computer
</p>
</li>
</ul>
<p class="mt-4">
After you finished with the above steps, you can run the
following commands into the terminal / command prompt from the
root directory of the project to run the project locally or
build for
production use:
</p>
<table class="table m-0 table-bordered">
<thead>
<tr>
<th style="width: 20%;">
<i class="ti-file"></i> Command</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>yarn install</code>
</td>
<td>
This would install all the required dependencies in
the <code>node_modules</code> folder.
</td>
</tr>
<tr>
<td>
<code>npm run build</code>
</td>
<td>
Generates a <code>/dist</code> directory with all
the production files.
</td>
</tr>
<tr>
<td>
<code>npm run start</code>
</td>
<td>
Runs the project 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:8080'>http://localhost:8080</a>.
</td>
</tr>
</tbody>
</table>
</div>
<div id="tips">
<h5 class="mt-4">Tips</h5>
<p>
css: We suggest you to do not change any css files from the assets/css/custom folders because to get new updates will might be break your CSS changes if any you have made. We strongly suggest you
to create new custom.css file and use that instead of overwrite
any theme's custom css files.
</p>
</div>
</div>
<!-- Start right-side-nav -->
<div class="d-none d-xl-block">
<div class="right-side-nav">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a href="setup.html#desc" class="nav-link">Description</a>
</li>
<li class="nav-item">
<a href="setup.html#prerequisites" class="nav-link">Prerequisites</a>
</li>
<li class="nav-item">
<a href="setup.html#installation" class="nav-link">Installation</a>
</li>
<li class="nav-item">
<a href="setup.html#tips" class="nav-link">Tips</a>
</li>
</ul>
</div>
</div>
<!-- End right-side-nav -->
</div>
</div> <!-- end padding-->
</div> <!-- end card-body-->
</div> <!-- end card-->
</div>
</div>
<!-- end row -->
</div> <!-- container-fluid -->
</div>
<!-- End Page-content -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<script>document.write(new Date().getFullYear())</script> © Themesbrand.
</div>
<div class="col-sm-6">
<div class="text-sm-right d-none d-sm-block">
Crafted with <i class="mdi mdi-heart text-danger"></i> by <a href="https://themesbrand.com/" target="_blank" class="text-muted">Themesbrand</a>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- end main content-->
</div>
<!-- END layout-wrapper -->
<!-- JAVASCRIPT -->
<script src="assets/libs/jquery/jquery.min.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/libs/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>