Vite

Projekt používá Vite pro build assetů ve dvou oddělených větvích:

• admin pro administraci
• website pro veřejný web

Terminologie backend/frontend už pro tenhle build neplatí. Obě části jsou z pohledu asset pipeline frontend, jen mají jiné entry pointy, jiné výstupy a jiné dev servery.

Přehled

Aktuální setup:

• dva Vite dev servery
• vite.config.admin.js na portu 5173
• vite.config.website.js na portu 5174
• produkční manifest pro admin v public/ADMIN/.vite/manifest.json
• produkční manifest pro website v public/.vite/manifest.json
• PHP integrace přes Core\Asset\Asset::viteAssets()

Struktura src/

src/
├── admin/
│   ├── admin.js
│   ├── login.js
│   ├── js/
│   ├── scss/
│   └── vendor/
├── website/
│   ├── website.js
│   ├── cms/
│   ├── coder/
│   ├── static/
│   └── vendor/
├── package.json
├── vite.config.admin.js
└── vite.config.website.js

Dev servery

Konfigurace v src/package.json:

{
  "scripts": {
    "dev": "concurrently -n 'ADMIN,WEBSITE' -c 'cyan,yellow' 'vite --config vite.config.admin.js' 'vite --config vite.config.website.js'",
    "build": "vite build --config vite.config.admin.js && vite build --config vite.config.website.js"
  }
}

Spuštění:

cd src
bun install
bun run dev

Porty:

• http://localhost:5173 pro admin
• http://localhost:5174 pro website

Konfigurační vazba v PHP:

vite_admin: http://localhost:5173
vite_website: http://localhost:5174

Tyto hodnoty jsou v config/development.yaml.

Admin konfigurace

src/vite.config.admin.js:

• root: './admin'
• cacheDir: '../node_modules/.vite-admin'
• publicDir: 'static'
• outDir: '../../public/ADMIN'
• manifest: true
• entry pointy se sbírají z admin/*.js

Výstup:

• public/ADMIN/js/*
• public/ADMIN/css/*
• public/ADMIN/.vite/manifest.json

Admin config má navíc full reload plugin pro změny v /app/, pokud jde o .js, .scss nebo .css mimo Vite root.

Website konfigurace

src/vite.config.website.js:

• root: './website'
• cacheDir: '../node_modules/.vite-website'
• publicDir: 'static'
• outDir: '../../public'
• manifest: true
• entry pointy se sbírají z website/*.js

Výstup:

• public/js/*
• public/css/*
• public/.vite/manifest.json

Stejně jako admin používá full reload pro relevantní změny v /app/.

Entry pointy

Admin

Aktuálně existují dva hlavní entry pointy:

• src/admin/admin.js
• src/admin/login.js

admin.js načítá hlavní administraci:

• Tracy dev bar
• sdílené admin JS moduly
• menu, tabs, překlady, popupy, dropzone, hotwire
• hlavní SCSS

login.js je lehčí entry pro login a logged-out obrazovky.

Website

Hlavní website entry point je:

• src/website/website.js

Ten spojuje:

• website vendor assety
• coder/main.scss
• CMS vrstvy v src/website/cms/*
• assety z app/website/tags/*
• styly z app/Cubes/*
• auth formuláře a další website komponenty

To je důležité: website build dnes nenačítá jen src/website/*, ale i assety z app/website a app/Cubes.

PHP integrace

Načítání assetů řeší Core\Asset\Asset::viteAssets(string $server, string $entry).

Vrací strukturu:

[
    'js' => [...],
    'preload' => [...],
    'css' => [...],
]

Chování:

1. v dev režimu zkusí detekovat běžící Vite server
2. pokud běží, vrátí přímé URL na entry point
3. pokud neběží, čte produkční manifest.json

Použití pro website:

$assets = Asset::viteAssets(CONFIG['vite_website'], 'website.js');

Použití pro admin:

$assets = Asset::viteAssets(CONFIG['vite_admin'], 'admin.js');
$assets = Asset::viteAssets(CONFIG['vite_admin'], 'login.js');

Kde se assety renderují

Website

Tag:

• app/website/tags/assets/website.php
• app/website/tags/assets/website.tpl

Typické použití:

$entryPoint = 'website.js';
$assets = Asset::viteAssets(CONFIG['vite_website'], $entryPoint);

Admin

Admin používá stejný render pattern přes sdílený template partial:

• app/admin/templates/_assets.tpl

Controller předá assety například takto:

$tpl->data('assets', Asset::viteAssets(CONFIG['vite_admin'], 'admin.js'));

Login a logged-out stránka používají login.js.

Jak vypadá render assetů

Website i admin používají stejnou strukturu:

{loop="$assets.preload"}
    <link rel="modulepreload" href="{$value}">
{/loop}
{loop="$assets.js"}
    <script type="module" crossorigin src="{$value}"></script>
{/loop}
{loop="$assets.css"}
    <link rel="stylesheet" href="{$value}">
{/loop}

Pokud je přítomné CSP nonce, vloží se i do modulepreload a script tagů.

Produkční manifest

Manifest se čte podle kontextu:

• website → public/.vite/manifest.json
• admin → public/ADMIN/.vite/manifest.json

Asset::viteAssets() z manifestu rekurzivně posbírá:

• hlavní JS entry
• importy
• dynamic importy jako preload
• související CSS

Detekce dev serveru

Asset::isViteDevServerRunning():

• v produkci vrací vždy false
• v developmentu zkouší fsockopen() na host a port dev serveru
• v Docker prostředí umí použít host.docker.internal

To znamená, že PHP se automaticky přepne mezi HMR URL a manifestem bez změny šablon.

Build

Produkční build:

cd src
bun run build

Tím vzniknou:

public/
├── .vite/manifest.json
├── js/
├── css/
└── ADMIN/
    ├── .vite/manifest.json
    ├── js/
    └── css/

emptyOutDir: false znamená, že build nemaže celý výstupní adresář.

Důležité detaily

• admin a website jsou dvě oddělené asset pipeline
• neexistuje src/backend ani src/frontend; správně je src/admin a src/website
• website build může importovat assety z app/website/* i app/Cubes/*
• admin login má vlastní entry point login.js
• admin i website používají stejný návratový formát viteAssets()

Rychlá orientace

Oblast	Hodnota
Admin dev server	http://localhost:5173
Website dev server	http://localhost:5174
Admin config	src/vite.config.admin.js
Website config	src/vite.config.website.js
Admin entry pointy	admin.js, login.js
Website entry point	website.js
Admin manifest	public/ADMIN/.vite/manifest.json
Website manifest	public/.vite/manifest.json