mirror of https://github.com/ColorlibHQ/gentelella
1046 lines
75 KiB
HTML
1046 lines
75 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(3)) > 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(3) > a {
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}.site-nav > ul.nav-list:first-child > li:nth-child(3) > button svg {
|
|
transform: rotate(-90deg);
|
|
}.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(3) > 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>Configuration | Gentelella Admin Template</title>
|
|
<meta name="generator" content="Jekyll v3.9.5" />
|
|
<meta property="og:title" content="Configuration" />
|
|
<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/configuration/" />
|
|
<meta property="og:url" content="http://localhost:4000/gentelella/configuration/" />
|
|
<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="Configuration" />
|
|
<script type="application/ld+json">
|
|
{"@context":"https://schema.org","@type":"WebPage","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"Configuration","image":"http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg","url":"http://localhost:4000/gentelella/configuration/"}</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="configuration-guide">
|
|
|
|
|
|
<a href="#configuration-guide" class="anchor-heading" aria-labelledby="configuration-guide"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Configuration Guide
|
|
|
|
|
|
</h1>
|
|
|
|
|
|
<p class="fs-6 fw-300">Complete guide to configuring and customizing 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="#vite-configuration" id="markdown-toc-vite-configuration">Vite Configuration</a> <ol>
|
|
<li><a href="#basic-configuration" id="markdown-toc-basic-configuration">Basic Configuration</a></li>
|
|
<li><a href="#advanced-vite-options" id="markdown-toc-advanced-vite-options">Advanced Vite Options</a> <ol>
|
|
<li><a href="#development-optimizations" id="markdown-toc-development-optimizations">Development Optimizations</a></li>
|
|
<li><a href="#production-optimizations" id="markdown-toc-production-optimizations">Production Optimizations</a></li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#sass-configuration" id="markdown-toc-sass-configuration">SASS Configuration</a> <ol>
|
|
<li><a href="#main-sass-file" id="markdown-toc-main-sass-file">Main SASS File</a></li>
|
|
<li><a href="#bootstrap-customization" id="markdown-toc-bootstrap-customization">Bootstrap Customization</a></li>
|
|
<li><a href="#custom-component-styles" id="markdown-toc-custom-component-styles">Custom Component Styles</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#module-configuration" id="markdown-toc-module-configuration">Module Configuration</a> <ol>
|
|
<li><a href="#smart-loading-system" id="markdown-toc-smart-loading-system">Smart Loading System</a></li>
|
|
<li><a href="#chart-module-configuration" id="markdown-toc-chart-module-configuration">Chart Module Configuration</a></li>
|
|
<li><a href="#form-module-configuration" id="markdown-toc-form-module-configuration">Form Module Configuration</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#environment-variables" id="markdown-toc-environment-variables">Environment Variables</a> <ol>
|
|
<li><a href="#development-environment" id="markdown-toc-development-environment">Development Environment</a></li>
|
|
<li><a href="#production-environment" id="markdown-toc-production-environment">Production Environment</a></li>
|
|
<li><a href="#using-environment-variables" id="markdown-toc-using-environment-variables">Using Environment Variables</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#performance-configuration" id="markdown-toc-performance-configuration">Performance Configuration</a> <ol>
|
|
<li><a href="#bundle-optimization" id="markdown-toc-bundle-optimization">Bundle Optimization</a></li>
|
|
<li><a href="#asset-optimization" id="markdown-toc-asset-optimization">Asset Optimization</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#advanced-configuration" id="markdown-toc-advanced-configuration">Advanced Configuration</a> <ol>
|
|
<li><a href="#typescript-support" id="markdown-toc-typescript-support">TypeScript Support</a></li>
|
|
<li><a href="#eslint-configuration" id="markdown-toc-eslint-configuration">ESLint Configuration</a></li>
|
|
<li><a href="#prettier-configuration" id="markdown-toc-prettier-configuration">Prettier Configuration</a></li>
|
|
</ol>
|
|
</li>
|
|
<li><a href="#next-steps" id="markdown-toc-next-steps">Next Steps</a></li>
|
|
</ol><hr />
|
|
<h2 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
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="basic-configuration">
|
|
|
|
|
|
<a href="#basic-configuration" class="anchor-heading" aria-labelledby="basic-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Basic Configuration
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>The <code class="language-plaintext highlighter-rouge">vite.config.js</code> file contains optimized settings for both development and production builds:</p>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vite</span><span class="dl">'</span><span class="p">;</span>
|
|
<span class="k">import</span> <span class="p">{</span> <span class="nx">resolve</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">path</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="k">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span>
|
|
<span class="c1">// Development server configuration</span>
|
|
<span class="na">server</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">port</span><span class="p">:</span> <span class="mi">3000</span><span class="p">,</span>
|
|
<span class="na">host</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">open</span><span class="p">:</span> <span class="kc">true</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="c1">// Build configuration</span>
|
|
<span class="na">build</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">outDir</span><span class="p">:</span> <span class="dl">'</span><span class="s1">dist</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">assetsDir</span><span class="p">:</span> <span class="dl">'</span><span class="s1">assets</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">rollupOptions</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">input</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="c1">// All 42 HTML files are configured as entry points</span>
|
|
<span class="dl">'</span><span class="s1">index</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">production/index.html</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">index2</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">production/index2.html</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">index3</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">production/index3.html</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">form</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">production/form.html</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">form_advanced</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">production/form_advanced.html</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">tables</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">production/tables.html</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">charts</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">production/chartjs.html</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="c1">// ... and 35 more pages</span>
|
|
<span class="p">},</span>
|
|
<span class="na">output</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="c1">// Manual chunk splitting for optimal loading</span>
|
|
<span class="na">manualChunks</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="dl">'</span><span class="s1">vendor-core</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">bootstrap</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">@popperjs/core</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="dl">'</span><span class="s1">vendor-charts</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">chart.js</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">morris.js</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="dl">'</span><span class="s1">vendor-forms</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">select2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">tempus-dominus</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="dl">'</span><span class="s1">vendor-tables</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">datatables.net</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="dl">'</span><span class="s1">vendor-utils</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">dayjs</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">nprogress</span><span class="dl">'</span><span class="p">]</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="c1">// Asset optimization</span>
|
|
<span class="na">assetsInlineLimit</span><span class="p">:</span> <span class="mi">4096</span><span class="p">,</span>
|
|
<span class="na">minify</span><span class="p">:</span> <span class="dl">'</span><span class="s1">terser</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">terserOptions</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">compress</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">drop_console</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">drop_debugger</span><span class="p">:</span> <span class="kc">true</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h3 id="advanced-vite-options">
|
|
|
|
|
|
<a href="#advanced-vite-options" class="anchor-heading" aria-labelledby="advanced-vite-options"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Advanced Vite Options
|
|
|
|
|
|
</h3>
|
|
|
|
<h4 id="development-optimizations">
|
|
|
|
|
|
<a href="#development-optimizations" class="anchor-heading" aria-labelledby="development-optimizations"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Development Optimizations
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span>
|
|
<span class="na">server</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="c1">// Custom port</span>
|
|
<span class="na">port</span><span class="p">:</span> <span class="mi">3001</span><span class="p">,</span>
|
|
|
|
<span class="c1">// Enable HTTPS for local development</span>
|
|
<span class="na">https</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
|
|
<span class="c1">// Proxy API requests</span>
|
|
<span class="na">proxy</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="dl">'</span><span class="s1">/api</span><span class="dl">'</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">target</span><span class="p">:</span> <span class="dl">'</span><span class="s1">http://localhost:8080</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">changeOrigin</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">rewrite</span><span class="p">:</span> <span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="o">=></span> <span class="nx">path</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/^</span><span class="se">\/</span><span class="sr">api/</span><span class="p">,</span> <span class="dl">''</span><span class="p">)</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="c1">// Enable source maps in development</span>
|
|
<span class="na">css</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">devSourcemap</span><span class="p">:</span> <span class="kc">true</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h4 id="production-optimizations">
|
|
|
|
|
|
<a href="#production-optimizations" class="anchor-heading" aria-labelledby="production-optimizations"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Production Optimizations
|
|
|
|
|
|
</h4>
|
|
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span>
|
|
<span class="na">build</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="c1">// Target modern browsers for smaller bundles</span>
|
|
<span class="na">target</span><span class="p">:</span> <span class="dl">'</span><span class="s1">es2018</span><span class="dl">'</span><span class="p">,</span>
|
|
|
|
<span class="c1">// Enable CSS code splitting</span>
|
|
<span class="na">cssCodeSplit</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
|
|
<span class="c1">// Generate source maps for production debugging</span>
|
|
<span class="na">sourcemap</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
|
|
<span class="c1">// Optimize chunk size</span>
|
|
<span class="na">chunkSizeWarningLimit</span><span class="p">:</span> <span class="mi">1000</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 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
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="main-sass-file">
|
|
|
|
|
|
<a href="#main-sass-file" class="anchor-heading" aria-labelledby="main-sass-file"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Main SASS File
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>The <code class="language-plaintext highlighter-rouge">src/main.scss</code> file is the entry point for all styles:</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 (still supported)</span>
|
|
<span class="c1">// @import "bootstrap/scss/bootstrap";</span>
|
|
<span class="c1">// @import "./scss/custom.scss";</span>
|
|
</code></pre></div></div>
|
|
<h3 id="bootstrap-customization">
|
|
|
|
|
|
<a href="#bootstrap-customization" class="anchor-heading" aria-labelledby="bootstrap-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Bootstrap Customization
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>Create <code class="language-plaintext highlighter-rouge">src/scss/bootstrap-custom.scss</code> to override Bootstrap variables:</p>
|
|
|
|
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Override Bootstrap variables BEFORE importing Bootstrap</span>
|
|
<span class="nv">$primary</span><span class="p">:</span> <span class="mh">#73879C</span><span class="p">;</span>
|
|
<span class="nv">$secondary</span><span class="p">:</span> <span class="mh">#6c757d</span><span class="p">;</span>
|
|
<span class="nv">$success</span><span class="p">:</span> <span class="mh">#26B99A</span><span class="p">;</span>
|
|
<span class="nv">$info</span><span class="p">:</span> <span class="mh">#3498DB</span><span class="p">;</span>
|
|
<span class="nv">$warning</span><span class="p">:</span> <span class="mh">#F39C12</span><span class="p">;</span>
|
|
<span class="nv">$danger</span><span class="p">:</span> <span class="mh">#E74C3C</span><span class="p">;</span>
|
|
|
|
<span class="c1">// Typography</span>
|
|
<span class="nv">$font-family-base</span><span class="p">:</span> <span class="s1">'Roboto'</span><span class="o">,</span> <span class="s1">'Helvetica Neue'</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
|
|
<span class="nv">$font-size-base</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span>
|
|
<span class="nv">$line-height-base</span><span class="p">:</span> <span class="m">1</span><span class="mi">.5</span><span class="p">;</span>
|
|
|
|
<span class="c1">// Sidebar customization</span>
|
|
<span class="nv">$sidebar-width</span><span class="p">:</span> <span class="m">230px</span><span class="p">;</span>
|
|
<span class="nv">$sidebar-bg</span><span class="p">:</span> <span class="mh">#2A3F54</span><span class="p">;</span>
|
|
<span class="nv">$sidebar-text-color</span><span class="p">:</span> <span class="mh">#E7E7E7</span><span class="p">;</span>
|
|
|
|
<span class="c1">// Import Bootstrap with your customizations</span>
|
|
<span class="k">@import</span> <span class="s2">"bootstrap/scss/bootstrap"</span><span class="p">;</span>
|
|
</code></pre></div></div>
|
|
<h3 id="custom-component-styles">
|
|
|
|
|
|
<a href="#custom-component-styles" class="anchor-heading" aria-labelledby="custom-component-styles"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Component Styles
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>Create <code class="language-plaintext highlighter-rouge">src/scss/components/</code> directory for modular styles:</p>
|
|
|
|
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/scss/components/_dashboard.scss</span>
|
|
<span class="nc">.dashboard-card</span> <span class="p">{</span>
|
|
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
|
|
<span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">2px</span> <span class="m">4px</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
|
|
<span class="nl">transition</span><span class="p">:</span> <span class="n">transform</span> <span class="m">0</span><span class="mi">.2s</span> <span class="n">ease-in-out</span><span class="p">;</span>
|
|
|
|
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
|
|
<span class="nl">transform</span><span class="p">:</span> <span class="nf">translateY</span><span class="p">(</span><span class="m">-2px</span><span class="p">);</span>
|
|
<span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">4px</span> <span class="m">12px</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="mi">.15</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nc">.card-header</span> <span class="p">{</span>
|
|
<span class="nl">background</span><span class="p">:</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="m">135deg</span><span class="o">,</span> <span class="nv">$primary</span><span class="o">,</span> <span class="nf">darken</span><span class="p">(</span><span class="nv">$primary</span><span class="o">,</span> <span class="m">10%</span><span class="p">));</span>
|
|
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
|
|
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span> <span class="m">8px</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="c1">// src/scss/components/_sidebar.scss</span>
|
|
<span class="nc">.sidebar</span> <span class="p">{</span>
|
|
<span class="nl">width</span><span class="p">:</span> <span class="nv">$sidebar-width</span><span class="p">;</span>
|
|
<span class="nl">background-color</span><span class="p">:</span> <span class="nv">$sidebar-bg</span><span class="p">;</span>
|
|
|
|
<span class="nc">.nav-link</span> <span class="p">{</span>
|
|
<span class="nl">color</span><span class="p">:</span> <span class="nv">$sidebar-text-color</span><span class="p">;</span>
|
|
<span class="nl">padding</span><span class="p">:</span> <span class="m">12px</span> <span class="m">20px</span><span class="p">;</span>
|
|
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span>
|
|
<span class="nl">margin</span><span class="p">:</span> <span class="m">2px</span> <span class="m">10px</span><span class="p">;</span>
|
|
<span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0</span><span class="mi">.3s</span> <span class="n">ease</span><span class="p">;</span>
|
|
|
|
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
|
|
<span class="nl">background-color</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span><span class="m">255</span><span class="o">,</span><span class="m">255</span><span class="o">,</span><span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
|
|
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">&</span><span class="nc">.active</span> <span class="p">{</span>
|
|
<span class="nl">background-color</span><span class="p">:</span> <span class="nv">$primary</span><span class="p">;</span>
|
|
<span class="nl">color</span><span class="p">:</span> <span class="no">white</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="module-configuration">
|
|
|
|
|
|
<a href="#module-configuration" class="anchor-heading" aria-labelledby="module-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Module Configuration
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="smart-loading-system">
|
|
|
|
|
|
<a href="#smart-loading-system" class="anchor-heading" aria-labelledby="smart-loading-system"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Smart Loading System
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>Configure which modules load automatically vs. on-demand:</p>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/main-core.js - Always loaded essentials</span>
|
|
<span class="k">import</span> <span class="dl">'</span><span class="s1">bootstrap/dist/js/bootstrap.bundle.min.js</span><span class="dl">'</span><span class="p">;</span>
|
|
<span class="k">import</span> <span class="dl">'</span><span class="s1">./js/custom.min.js</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="c1">// Initialize core functionality</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">DOMContentLoaded</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="c1">// Initialize tooltips</span>
|
|
<span class="kd">const</span> <span class="nx">tooltipTriggerList</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">[data-bs-toggle="tooltip"]</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="kd">const</span> <span class="nx">tooltipList</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">tooltipTriggerList</span><span class="p">].</span><span class="nx">map</span><span class="p">(</span><span class="nx">tooltipTriggerEl</span> <span class="o">=></span>
|
|
<span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">(</span><span class="nx">tooltipTriggerEl</span><span class="p">)</span>
|
|
<span class="p">);</span>
|
|
|
|
<span class="c1">// Initialize popovers</span>
|
|
<span class="kd">const</span> <span class="nx">popoverTriggerList</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">[data-bs-toggle="popover"]</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="kd">const</span> <span class="nx">popoverList</span> <span class="o">=</span> <span class="p">[...</span><span class="nx">popoverTriggerList</span><span class="p">].</span><span class="nx">map</span><span class="p">(</span><span class="nx">popoverTriggerEl</span> <span class="o">=></span>
|
|
<span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Popover</span><span class="p">(</span><span class="nx">popoverTriggerEl</span><span class="p">)</span>
|
|
<span class="p">);</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="c1">// Dynamic module loading</span>
|
|
<span class="k">export</span> <span class="k">async</span> <span class="kd">function</span> <span class="nx">loadModule</span><span class="p">(</span><span class="nx">moduleName</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">try</span> <span class="p">{</span>
|
|
<span class="k">switch</span><span class="p">(</span><span class="nx">moduleName</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="k">case</span> <span class="dl">'</span><span class="s1">charts</span><span class="dl">'</span><span class="p">:</span>
|
|
<span class="k">return</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./modules/charts.js</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="k">case</span> <span class="dl">'</span><span class="s1">forms</span><span class="dl">'</span><span class="p">:</span>
|
|
<span class="k">return</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./modules/forms.js</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="k">case</span> <span class="dl">'</span><span class="s1">tables</span><span class="dl">'</span><span class="p">:</span>
|
|
<span class="k">return</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./modules/tables.js</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="k">case</span> <span class="dl">'</span><span class="s1">dashboard</span><span class="dl">'</span><span class="p">:</span>
|
|
<span class="k">return</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./modules/dashboard.js</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="nl">default</span><span class="p">:</span>
|
|
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`Unknown module: </span><span class="p">${</span><span class="nx">moduleName</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s2">`Failed to load module </span><span class="p">${</span><span class="nx">moduleName</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
|
|
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div></div>
|
|
<h3 id="chart-module-configuration">
|
|
|
|
|
|
<a href="#chart-module-configuration" class="anchor-heading" aria-labelledby="chart-module-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Chart Module Configuration
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/modules/charts.js</span>
|
|
<span class="k">import</span> <span class="nx">Chart</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">chart.js/auto</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="k">export</span> <span class="kd">const</span> <span class="nx">chartConfig</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="c1">// Default Chart.js configuration</span>
|
|
<span class="na">defaultOptions</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">responsive</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">maintainAspectRatio</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
|
<span class="na">plugins</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">legend</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">position</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bottom</span><span class="dl">'</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
<span class="na">scales</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">y</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">beginAtZero</span><span class="p">:</span> <span class="kc">true</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="c1">// Chart themes</span>
|
|
<span class="na">themes</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">primary</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">backgroundColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">rgba(115, 135, 156, 0.1)</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">borderColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#73879C</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">pointBackgroundColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#73879C</span><span class="dl">'</span>
|
|
<span class="p">},</span>
|
|
<span class="na">success</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">backgroundColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">rgba(38, 185, 154, 0.1)</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">borderColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#26B99A</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">pointBackgroundColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#26B99A</span><span class="dl">'</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">export</span> <span class="kd">function</span> <span class="nx">initializeCharts</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="c1">// Auto-initialize charts on page load</span>
|
|
<span class="kd">const</span> <span class="nx">chartElements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">.chart-container canvas</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="nx">chartElements</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">canvas</span> <span class="o">=></span> <span class="p">{</span>
|
|
<span class="kd">const</span> <span class="nx">chartType</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">chartType</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">line</span><span class="dl">'</span><span class="p">;</span>
|
|
<span class="kd">const</span> <span class="nx">chartData</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">chartData</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">{}</span><span class="dl">'</span><span class="p">);</span>
|
|
|
|
<span class="k">new</span> <span class="nx">Chart</span><span class="p">(</span><span class="nx">canvas</span><span class="p">,</span> <span class="p">{</span>
|
|
<span class="na">type</span><span class="p">:</span> <span class="nx">chartType</span><span class="p">,</span>
|
|
<span class="na">data</span><span class="p">:</span> <span class="nx">chartData</span><span class="p">,</span>
|
|
<span class="na">options</span><span class="p">:</span> <span class="nx">chartConfig</span><span class="p">.</span><span class="nx">defaultOptions</span>
|
|
<span class="p">});</span>
|
|
<span class="p">});</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div></div>
|
|
<h3 id="form-module-configuration">
|
|
|
|
|
|
<a href="#form-module-configuration" class="anchor-heading" aria-labelledby="form-module-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Form Module Configuration
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/modules/forms.js</span>
|
|
<span class="k">import</span> <span class="p">{</span> <span class="nx">DateTime</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">tempus-dominus</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="k">export</span> <span class="kd">const</span> <span class="nx">formConfig</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="c1">// Select2 configuration</span>
|
|
<span class="na">select2</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">theme</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bootstrap-5</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">width</span><span class="p">:</span> <span class="dl">'</span><span class="s1">100%</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">placeholder</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Select an option...</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">allowClear</span><span class="p">:</span> <span class="kc">true</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="c1">// Date picker configuration</span>
|
|
<span class="na">datePicker</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">display</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">theme</span><span class="p">:</span> <span class="dl">'</span><span class="s1">light</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">components</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">calendar</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">date</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">month</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">year</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">decades</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">clock</span><span class="p">:</span> <span class="kc">false</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
<span class="na">localization</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">format</span><span class="p">:</span> <span class="dl">'</span><span class="s1">MM/dd/yyyy</span><span class="dl">'</span>
|
|
<span class="p">}</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="c1">// Validation rules</span>
|
|
<span class="na">validation</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">errorClass</span><span class="p">:</span> <span class="dl">'</span><span class="s1">is-invalid</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">successClass</span><span class="p">:</span> <span class="dl">'</span><span class="s1">is-valid</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">errorElement</span><span class="p">:</span> <span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">errorPlacement</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">,</span> <span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">error</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="dl">'</span><span class="s1">invalid-feedback</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="nx">element</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="dl">'</span><span class="s1">.form-group</span><span class="dl">'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="k">export</span> <span class="kd">function</span> <span class="nx">initializeForms</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="c1">// Initialize Select2</span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.select2</span><span class="dl">'</span><span class="p">).</span><span class="nx">select2</span><span class="p">(</span><span class="nx">formConfig</span><span class="p">.</span><span class="nx">select2</span><span class="p">);</span>
|
|
|
|
<span class="c1">// Initialize date pickers</span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">.datepicker</span><span class="dl">'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">new</span> <span class="nx">DateTime</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">formConfig</span><span class="p">.</span><span class="nx">datePicker</span><span class="p">);</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="c1">// Initialize form validation</span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">form[data-validate]</span><span class="dl">'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">validate</span><span class="p">(</span><span class="nx">formConfig</span><span class="p">.</span><span class="nx">validation</span><span class="p">);</span>
|
|
<span class="p">});</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="environment-variables">
|
|
|
|
|
|
<a href="#environment-variables" class="anchor-heading" aria-labelledby="environment-variables"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Environment Variables
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="development-environment">
|
|
|
|
|
|
<a href="#development-environment" class="anchor-heading" aria-labelledby="development-environment"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Development Environment
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>Create <code class="language-plaintext highlighter-rouge">.env.development</code>:</p>
|
|
|
|
<pre><code class="language-env"># Development settings
|
|
VITE_API_URL=http://localhost:8080/api
|
|
VITE_APP_NAME=Gentelella Admin (Dev)
|
|
VITE_DEBUG_MODE=true
|
|
VITE_BUNDLE_ANALYZER=false
|
|
|
|
# Feature flags
|
|
VITE_ENABLE_CHARTS=true
|
|
VITE_ENABLE_MAPS=true
|
|
VITE_ENABLE_REAL_TIME=false
|
|
</code></pre>
|
|
<h3 id="production-environment">
|
|
|
|
|
|
<a href="#production-environment" class="anchor-heading" aria-labelledby="production-environment"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Production Environment
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>Create <code class="language-plaintext highlighter-rouge">.env.production</code>:</p>
|
|
|
|
<pre><code class="language-env"># Production settings
|
|
VITE_API_URL=https://api.yoursite.com
|
|
VITE_APP_NAME=Gentelella Admin
|
|
VITE_DEBUG_MODE=false
|
|
VITE_BUNDLE_ANALYZER=false
|
|
|
|
# Performance settings
|
|
VITE_PRELOAD_MODULES=charts,forms
|
|
VITE_CDN_URL=https://cdn.yoursite.com
|
|
</code></pre>
|
|
<h3 id="using-environment-variables">
|
|
|
|
|
|
<a href="#using-environment-variables" class="anchor-heading" aria-labelledby="using-environment-variables"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Using Environment Variables
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// In your JavaScript files</span>
|
|
<span class="kd">const</span> <span class="nx">apiUrl</span> <span class="o">=</span> <span class="k">import</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">VITE_API_URL</span><span class="p">;</span>
|
|
<span class="kd">const</span> <span class="nx">debugMode</span> <span class="o">=</span> <span class="k">import</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">VITE_DEBUG_MODE</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">true</span><span class="dl">'</span><span class="p">;</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="nx">debugMode</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Debug mode enabled</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="c1">// Conditional module loading</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="k">import</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">VITE_ENABLE_CHARTS</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">true</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kd">const</span> <span class="nx">charts</span> <span class="o">=</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./modules/charts.js</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="nx">charts</span><span class="p">.</span><span class="nx">initializeCharts</span><span class="p">();</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="performance-configuration">
|
|
|
|
|
|
<a href="#performance-configuration" class="anchor-heading" aria-labelledby="performance-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Performance Configuration
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="bundle-optimization">
|
|
|
|
|
|
<a href="#bundle-optimization" class="anchor-heading" aria-labelledby="bundle-optimization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Bundle Optimization
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// vite.config.js - Production optimizations</span>
|
|
<span class="k">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span>
|
|
<span class="na">build</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">rollupOptions</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">output</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">manualChunks</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="c1">// Core vendor libraries (loaded on every page)</span>
|
|
<span class="dl">'</span><span class="s1">vendor-core</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="dl">'</span><span class="s1">bootstrap</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">@popperjs/core</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">jquery</span><span class="dl">'</span>
|
|
<span class="p">],</span>
|
|
|
|
<span class="c1">// Chart libraries (loaded only on chart pages)</span>
|
|
<span class="dl">'</span><span class="s1">vendor-charts</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="dl">'</span><span class="s1">chart.js</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">morris.js</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">gauge.js</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">jquery-sparkline</span><span class="dl">'</span>
|
|
<span class="p">],</span>
|
|
|
|
<span class="c1">// Form enhancement libraries</span>
|
|
<span class="dl">'</span><span class="s1">vendor-forms</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="dl">'</span><span class="s1">select2</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">tempus-dominus</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">ion-rangeslider</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">switchery</span><span class="dl">'</span>
|
|
<span class="p">],</span>
|
|
|
|
<span class="c1">// Table functionality</span>
|
|
<span class="dl">'</span><span class="s1">vendor-tables</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="dl">'</span><span class="s1">datatables.net</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">datatables.net-bs5</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">datatables.net-responsive</span><span class="dl">'</span>
|
|
<span class="p">],</span>
|
|
|
|
<span class="c1">// Utility libraries</span>
|
|
<span class="dl">'</span><span class="s1">vendor-utils</span><span class="dl">'</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="dl">'</span><span class="s1">dayjs</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">nprogress</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">autosize</span><span class="dl">'</span>
|
|
<span class="p">]</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div>
|
|
<h3 id="asset-optimization">
|
|
|
|
|
|
<a href="#asset-optimization" class="anchor-heading" aria-labelledby="asset-optimization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Asset Optimization
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// vite.config.js - Asset handling</span>
|
|
<span class="k">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span>
|
|
<span class="na">assetsInclude</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">**/*.xlsx</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">**/*.pdf</span><span class="dl">'</span><span class="p">],</span>
|
|
|
|
<span class="na">build</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">assetsInlineLimit</span><span class="p">:</span> <span class="mi">4096</span><span class="p">,</span> <span class="c1">// Inline assets smaller than 4KB</span>
|
|
|
|
<span class="na">rollupOptions</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">output</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">assetFileNames</span><span class="p">:</span> <span class="p">(</span><span class="nx">assetInfo</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
|
|
<span class="kd">const</span> <span class="nx">info</span> <span class="o">=</span> <span class="nx">assetInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="dl">'</span><span class="s1">.</span><span class="dl">'</span><span class="p">);</span>
|
|
<span class="kd">const</span> <span class="nx">extType</span> <span class="o">=</span> <span class="nx">info</span><span class="p">[</span><span class="nx">info</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">];</span>
|
|
|
|
<span class="k">if</span> <span class="p">(</span><span class="sr">/</span><span class="se">\.(</span><span class="sr">png|jpe</span><span class="se">?</span><span class="sr">g|svg|gif|tiff|bmp|ico</span><span class="se">)</span><span class="sr">$/i</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">assetInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="s2">`images/[name]-[hash][extname]`</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="sr">/</span><span class="se">\.(</span><span class="sr">woff2</span><span class="se">?</span><span class="sr">|eot|ttf|otf</span><span class="se">)</span><span class="sr">$/i</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">assetInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="s2">`fonts/[name]-[hash][extname]`</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="k">if</span> <span class="p">(</span><span class="sr">/</span><span class="se">\.</span><span class="sr">css$/i</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">assetInfo</span><span class="p">.</span><span class="nx">name</span><span class="p">))</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="s2">`css/[name]-[hash][extname]`</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="k">return</span> <span class="s2">`assets/[name]-[hash][extname]`</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div></div><hr />
|
|
<h2 id="advanced-configuration">
|
|
|
|
|
|
<a href="#advanced-configuration" class="anchor-heading" aria-labelledby="advanced-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Advanced Configuration
|
|
|
|
|
|
</h2>
|
|
|
|
<h3 id="typescript-support">
|
|
|
|
|
|
<a href="#typescript-support" class="anchor-heading" aria-labelledby="typescript-support"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> TypeScript Support
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>Enable TypeScript by creating <code class="language-plaintext highlighter-rouge">tsconfig.json</code>:</p>
|
|
|
|
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
|
|
</span><span class="nl">"compilerOptions"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
|
|
</span><span class="nl">"target"</span><span class="p">:</span><span class="w"> </span><span class="s2">"ES2020"</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"useDefineForClassFields"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"lib"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"ES2020"</span><span class="p">,</span><span class="w"> </span><span class="s2">"DOM"</span><span class="p">,</span><span class="w"> </span><span class="s2">"DOM.Iterable"</span><span class="p">],</span><span class="w">
|
|
</span><span class="nl">"module"</span><span class="p">:</span><span class="w"> </span><span class="s2">"ESNext"</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"skipLibCheck"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"moduleResolution"</span><span class="p">:</span><span class="w"> </span><span class="s2">"bundler"</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"allowImportingTsExtensions"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"resolveJsonModule"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"isolatedModules"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"noEmit"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"strict"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"noUnusedLocals"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"noUnusedParameters"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"noFallthroughCasesInSwitch"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"paths"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
|
|
</span><span class="nl">"@/*"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"./src/*"</span><span class="p">],</span><span class="w">
|
|
</span><span class="nl">"@components/*"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"./src/components/*"</span><span class="p">],</span><span class="w">
|
|
</span><span class="nl">"@modules/*"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"./src/modules/*"</span><span class="p">]</span><span class="w">
|
|
</span><span class="p">}</span><span class="w">
|
|
</span><span class="p">},</span><span class="w">
|
|
</span><span class="nl">"include"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"src"</span><span class="p">]</span><span class="w">
|
|
</span><span class="p">}</span><span class="w">
|
|
</span></code></pre></div></div>
|
|
<h3 id="eslint-configuration">
|
|
|
|
|
|
<a href="#eslint-configuration" class="anchor-heading" aria-labelledby="eslint-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> ESLint Configuration
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>Create <code class="language-plaintext highlighter-rouge">.eslintrc.js</code>:</p>
|
|
|
|
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="na">env</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">browser</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">es2021</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
|
|
<span class="na">node</span><span class="p">:</span> <span class="kc">true</span>
|
|
<span class="p">},</span>
|
|
<span class="na">extends</span><span class="p">:</span> <span class="p">[</span>
|
|
<span class="dl">'</span><span class="s1">eslint:recommended</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">@typescript-eslint/recommended</span><span class="dl">'</span>
|
|
<span class="p">],</span>
|
|
<span class="na">parser</span><span class="p">:</span> <span class="dl">'</span><span class="s1">@typescript-eslint/parser</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">parserOptions</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="na">ecmaVersion</span><span class="p">:</span> <span class="dl">'</span><span class="s1">latest</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="na">sourceType</span><span class="p">:</span> <span class="dl">'</span><span class="s1">module</span><span class="dl">'</span>
|
|
<span class="p">},</span>
|
|
<span class="na">plugins</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">@typescript-eslint</span><span class="dl">'</span><span class="p">],</span>
|
|
<span class="na">rules</span><span class="p">:</span> <span class="p">{</span>
|
|
<span class="dl">'</span><span class="s1">no-console</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">warn</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">no-debugger</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">error</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">prefer-const</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">error</span><span class="dl">'</span><span class="p">,</span>
|
|
<span class="dl">'</span><span class="s1">no-var</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">error</span><span class="dl">'</span>
|
|
<span class="p">},</span>
|
|
<span class="na">ignorePatterns</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">dist</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">node_modules</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">vendors</span><span class="dl">'</span><span class="p">]</span>
|
|
<span class="p">};</span>
|
|
</code></pre></div></div>
|
|
<h3 id="prettier-configuration">
|
|
|
|
|
|
<a href="#prettier-configuration" class="anchor-heading" aria-labelledby="prettier-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Prettier Configuration
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<p>Create <code class="language-plaintext highlighter-rouge">.prettierrc</code>:</p>
|
|
|
|
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
|
|
</span><span class="nl">"semi"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"trailingComma"</span><span class="p">:</span><span class="w"> </span><span class="s2">"es5"</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"singleQuote"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"printWidth"</span><span class="p">:</span><span class="w"> </span><span class="mi">80</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"tabWidth"</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"useTabs"</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"bracketSpacing"</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"arrowParens"</span><span class="p">:</span><span class="w"> </span><span class="s2">"avoid"</span><span class="p">,</span><span class="w">
|
|
</span><span class="nl">"endOfLine"</span><span class="p">:</span><span class="w"> </span><span class="s2">"lf"</span><span class="w">
|
|
</span><span class="p">}</span><span class="w">
|
|
</span></code></pre></div></div><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>
|
|
|
|
|
|
<ul>
|
|
<li><strong><a href="/gentelella/docs/components/">Components Guide</a></strong> - Explore all available components</li>
|
|
<li><strong><a href="/gentelella/docs/customization/">Customization Guide</a></strong> - Advanced customization techniques</li>
|
|
<li><strong><a href="/gentelella/docs/performance/">Performance Guide</a></strong> - Optimization strategies</li>
|
|
<li><strong><a href="/gentelella/docs/deployment/">Deployment Guide</a></strong> - Deploy to production</li>
|
|
</ul><hr />
|
|
|
|
<p class="highlight">💡 <strong>Pro Tip</strong>: Start with the default configuration and gradually customize based on your project needs. The modular architecture allows you to enable/disable features as required.</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>
|
|
|