mirror of https://github.com/ColorlibHQ/gentelella
843 lines
33 KiB
HTML
843 lines
33 KiB
HTML
|
||
|
||
<!DOCTYPE html>
|
||
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||
|
||
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-default.css">
|
||
|
||
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">
|
||
|
||
<style id="jtd-nav-activation">
|
||
|
||
|
||
|
||
.site-nav > ul.nav-list:first-child > li:not(:nth-child(2)) > a,
|
||
.site-nav > ul.nav-list:first-child > li > ul > li a {
|
||
background-image: none;
|
||
}
|
||
|
||
.site-nav > ul.nav-list:not(:first-child) a,
|
||
.site-nav li.external a {
|
||
background-image: none;
|
||
}
|
||
|
||
.site-nav > ul.nav-list:first-child > li:nth-child(2) > a {
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
}.site-nav > ul.nav-list:first-child > li:nth-child(2) > button svg {
|
||
transform: rotate(-90deg);
|
||
}.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(2) > ul.nav-list {
|
||
display: block;
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|
||
<script src="/gentelella/assets/js/vendor/lunr.min.js"></script>
|
||
|
||
|
||
<script src="/gentelella/assets/js/just-the-docs.js"></script>
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
|
||
|
||
<link rel="icon" href="/gentelella/favicon.ico" type="image/x-icon">
|
||
|
||
|
||
|
||
<!-- Begin Jekyll SEO tag v2.8.0 -->
|
||
<title>Installation Guide | Gentelella Admin Template</title>
|
||
<meta name="generator" content="Jekyll v3.9.5" />
|
||
<meta property="og:title" content="Installation Guide" />
|
||
<meta property="og:locale" content="en_US" />
|
||
<meta name="description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
|
||
<meta property="og:description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
|
||
<link rel="canonical" href="http://localhost:4000/gentelella/installation/" />
|
||
<meta property="og:url" content="http://localhost:4000/gentelella/installation/" />
|
||
<meta property="og:site_name" content="Gentelella Admin Template" />
|
||
<meta property="og:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" />
|
||
<meta property="og:type" content="website" />
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta property="twitter:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" />
|
||
<meta property="twitter:title" content="Installation Guide" />
|
||
<script type="application/ld+json">
|
||
{"@context":"https://schema.org","@type":"WebPage","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"Installation Guide","image":"http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg","url":"http://localhost:4000/gentelella/installation/"}</script>
|
||
<!-- End Jekyll SEO tag -->
|
||
|
||
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<a class="skip-to-main" href="#main-content">Skip to main content</a>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||
<symbol id="svg-link" viewBox="0 0 24 24">
|
||
<title>Link</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
|
||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
||
</svg>
|
||
</symbol>
|
||
|
||
<symbol id="svg-menu" viewBox="0 0 24 24">
|
||
<title>Menu</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
|
||
<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
|
||
</svg>
|
||
</symbol>
|
||
|
||
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
||
<title>Expand</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
|
||
<polyline points="9 18 15 12 9 6"></polyline>
|
||
</svg>
|
||
</symbol>
|
||
|
||
<!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
|
||
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
|
||
<title id="svg-external-link-title">(external link)</title>
|
||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
|
||
</symbol>
|
||
|
||
|
||
<symbol id="svg-doc" viewBox="0 0 24 24">
|
||
<title>Document</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
|
||
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
|
||
</svg>
|
||
</symbol>
|
||
|
||
<symbol id="svg-search" viewBox="0 0 24 24">
|
||
<title>Search</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
|
||
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||
</svg>
|
||
</symbol>
|
||
|
||
|
||
|
||
<!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
|
||
<symbol id="svg-copy" viewBox="0 0 16 16">
|
||
<title>Copy</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
|
||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
||
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
||
</svg>
|
||
</symbol>
|
||
<symbol id="svg-copied" viewBox="0 0 16 16">
|
||
<title>Copied</title>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
|
||
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
|
||
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
|
||
</svg>
|
||
</symbol>
|
||
|
||
|
||
</svg>
|
||
|
||
|
||
<div class="side-bar">
|
||
<div class="site-header" role="banner">
|
||
<a href="/gentelella/" class="site-title lh-tight">
|
||
Gentelella Admin Template
|
||
|
||
</a>
|
||
<button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
|
||
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<nav aria-label="Main" id="site-nav" class="site-nav">
|
||
|
||
|
||
<ul class="nav-list"><li class="nav-list-item"><a href="/gentelella/" class="nav-list-link">Gentelella Admin Template Documentation</a></li><li class="nav-list-item"><a href="/gentelella/installation/" class="nav-list-link">Installation Guide</a></li><li class="nav-list-item"><a href="/gentelella/configuration/" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/gentelella/components/" class="nav-list-link">Components Guide</a></li><li class="nav-list-item"><a href="/gentelella/performance/" class="nav-list-link">Performance Guide</a></li><li class="nav-list-item"><a href="/gentelella/deployment/" class="nav-list-link">Deployment Guide</a></li><li class="nav-list-item"><a href="/gentelella/customization/" class="nav-list-link">Customization Guide</a></li><li class="nav-list-item"><a href="/gentelella/api-integration/" class="nav-list-link">API Integration</a></li></ul>
|
||
|
||
</nav>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer class="site-footer">
|
||
This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="main" id="top">
|
||
<div id="main-header" class="main-header">
|
||
|
||
|
||
|
||
<div class="search" role="search">
|
||
<div class="search-input-wrap">
|
||
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gentelella Admin Template" aria-label="Search Gentelella Admin Template" autocomplete="off">
|
||
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
|
||
</div>
|
||
<div id="search-results" class="search-results"></div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<nav aria-label="Auxiliary" class="aux-nav">
|
||
<ul class="aux-nav-list">
|
||
|
||
<li class="aux-nav-list-item">
|
||
<a href="//github.com/puikinsh/gentelella" class="site-button"
|
||
|
||
>
|
||
Gentelella on GitHub
|
||
</a>
|
||
</li>
|
||
|
||
<li class="aux-nav-list-item">
|
||
<a href="//colorlib.com" class="site-button"
|
||
|
||
>
|
||
Colorlib
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
</div>
|
||
|
||
<div class="main-content-wrap">
|
||
|
||
<div id="main-content" class="main-content">
|
||
<main>
|
||
|
||
<h1 class="no_toc" id="installation-guide">
|
||
|
||
|
||
<a href="#installation-guide" class="anchor-heading" aria-labelledby="installation-guide"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Installation Guide
|
||
|
||
|
||
</h1>
|
||
|
||
|
||
<p class="fs-6 fw-300">Complete installation and setup instructions for Gentelella Admin Template</p>
|
||
<h2 class="no_toc text-delta" id="table-of-contents">
|
||
|
||
|
||
<a href="#table-of-contents" class="anchor-heading" aria-labelledby="table-of-contents"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Table of contents
|
||
|
||
|
||
</h2>
|
||
|
||
|
||
<ol id="markdown-toc">
|
||
<li><a href="#system-requirements" id="markdown-toc-system-requirements">System Requirements</a> <ol>
|
||
<li><a href="#prerequisites" id="markdown-toc-prerequisites">Prerequisites</a></li>
|
||
<li><a href="#browser-support" id="markdown-toc-browser-support">Browser Support</a></li>
|
||
</ol>
|
||
</li>
|
||
<li><a href="#installation-methods" id="markdown-toc-installation-methods">Installation Methods</a> <ol>
|
||
<li><a href="#method-1-git-clone-recommended" id="markdown-toc-method-1-git-clone-recommended">Method 1: Git Clone (Recommended)</a></li>
|
||
<li><a href="#method-2-download-zip" id="markdown-toc-method-2-download-zip">Method 2: Download ZIP</a></li>
|
||
<li><a href="#method-3-npm-package" id="markdown-toc-method-3-npm-package">Method 3: npm Package</a></li>
|
||
<li><a href="#method-4-yarn-package" id="markdown-toc-method-4-yarn-package">Method 4: Yarn Package</a></li>
|
||
<li><a href="#method-5-bower-legacy" id="markdown-toc-method-5-bower-legacy">Method 5: Bower (Legacy)</a></li>
|
||
</ol>
|
||
</li>
|
||
<li><a href="#project-structure" id="markdown-toc-project-structure">Project Structure</a></li>
|
||
<li><a href="#development-commands" id="markdown-toc-development-commands">Development Commands</a> <ol>
|
||
<li><a href="#basic-commands" id="markdown-toc-basic-commands">Basic Commands</a></li>
|
||
<li><a href="#advanced-commands" id="markdown-toc-advanced-commands">Advanced Commands</a></li>
|
||
</ol>
|
||
</li>
|
||
<li><a href="#configuration" id="markdown-toc-configuration">Configuration</a> <ol>
|
||
<li><a href="#environment-setup" id="markdown-toc-environment-setup">Environment Setup</a></li>
|
||
<li><a href="#vite-configuration" id="markdown-toc-vite-configuration">Vite Configuration</a></li>
|
||
<li><a href="#sass-configuration" id="markdown-toc-sass-configuration">SASS Configuration</a></li>
|
||
</ol>
|
||
</li>
|
||
<li><a href="#verification" id="markdown-toc-verification">Verification</a> <ol>
|
||
<li><a href="#check-installation" id="markdown-toc-check-installation">Check Installation</a></li>
|
||
<li><a href="#test-all-pages" id="markdown-toc-test-all-pages">Test All Pages</a></li>
|
||
<li><a href="#performance-check" id="markdown-toc-performance-check">Performance Check</a></li>
|
||
</ol>
|
||
</li>
|
||
<li><a href="#troubleshooting" id="markdown-toc-troubleshooting">Troubleshooting</a> <ol>
|
||
<li><a href="#common-issues" id="markdown-toc-common-issues">Common Issues</a> <ol>
|
||
<li><a href="#1-nodejs-version-issues" id="markdown-toc-1-nodejs-version-issues">1. Node.js Version Issues</a></li>
|
||
<li><a href="#2-port-already-in-use" id="markdown-toc-2-port-already-in-use">2. Port Already in Use</a></li>
|
||
<li><a href="#3-sass-compilation-errors" id="markdown-toc-3-sass-compilation-errors">3. SASS Compilation Errors</a></li>
|
||
<li><a href="#4-module-not-found" id="markdown-toc-4-module-not-found">4. Module Not Found</a></li>
|
||
<li><a href="#5-build-failures" id="markdown-toc-5-build-failures">5. Build Failures</a></li>
|
||
</ol>
|
||
</li>
|
||
<li><a href="#getting-help" id="markdown-toc-getting-help">Getting Help</a></li>
|
||
</ol>
|
||
</li>
|
||
<li><a href="#next-steps" id="markdown-toc-next-steps">Next Steps</a></li>
|
||
</ol><hr />
|
||
<h2 id="system-requirements">
|
||
|
||
|
||
<a href="#system-requirements" class="anchor-heading" aria-labelledby="system-requirements"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> System Requirements
|
||
|
||
|
||
</h2>
|
||
|
||
<h3 id="prerequisites">
|
||
|
||
|
||
<a href="#prerequisites" class="anchor-heading" aria-labelledby="prerequisites"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Prerequisites
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>Before installing Gentelella, ensure you have the following installed:</p>
|
||
|
||
<ul>
|
||
<li><strong>Node.js</strong> (v16 or higher) - <a href="https://nodejs.org/">Download here</a></li>
|
||
<li><strong>npm</strong> (comes with Node.js) or <strong>yarn</strong> package manager</li>
|
||
<li><strong>Git</strong> (for cloning the repository)</li>
|
||
<li>A modern code editor (VS Code recommended)</li>
|
||
</ul>
|
||
<h3 id="browser-support">
|
||
|
||
|
||
<a href="#browser-support" class="anchor-heading" aria-labelledby="browser-support"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Browser Support
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>Gentelella supports all modern browsers:</p>
|
||
|
||
<div class="table-wrapper"><table>
|
||
<thead>
|
||
<tr>
|
||
<th>Browser</th>
|
||
<th>Minimum Version</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Chrome</td>
|
||
<td>88+</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Firefox</td>
|
||
<td>85+</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Safari</td>
|
||
<td>14+</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Edge</td>
|
||
<td>88+</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Opera</td>
|
||
<td>74+</td>
|
||
</tr>
|
||
</tbody>
|
||
</table></div>
|
||
|
||
<p><strong>Note:</strong> Internet Explorer is not supported.</p><hr />
|
||
<h2 id="installation-methods">
|
||
|
||
|
||
<a href="#installation-methods" class="anchor-heading" aria-labelledby="installation-methods"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Installation Methods
|
||
|
||
|
||
</h2>
|
||
|
||
<h3 id="method-1-git-clone-recommended">
|
||
|
||
|
||
<a href="#method-1-git-clone-recommended" class="anchor-heading" aria-labelledby="method-1-git-clone-recommended"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Method 1: Git Clone (Recommended)
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>This is the recommended method for development and customization:</p>
|
||
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Clone the repository</span>
|
||
git clone https://github.com/puikinsh/gentelella.git
|
||
|
||
<span class="c"># Navigate to the project directory</span>
|
||
<span class="nb">cd </span>gentelella
|
||
|
||
<span class="c"># Install dependencies</span>
|
||
npm <span class="nb">install</span>
|
||
|
||
<span class="c"># Start the development server</span>
|
||
npm run dev
|
||
</code></pre></div></div>
|
||
|
||
<p>Your development server will be running at <code class="language-plaintext highlighter-rouge">http://localhost:3000</code></p>
|
||
<h3 id="method-2-download-zip">
|
||
|
||
|
||
<a href="#method-2-download-zip" class="anchor-heading" aria-labelledby="method-2-download-zip"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Method 2: Download ZIP
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<ol>
|
||
<li>Visit <a href="https://github.com/puikinsh/gentelella">GitHub repository</a></li>
|
||
<li>Click “Code” → “Download ZIP”</li>
|
||
<li>Extract the ZIP file</li>
|
||
<li>Open terminal in the extracted folder</li>
|
||
<li>Run <code class="language-plaintext highlighter-rouge">npm install</code></li>
|
||
<li>Run <code class="language-plaintext highlighter-rouge">npm run dev</code></li>
|
||
</ol>
|
||
<h3 id="method-3-npm-package">
|
||
|
||
|
||
<a href="#method-3-npm-package" class="anchor-heading" aria-labelledby="method-3-npm-package"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Method 3: npm Package
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>Install as a dependency in your existing project:</p>
|
||
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install </span>gentelella <span class="nt">--save</span>
|
||
</code></pre></div></div>
|
||
<h3 id="method-4-yarn-package">
|
||
|
||
|
||
<a href="#method-4-yarn-package" class="anchor-heading" aria-labelledby="method-4-yarn-package"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Method 4: Yarn Package
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>If you prefer Yarn:</p>
|
||
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>yarn add gentelella
|
||
</code></pre></div></div>
|
||
<h3 id="method-5-bower-legacy">
|
||
|
||
|
||
<a href="#method-5-bower-legacy" class="anchor-heading" aria-labelledby="method-5-bower-legacy"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Method 5: Bower (Legacy)
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>For legacy projects using Bower:</p>
|
||
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bower <span class="nb">install </span>gentelella <span class="nt">--save</span>
|
||
</code></pre></div></div><hr />
|
||
<h2 id="project-structure">
|
||
|
||
|
||
<a href="#project-structure" class="anchor-heading" aria-labelledby="project-structure"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Project Structure
|
||
|
||
|
||
</h2>
|
||
|
||
|
||
<p>After installation, your project structure will look like this:</p>
|
||
|
||
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gentelella/
|
||
├── 📁 docs/ # Documentation files
|
||
├── 📁 production/ # HTML templates & assets
|
||
│ ├── 📄 index.html # Main dashboard
|
||
│ ├── 📄 form.html # Form examples
|
||
│ ├── 📄 tables.html # Table examples
|
||
│ ├── 📄 charts.html # Chart examples
|
||
│ ├── 📄 [38 more pages] # Complete admin coverage
|
||
│ └── 📁 images/ # Image assets
|
||
├── 📁 src/ # Source files
|
||
│ ├── 📄 main-core.js # Core bundle (79KB)
|
||
│ ├── 📄 main.js # Full bundle (779KB)
|
||
│ ├── 📄 main.scss # Styles entry point
|
||
│ ├── 📁 js/ # Custom JavaScript
|
||
│ ├── 📁 scss/ # Custom SASS files
|
||
│ └── 📁 modules/ # Smart loading modules
|
||
│ ├── 📄 charts.js # Chart libraries (219KB)
|
||
│ ├── 📄 forms.js # Form enhancements (200KB)
|
||
│ ├── 📄 tables.js # DataTables functionality
|
||
│ ├── 📄 dashboard.js # Dashboard widgets
|
||
│ └── 📄 utils.js # Utility functions
|
||
├── 📁 dist/ # Production build output
|
||
├── 📁 scripts/ # Build & optimization tools
|
||
├── 📁 vendors/ # Third-party libraries
|
||
├── 📄 vite.config.js # Vite configuration
|
||
├── 📄 package.json # Dependencies & scripts
|
||
└── 📄 README.md # Basic documentation
|
||
</code></pre></div></div><hr />
|
||
<h2 id="development-commands">
|
||
|
||
|
||
<a href="#development-commands" class="anchor-heading" aria-labelledby="development-commands"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Development Commands
|
||
|
||
|
||
</h2>
|
||
|
||
<h3 id="basic-commands">
|
||
|
||
|
||
<a href="#basic-commands" class="anchor-heading" aria-labelledby="basic-commands"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Basic Commands
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Start development server with hot reload</span>
|
||
npm run dev
|
||
|
||
<span class="c"># Build for production</span>
|
||
npm run build
|
||
|
||
<span class="c"># Preview production build locally</span>
|
||
npm run preview
|
||
</code></pre></div></div>
|
||
<h3 id="advanced-commands">
|
||
|
||
|
||
<a href="#advanced-commands" class="anchor-heading" aria-labelledby="advanced-commands"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Advanced Commands
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Build with bundle analysis</span>
|
||
npm run build:analyze
|
||
|
||
<span class="c"># Performance optimization analysis</span>
|
||
npm run optimize
|
||
|
||
<span class="c"># SASS compilation only</span>
|
||
npm run sass:watch
|
||
|
||
<span class="c"># JavaScript linting</span>
|
||
npm run lint
|
||
|
||
<span class="c"># Code formatting</span>
|
||
npm run format
|
||
</code></pre></div></div><hr />
|
||
<h2 id="configuration">
|
||
|
||
|
||
<a href="#configuration" class="anchor-heading" aria-labelledby="configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Configuration
|
||
|
||
|
||
</h2>
|
||
|
||
<h3 id="environment-setup">
|
||
|
||
|
||
<a href="#environment-setup" class="anchor-heading" aria-labelledby="environment-setup"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Environment Setup
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<ol>
|
||
<li><strong>Development Environment</strong>
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm run dev
|
||
</code></pre></div> </div>
|
||
<ul>
|
||
<li>Hot reload enabled</li>
|
||
<li>Source maps available</li>
|
||
<li>All modules loaded for development</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Production Environment</strong>
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm run build
|
||
npm run preview
|
||
</code></pre></div> </div>
|
||
<ul>
|
||
<li>Optimized bundles</li>
|
||
<li>Minified assets</li>
|
||
<li>Smart code splitting</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
<h3 id="vite-configuration">
|
||
|
||
|
||
<a href="#vite-configuration" class="anchor-heading" aria-labelledby="vite-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Vite Configuration
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>The template includes an optimized <code class="language-plaintext highlighter-rouge">vite.config.js</code> with:</p>
|
||
|
||
<ul>
|
||
<li><strong>Entry Points</strong>: All 42 HTML files configured</li>
|
||
<li><strong>Code Splitting</strong>: Automatic vendor/app separation</li>
|
||
<li><strong>Asset Optimization</strong>: Images, fonts, and static files</li>
|
||
<li><strong>Development Features</strong>: Hot reload, source maps</li>
|
||
<li><strong>Production Optimizations</strong>: Minification, compression</li>
|
||
</ul>
|
||
<h3 id="sass-configuration">
|
||
|
||
|
||
<a href="#sass-configuration" class="anchor-heading" aria-labelledby="sass-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> SASS Configuration
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>SASS is configured in <code class="language-plaintext highlighter-rouge">src/main.scss</code>:</p>
|
||
|
||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Modern @use syntax (recommended)</span>
|
||
<span class="k">@use</span> <span class="s2">"bootstrap/scss/bootstrap"</span><span class="p">;</span>
|
||
<span class="k">@use</span> <span class="s2">"./scss/custom.scss"</span><span class="p">;</span>
|
||
|
||
<span class="c1">// Legacy @import syntax (deprecated but still works)</span>
|
||
<span class="c1">// @import "bootstrap/scss/bootstrap";</span>
|
||
<span class="c1">// @import "./scss/custom.scss";</span>
|
||
</code></pre></div></div><hr />
|
||
<h2 id="verification">
|
||
|
||
|
||
<a href="#verification" class="anchor-heading" aria-labelledby="verification"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Verification
|
||
|
||
|
||
</h2>
|
||
|
||
<h3 id="check-installation">
|
||
|
||
|
||
<a href="#check-installation" class="anchor-heading" aria-labelledby="check-installation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Check Installation
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>After installation, verify everything is working:</p>
|
||
|
||
<ol>
|
||
<li><strong>Start the development server:</strong>
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm run dev
|
||
</code></pre></div> </div>
|
||
</li>
|
||
<li>
|
||
<p><strong>Open your browser</strong> and navigate to <code class="language-plaintext highlighter-rouge">http://localhost:3000</code></p>
|
||
</li>
|
||
<li><strong>You should see</strong> the Gentelella dashboard</li>
|
||
</ol>
|
||
<h3 id="test-all-pages">
|
||
|
||
|
||
<a href="#test-all-pages" class="anchor-heading" aria-labelledby="test-all-pages"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Test All Pages
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>Navigate through different pages to ensure all modules load correctly:</p>
|
||
|
||
<ul>
|
||
<li>Dashboard pages (index.html, index2.html, index3.html)</li>
|
||
<li>Form pages (form.html, form_advanced.html, form_validation.html)</li>
|
||
<li>Table pages (tables.html, tables_dynamic.html)</li>
|
||
<li>Chart pages (chartjs.html, chartjs2.html, morisjs.html)</li>
|
||
</ul>
|
||
<h3 id="performance-check">
|
||
|
||
|
||
<a href="#performance-check" class="anchor-heading" aria-labelledby="performance-check"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Performance Check
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>Run the optimization analysis:</p>
|
||
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm run optimize
|
||
</code></pre></div></div>
|
||
|
||
<p>This will show you:</p>
|
||
<ul>
|
||
<li>Bundle sizes</li>
|
||
<li>Loading times</li>
|
||
<li>Optimization recommendations</li>
|
||
</ul><hr />
|
||
<h2 id="troubleshooting">
|
||
|
||
|
||
<a href="#troubleshooting" class="anchor-heading" aria-labelledby="troubleshooting"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Troubleshooting
|
||
|
||
|
||
</h2>
|
||
|
||
<h3 id="common-issues">
|
||
|
||
|
||
<a href="#common-issues" class="anchor-heading" aria-labelledby="common-issues"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Common Issues
|
||
|
||
|
||
</h3>
|
||
|
||
<h4 id="1-nodejs-version-issues">
|
||
|
||
|
||
<a href="#1-nodejs-version-issues" class="anchor-heading" aria-labelledby="1-nodejs-version-issues"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 1. Node.js Version Issues
|
||
|
||
|
||
</h4>
|
||
|
||
|
||
<p><strong>Error:</strong> <code class="language-plaintext highlighter-rouge">npm ERR! engine Unsupported engine</code></p>
|
||
|
||
<p><strong>Solution:</strong> Update Node.js to version 16 or higher:</p>
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Check current version</span>
|
||
node <span class="nt">--version</span>
|
||
|
||
<span class="c"># Update Node.js from https://nodejs.org/</span>
|
||
</code></pre></div></div>
|
||
<h4 id="2-port-already-in-use">
|
||
|
||
|
||
<a href="#2-port-already-in-use" class="anchor-heading" aria-labelledby="2-port-already-in-use"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 2. Port Already in Use
|
||
|
||
|
||
</h4>
|
||
|
||
|
||
<p><strong>Error:</strong> <code class="language-plaintext highlighter-rouge">Port 3000 is already in use</code></p>
|
||
|
||
<p><strong>Solution:</strong> Either stop the conflicting process or use a different port:</p>
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Use different port</span>
|
||
npm run dev <span class="nt">--</span> <span class="nt">--port</span> 3001
|
||
</code></pre></div></div>
|
||
<h4 id="3-sass-compilation-errors">
|
||
|
||
|
||
<a href="#3-sass-compilation-errors" class="anchor-heading" aria-labelledby="3-sass-compilation-errors"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 3. SASS Compilation Errors
|
||
|
||
|
||
</h4>
|
||
|
||
|
||
<p><strong>Error:</strong> SASS deprecation warnings</p>
|
||
|
||
<p><strong>Solution:</strong> These are mainly from Bootstrap internal files and can be safely ignored. Our project code uses modern SASS syntax.</p>
|
||
<h4 id="4-module-not-found">
|
||
|
||
|
||
<a href="#4-module-not-found" class="anchor-heading" aria-labelledby="4-module-not-found"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 4. Module Not Found
|
||
|
||
|
||
</h4>
|
||
|
||
|
||
<p><strong>Error:</strong> <code class="language-plaintext highlighter-rouge">Cannot resolve module</code></p>
|
||
|
||
<p><strong>Solution:</strong> Clear cache and reinstall:</p>
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Delete node_modules and package-lock.json</span>
|
||
<span class="nb">rm</span> <span class="nt">-rf</span> node_modules package-lock.json
|
||
|
||
<span class="c"># Reinstall dependencies</span>
|
||
npm <span class="nb">install</span>
|
||
</code></pre></div></div>
|
||
<h4 id="5-build-failures">
|
||
|
||
|
||
<a href="#5-build-failures" class="anchor-heading" aria-labelledby="5-build-failures"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 5. Build Failures
|
||
|
||
|
||
</h4>
|
||
|
||
|
||
<p><strong>Error:</strong> Build process fails</p>
|
||
|
||
<p><strong>Solution:</strong> Check for file permission issues and ensure all dependencies are installed:</p>
|
||
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># Clear cache</span>
|
||
npm cache clean <span class="nt">--force</span>
|
||
|
||
<span class="c"># Reinstall</span>
|
||
npm <span class="nb">install</span>
|
||
|
||
<span class="c"># Try building again</span>
|
||
npm run build
|
||
</code></pre></div></div>
|
||
<h3 id="getting-help">
|
||
|
||
|
||
<a href="#getting-help" class="anchor-heading" aria-labelledby="getting-help"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Getting Help
|
||
|
||
|
||
</h3>
|
||
|
||
|
||
<p>If you encounter issues not covered here:</p>
|
||
|
||
<ol>
|
||
<li><strong>Check GitHub Issues</strong>: <a href="https://github.com/puikinsh/gentelella/issues">github.com/puikinsh/gentelella/issues</a></li>
|
||
<li><strong>Create New Issue</strong>: Provide detailed error messages and system information</li>
|
||
<li><strong>Community Support</strong>: Join discussions on GitHub</li>
|
||
<li><strong>Documentation</strong>: Check other sections of this documentation</li>
|
||
</ol><hr />
|
||
<h2 id="next-steps">
|
||
|
||
|
||
<a href="#next-steps" class="anchor-heading" aria-labelledby="next-steps"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Next Steps
|
||
|
||
|
||
</h2>
|
||
|
||
|
||
<p>After successful installation:</p>
|
||
|
||
<ol>
|
||
<li><strong><a href="/gentelella/docs/configuration/">Configuration Guide</a></strong> - Customize the template</li>
|
||
<li><strong><a href="/gentelella/docs/components/">Components Overview</a></strong> - Explore available components</li>
|
||
<li><strong><a href="/gentelella/docs/performance/">Performance Guide</a></strong> - Optimize your build</li>
|
||
<li><strong><a href="/gentelella/docs/customization/">Customization</a></strong> - Add your own styles and features</li>
|
||
</ol><hr />
|
||
|
||
<p class="highlight">💡 <strong>Pro Tip</strong>: Use <code class="language-plaintext highlighter-rouge">npm run dev</code> during development for the best experience with hot reload and source maps. Only use <code class="language-plaintext highlighter-rouge">npm run build</code> when you’re ready to deploy to production.</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</main>
|
||
|
||
|
||
<hr>
|
||
<footer>
|
||
|
||
<p><a href="#top" id="back-to-top">Back to top</a></p>
|
||
|
||
|
||
<p class="text-small text-grey-dk-100 mb-0">Copyright © {{ 'now' | date: '%Y' }} Colorlib. Distributed under the <a href="https://github.com/puikinsh/gentelella/blob/master/LICENSE.txt">MIT license</a>.</p>
|
||
|
||
|
||
</footer>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="search-overlay"></div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</body>
|
||
</html>
|
||
|