Express + EJS

Installer le kit

Ce guide installe le kit dans une application Express utilisant EJS. Le chemin direct utilise le CSS déjà compilé ; le chemin custom ajoute Tailwind pour personnaliser durablement le thème et les composants.

Générer l’export portable

Depuis le dépôt du UI kit, installez ses dépendances, compilez le CSS puis générez le dossier kit/.

Dépôt UI kit Bash

cd /chemin/vers/ui-kit
npm install
npm run build:css
npm run export:kit

Choisir le mode d’installation

Basculez entre les deux procédures. Chaque onglet contient toutes les étapes nécessaires après la génération de l’export.

Installation directe

Le projet cible utilise directement le CSS compilé fourni dans l’export, sans pipeline Tailwind supplémentaire.

Copier les fichiers dans l’application

Adaptez uniquement la racine des vues si votre projet n’utilise pas src/views.

Correspondance des dossiers Text

kit/views/ui/       → src/views/ui/
kit/public/         → public/
kit/src/helpers/    → src/helpers/

# Optionnel : layouts et catalogue de démonstration
kit/views/layouts/  → src/views/layouts/
kit/views/pages/    → src/views/pages/
kit/src/data/       → src/data/

Important : conservez la structure de public/. Les bundles Floating UI, Quill, Prism et Chart.js y sont déjà inclus.

Installer les dépendances

Les bibliothèques front restent fournies sous forme de fichiers statiques.

Application cible Bash

npm install express ejs express-ejs-layouts lucide

Configurer Express et le helper d’icônes

Exposez les fichiers statiques et rendez icon ainsi que uiIcon disponibles dans tous les templates.

src/app.js Js

import express from 'express';
import expressLayouts from 'express-ejs-layouts';
import { dirname, join } from 'node:path';
import { fileURLToPath } from 'node:url';
import { renderIcon } from './helpers/icon.js';

const currentDirectory = dirname(fileURLToPath(import.meta.url));
const app = express();

app.set('view engine', 'ejs');
app.set('views', join(currentDirectory, 'views'));
app.set('layout', 'layouts/main');
app.set('layout extractScripts', true);

app.use(expressLayouts);
app.use((req, res, next) => {
  res.locals.icon = renderIcon;
  res.locals.uiIcon = renderIcon;
  res.locals.currentPath = req.path;
  next();
});

app.use(express.static(join(currentDirectory, '..', 'public')));

Charger le CSS et le runtime navigateur

Le layout charge directement le fichier public/app.css exporté.

Layout EJS Html

<!-- Dans <head> -->
<link rel="stylesheet" href="/app.css" />

<script type="importmap">
{
  "imports": {
    "@floating-ui/core": "/floating-ui-core/floating-ui.core.browser.min.mjs"
  }
}
</script>

<!-- À la fin de <body> -->
<%- typeof script !== 'undefined' ? script : '' %>
<script type="module" src="/ui/loader.js"></script>

Rendre un premier composant

Dans une page sous src/views/pages, ajoutez un partial du kit. Le loader détecte automatiquement les composants interactifs.

src/views/pages/example.ejs Ejs

<%- include('../ui/alert', {
  variant: 'success',
  title: 'Kit installé',
  message: 'Votre premier composant est opérationnel.',
  dismissible: true,
}) %>

Voir les démos Consulter l’API

Installation custom

Le projet cible recompile le kit avec Tailwind et peut modifier les tokens ainsi que les styles des composants.

Copier les fichiers dans l’application

Adaptez uniquement la racine des vues si votre projet n’utilise pas src/views.

Correspondance des dossiers Text

kit/views/ui/       → src/views/ui/
kit/public/         → public/
kit/src/helpers/    → src/helpers/

# Optionnel : layouts et catalogue de démonstration
kit/views/layouts/  → src/views/layouts/
kit/views/pages/    → src/views/pages/
kit/src/data/       → src/data/

# Sources nécessaires au build custom
kit/assets/css/        → assets/css/
kit/tailwind.config.js → tailwind.config.js

Important : conservez la structure de public/. Les bundles Floating UI, Quill, Prism et Chart.js y sont déjà inclus.

Installer les dépendances

Tailwind est ajouté aux dépendances de développement pour compiler le thème.

Application cible Bash

npm install express ejs express-ejs-layouts lucide
npm install -D tailwindcss

Configurer Express et le helper d’icônes

Exposez les fichiers statiques et rendez icon ainsi que uiIcon disponibles dans tous les templates.

src/app.js Js

import express from 'express';
import expressLayouts from 'express-ejs-layouts';
import { dirname, join } from 'node:path';
import { fileURLToPath } from 'node:url';
import { renderIcon } from './helpers/icon.js';

const currentDirectory = dirname(fileURLToPath(import.meta.url));
const app = express();

app.set('view engine', 'ejs');
app.set('views', join(currentDirectory, 'views'));
app.set('layout', 'layouts/main');
app.set('layout extractScripts', true);

app.use(expressLayouts);
app.use((req, res, next) => {
  res.locals.icon = renderIcon;
  res.locals.uiIcon = renderIcon;
  res.locals.currentPath = req.path;
  next();
});

app.use(express.static(join(currentDirectory, '..', 'public')));

Configurer le build CSS et le layout

Le CSS est généré dans public/app.css avant d’être chargé par le layout.

Build Tailwind Bash

# package.json
"scripts": {
  "dev:css": "tailwindcss -i ./assets/css/input.css -o ./public/app.css --watch",
  "build:css": "tailwindcss -i ./assets/css/input.css -o ./public/app.css --minify"
}

npm run build:css

Modifiez assets/css/tokens.css pour le thème et assets/css/input.css pour les composants. Ne modifiez pas public/app.css directement.

Layout EJS Html

<!-- Dans <head> -->
<link rel="stylesheet" href="/app.css" />

<script type="importmap">
{
  "imports": {
    "@floating-ui/core": "/floating-ui-core/floating-ui.core.browser.min.mjs"
  }
}
</script>

<!-- À la fin de <body> -->
<%- typeof script !== 'undefined' ? script : '' %>
<script type="module" src="/ui/loader.js"></script>

Rendre un premier composant

Dans une page sous src/views/pages, ajoutez un partial du kit. Le loader détecte automatiquement les composants interactifs.

src/views/pages/example.ejs Ejs

<%- include('../ui/alert', {
  variant: 'success',
  title: 'Kit installé',
  message: 'Votre premier composant est opérationnel.',
  dismissible: true,
}) %>

Voir les démos Consulter l’API Personnaliser le thème

Installation terminée

• /app.css répond sans erreur
• /ui/loader.js répond sans erreur
• les icônes sont rendues côté serveur
• les composants interactifs répondent au clavier
• le thème sombre ne provoque pas de flash
• le build CSS de production passe