Vite Build System

Komplexní dokumentace Vite integrace pro backend (admin panel) a frontend (veřejný web).

Přehled

Projekt používá Vite jako moderní build system s:

Dvěma oddělený dev servery: 5173 (admin), 5174 (frontend)
Hot Module Replacement: Okamžité změny bez refresh
Production optimization: Tree-shaking, code-splitting, minifikace
PHP integrace: Třída Asset::vite() pro automatické načítání

Záměr: Každý backend/frontend má svůj build pipeline s vlastními entry pointy a CSS.

Struktura src/

/src/
├── backend/                    # Admin panel assets
│   ├── admin.js               # Main admin entry point
│   ├── login.js               # Login entry point
│   ├── js/                    # Backend JavaScript
│   │   ├── main.js            # Shared backend JS
│   │   ├── cubes/             # Cube management modules
│   │   ├── menu.js, tabs.js, languages.js
│   │   └── ...další modulů
│   ├── scss/                  # Backend SCSS stylesheets
│   ├── static/                # Vendor files (ckeditor, etc.)
│   └── vendor/                # Vendor CSS/JS (tracy, dropzone)
│
├── frontend/                  # Public website assets
│   ├── frontend.js           # Main frontend entry point
│   ├── js/                   # Frontend JavaScript
│   │   ├── base.js, menu.js, gallery.js, search.js
│   │   └── ...další modulů
│   ├── scss/                 # Frontend SCSS stylesheets
│   ├── static/               # Static assets (fonts, images)
│   ├── vendor/               # Vendor CSS/JS (lightbox, prism)
│   └── _coder/               # Coder customizations
│
├── vite.config.backend.js    # Vite config pro admin
├── vite.config.frontend.js   # Vite config pro frontend
├── package.json              # Build scripts a dependency
└── node_modules/             # Dependencies (spravované Bun)

Vite Konfigurace

Backend – vite.config.backend.js

export default {
    root: './backend',                         // Source root
    base: '',                                  // Bez subpath
    publicDir: 'static',                       // Statické assety

    server: {
        host: '0.0.0.0',                       // Přístupný z venku
        port: 5173,                            // Admin dev server
        cors: { origin: '*', methods: ['GET', 'POST', 'OPTIONS'] }
    },

    build: {
        outDir: '../../public/ADMIN',          // Výstup: /public/ADMIN/
        manifest: true,                         // Generuje manifest.json
        rollupOptions: {
            input: entryPoints('backend/*.js'), // admin.js, login.js
            output: {
                entryFileNames: 'js/[name].js',
                assetFileNames: 'css/[name].[ext]'
            }
        }
    },

    plugins: [
        mkcert(),                              // HTTPS certificates
        liveReload([
            '../../app/templates/**/*.tpl',
            '../../app/(tags|cubes)/**/*.(tpl|php|scss|css|js)',
            './**/*'
        ])                                      // Hot reload
    ]
};

Frontend – vite.config.frontend.js

export default {
    root: './frontend',
    port: 5174,                                // Frontend dev server
    build: {
        outDir: '../../public',                // Výstup: /public/
        // ...ostatní identické
    }
};

Entry Points

Backend Entry Points

admin.js – Hlavní admin panel

// Vendor
import './vendor/tracy.js';
import './vendor/tracy.scss';
import './vendor/dropzone.scss';

// Admin JS
import './js/main.js';                 // Shared backend
import './js/menu.js';                 // Menu management
import './js/tabs.js';                 // Tab navigation
import './js/cubes.js';                // Cube management
import './js/wysiwyg.js';              // WYSIWYG editor
import './js/crop/init.js';            // Image cropping
import './js/dropzone/files.js';       // File uploads

// Admin CSS
import './scss/main.scss';             // Main admin styles

Výstupy:

.vite/manifest.json → admin.js mapa
/js/admin.js        → Minifikovaný admin JS
/css/admin.css      → Zkompilované SCSS
/css/main.css       → Sdílené admin CSS

import './vendor/tracy.js';
import './vendor/tracy.scss';

import './js/login.js';                 // Jen login JS
import './scss/main.scss';              // Sdílené CSS

Výhoda:

Login stránka se stahuje samostatně
Menší bundle (bez admin modulů)
Lepší performance na login

Frontend Entry Point

frontend.js – Veřejný web (complete)

// Vendor
import './vendor/tracy.js';
import './vendor/tracy.scss';
import './vendor/prism.js';
import './vendor/prism.css';
import './vendor/simple-lightbox.esm.js';
import './vendor/simple-lightbox.scss';

// Frontend JS modules
import './js/base.js';                  // Base functionality
import './js/menu.js';                  // Frontend menu
import './js/gallery.js';               // Gallery
import './js/search.js';                // Search
import './js/translations.js';          // Translations

// App tags (formuláře, komponenty)
import '../../app/tags/form/contact/form.js';
import '../../app/tags/form/contact/form.scss';
import '../../app/tags/user/registration/form.js';
import '../../app/tags/cookies/compliance.js';
import '../../app/tags/cookies/compliance.scss';

// Frontend CSS
import './_coder/main.scss';            // Coder customizations
import './scss/frontend.scss';          // Main frontend styles

Výstupy:

.vite/manifest.json → frontend.js mapa
/js/frontend.js     → Minifikovaný frontend JS
/css/frontend.css   → Zkompilované frontend SCSS

Build Scripts

package.json

{
    "scripts": {
        "dev": "concurrently -n 'BACK,FRONT' -c 'cyan,yellow' 'vite --config vite.config.backend.js' 'vite --config vite.config.frontend.js'",
        "build": "vite build --config vite.config.backend.js && vite build --config vite.config.frontend.js"
    },
    "devDependencies": {
        "vite": "^5.0.0",
        "concurrently": "^8.2.0",
        "sass": "^1.69.0",
        "@vitejs/plugin-legacy": "^5.0.0"
    }
}

Spouštění

Development

cd src/
bun install          # Instalace závislostí (jednou)
bun run dev          # Spustí oba dev servery

Co se stane:

BACK | Vite v5.0.0 server running at:
BACK | > Local:  http://localhost:5173/
BACK | > use `--host` to expose

FRONT| Vite v5.0.0 server running at:
FRONT| > Local:  http://localhost:5174/
FRONT| > use `--host` to expose

Projeky v prohlížeči:

Admin: http://localhost:8000/ADMIN (dev server běží na pozadí)
Frontend: http://localhost:8000 (dev server běží na pozadí)

Hot Reload:

BACK | [vite] hmr client connected
BACK | [vite] updated: /src/backend/js/menu.js

Jakákoli změna v /src/backend/ nebo /src/frontend/ → okamžitá aktualizace v prohlížeči.

Production Build

cd src/
bun run build

# Výstup:
#   ✓ frontend vite v5.0.0 built in 3.21s
#   ✓ backend vite v5.0.0 built in 2.84s

Co se vygeneruje:

/public/
├── .vite/manifest.json
├── js/frontend.js (minified)
├── js/utils.js (dynamic import)
├── css/frontend.css
└── ADMIN/
    ├── .vite/manifest.json
    ├── js/admin.js (minified)
    ├── js/login.js (minified)
    ├── js/main.js (shared code)
    ├── css/admin.css
    └── css/main.css

Manifest.json

Manifest je klíčový soubor pro production. Mapuje vstupní body na výstupní bundly.

Frontend Manifest

{
  "frontend.js": {
    "file": "js/frontend.js",
    "name": "frontend",
    "src": "frontend.js",
    "isEntry": true,
    "dynamicImports": [
      "../node_modules/intl-tel-input/build/js/utils.js"
    ],
    "css": [
      "css/frontend.css"
    ]
  },
  "../node_modules/intl-tel-input/build/img/flags.webp": {
    "file": "css/flags.webp",
    "src": "../node_modules/intl-tel-input/build/img/flags.webp"
  }
}

Admin Manifest

{
  "admin.js": {
    "file": "js/admin.js",
    "src": "admin.js",
    "isEntry": true,
    "imports": ["_main.js"],
    "css": ["css/admin.css"]
  },
  "login.js": {
    "file": "js/login.js",
    "src": "login.js",
    "isEntry": true,
    "imports": ["_main.js"]
  },
  "_main.js": {
    "file": "js/main.js",
    "css": ["css/main.css"]
  }
}

PHP Integrace – Asset::vite()

Třída Petrovo\Asset\Asset (viz dokumentace v core/asset/reference) automaticky:

Dev režim: Detekuje Vite dev server → vrací <script src="http://localhost:517x/...">
Production: Čte manifest → vrací optimalizované tagy s verzemi

Frontend tag

/app/tags/assets/frontend.php:

<?php
use Petrovo\Asset\Asset;

echo Asset::vite(CONFIG['vite_frontend'], 'frontend.js');

V šabloně:

{T assets/frontend}

Výstup:

Dev:

<script src="http://localhost:5174/frontend.js"></script>

Production:

<script src="/js/frontend.js?1705234567"></script>
<link rel="stylesheet" href="/css/frontend.css?...">

Admin tag

/app/tags/ADMIN/assets/admin.php:

<?php
use Petrovo\Asset\Asset;

// Různé vstupní body
$entry = (PAGE === 'login') ? 'login.js' : 'admin.js';

echo Asset::vite(CONFIG['vite_backend'], $entry);

V admin šabloně:

{T ADMIN/assets/admin}

Workflow – Backend Developer

Přidání nového modulu

1. Vytvoř soubor

/src/backend/js/my-module.js

2. Importuj v admin.js

// /src/backend/admin.js
import './js/my-module.js';

3. Dev server se automaticky aktualizuje

BACK | [vite] updated: /src/backend/admin.js

4. Změní se v prohlížeči – Hot reload

5. Production build

bun run build

Manifest automaticky obsahuje nový modul.

Workflow – Frontend Developer

Přidání SCSS komponenty

1. Vytvoř SCSS soubor

/src/frontend/scss/components/button.scss

2. Importuj ve frontend.js

// /src/frontend/frontend.js
import './scss/components/button.scss';

3. Dev:

FRONT| [vite] updated: /src/frontend/scss/components/button.scss

CSS se okamžitě začne hledat a změní se v prohlížeči.

4. Production:

bun run build

CSS se zkompiluje do /public/css/frontend.css.

Advanced Topics

Code Splitting – Dynamické importy

Frontend automaticky generuje dynamic import pro intl-tel-input:

// /src/frontend/js/phone.js
const utils = await import('intl-tel-input/build/js/utils.js');

Vite to detekuje → vygeneruje separátní chunk:

/public/js/utils.js (dynamicImport)

Manifest:

{
  "frontend.js": {
    "dynamicImports": ["../node_modules/intl-tel-input/..."]
  }
}

Asset::vite() to automaticky řeší → přidá <link rel="modulepreload">.

Vendor Optimization

Projekt odděluje vendor code:

import './vendor/prism.js';           // External library
import './vendor/prism.css';

import './js/base.js';                // Internal code

Vite to optimalizuje → menší main bundle, vendor v separátním chunku.

Environment Variables

Vite automaticky zpracuje .env soubory:

# .env
VITE_API_URL=https://api.example.com

# .env.development
VITE_API_URL=http://localhost:3000

V kódu:

console.log(import.meta.env.VITE_API_URL);

Troubleshooting

Dev server neStartuje

# Port je obsazen?
lsof -i :5173
lsof -i :5174

# Kill proces a spusť znova
pkill -f "vite --config"
bun run dev

Hot Reload nefunguje

# Zkontroluj liveReload nastavení v vite.config.backend.js
# Musí monitorovat správné soubory:

liveReload([
    '../../app/templates/**/*.tpl',     # Tagy
    '../../app/(tags|cubes)/**/*',      # Komponenty
    './**/*'                             # Src
])

# Pokud nefunguje → zkus refresh prohlížeče (Ctrl+R)

Manifest neexistuje v production

# Build skončil s chybou?
bun run build

# Zkontroluj výstup
ls -la public/.vite/manifest.json
ls -la public/ADMIN/.vite/manifest.json

# Měly by existovat

CSS se nemění v dev

# Zkontroluj že SCSS je importován v admin.js/frontend.js
import './scss/my-component.scss';

# Hot reload jen funguje pro existující soubory
# Pokud přidáš nový SCSS → musíš refresh (Ctrl+R)

Configuace

Dev server URLs se nastavují v /config/development.yaml:

vite_backend: http://localhost:5173   # Admin dev server
vite_frontend: http://localhost:5174  # Frontend dev server

V production se Asset::vite() automaticky přepne na manifest.json.

Shrnutí

Aspekt	Popis
Dev servery	5173 (backend), 5174 (frontend)
Entry points	admin.js, login.js, frontend.js
Output	`/public/`, `/public/ADMIN/`
Manifest	`/public/.vite/manifest.json`
PHP integrace	`Asset::vite(url, entry)`
Hot reload	Automatické při change v `/src/`
Production	Tree-shake, minify, manifest
Performance	Cache-busting přes filemtime()

Vite + Asset = efektivní, moderní build system pro PHP + JS combo projekt.