2026 OpenClaw Web en pratique :
Storybook, actifs statiques et seuils sur Mac distant
Pour l’ingénierie front et les responsables release, ce HowTo sur Mac distant couvre Storybook : installation, build, scan des actifs statiques, seuils, OpenClaw, préflight CI et journaux. Suite : blog, smoke, package.json, aide, achat.
01 Pourquoi verrouiller la taille avant release
Trois écarts justifient une porte qualité sur les actifs statiques Storybook avant chaque publication.
- Croissance silencieuse : chaque fusion ajoute un peu de poids ; le cumul pénalise le premier rendu et les lecteurs à faible débit.
- Mauvais périmètre : un outil pointé sur la racine mélange
node_moduleset masque les vraies régressions sur le livrable statique. - Budgets flous : sans plafonds warn et fail versionnés à côté du scanner, le design system et les applications interprètent différemment ce qui est acceptable en release.
Un Mac distant rejoue le même build Storybook et le même scanner que celui validé par le release owner, sans monopoliser les portables ni les runners Linux saturés.
02 Mac distant, poste portable ou CI Linux
Linux pour le débit ; Mac distant pour parité design, Safari et OpenClaw. Caches bundler : Vite/Webpack sur Mac distant.
| Enjeu | Garde-fou Mac distant | Portable développeur | CI Linux seul |
|---|---|---|---|
| Réplicabilité | Image figée, secrets partagés | Dérive selon les réglages locaux | Forte pour lint et tests unitaires |
| Proximité Apple / Safari | Pile macOS native | Dépend de qui exécute | Pas de Safari réel |
| OpenClaw et SSH | Agent ou session 24/7 | Interrompt le travail manuel | Possible sans parité macOS |
03 Tableau des seuils indicatifs
Amorces à adapter : versionnez vos plafonds en JSON ou YAML près du script ; séparez avertissement et échec pour limiter le bruit tout en protégeant les actifs statiques.
| Périmètre | Glob typique | Warn | Fail (release) |
|---|---|---|---|
| Sortie statique entière | storybook-static/** |
> 90 Mo total | > 120 Mo total |
| Bundle JS isolé | **/*.js |
> 800 Ko | > 1,5 Mo |
| Source map | **/*.map |
rapport seul | présente sur l’hôte public |
| Police | **/*.woff2 |
> 350 Ko | > 600 Ko |
| Image matricielle | **/*.{png,jpg,jpeg,webp} |
> 500 Ko | > 1,2 Mo |
Archivez le résumé du scan en artefact de pipeline et listez les dix chemins les plus lourds ; OpenClaw peut parser ce fichier pour notifier l’astreinte ou créer un ticket sans recopier de jetons dans les journaux publics.
04 Build, scan, dépassement et chaîne CI
Exécutez sur un arbre propre du Mac distant ; réutilisez le même script en local pour reproduire avant fusion.
- Installation :
corepacksi pnpm ;pnpm install --frozen-lockfileounpm ci; Node via.nvmrc. - Build : lancez
pnpm exec build-storybook -o storybook-staticou l’équivalent npm ; refusez le scan tant questorybook-static/index.htmlest absent. - Scan : la racine reste
storybook-static; mettezsb-addonsen liste blanche seulement si ces paquets sont fournisseurs figés ; ventilez JS, polices et images. - Seuils : code de sortie non nul sur fail, avertissement matérialisé en JSON sur warn ; incluez branche et SHA Git dans le nom du rapport pour corréler avec la CI.
- OpenClaw : en cas d’échec, appelez l’étape de notification avec le chemin du fichier résumé ; redigez stdout pour éviter fuite de secrets.
- Préflight : lint → tests → build app → Storybook → porte taille → smoke optionnel ; Storybook après le bundle produit.
pnpm install --frozen-lockfile && pnpm run build-storybook && node scripts/scan-storybook-static.mjs --root storybook-static --config size-gates.json
05 Erreurs fréquentes et journaux
Heap insuffisant (webpack/Vite) : définissez NODE_OPTIONS=--max-old-space-size=8192 sur les design systems lourds ; le message apparaît dans la console du job avant la trace complète.
Scanner sans fichiers : Storybook 7+ honore -o et outputDir dans la configuration principale ; vérifiez le nom interne du dossier dans la documentation du dépôt.
Totaux gonflés par les maps : ajoutez --ignore '*.map' ou un second profil réservé aux hôtes internes.
Déconnexion SSH ou incident OpenClaw : consultez ~/.openclaw/logs ou la page d’exécution de l’orchestrateur et reliez l’horodatage à l’ID d’étape dans la CI.
Rappels : config versionnée ; artefacts 7–14 jours ; warn distinct du fail.
06 FAQ
Quel dossier analyser ? Uniquement la sortie statique, typiquement storybook-static ; évitez la racine du dépôt sans exclure node_modules et les métadonnées VCS.
Les source maps comptent-elles pour la prod ? Tranchez avec la sécurité : retirez les .map de l’hôte public ou appliquez un plafond plus strict, car elles révèlent la structure du code.
Pourquoi Storybook sur Mac distant ? Vous rapprochez la pile des designers, vous préparez des contrôles Safari et vous hébergez des automates OpenClaw longs ; le Linux reste la voie rapide pour le volume quotidien.
Figez installation et build, scannez uniquement storybook-static avec des globs explicites, appliquez le tableau de seuils dans le préflight CI, et laissez OpenClaw relayer les dépassements grâce à des rapports archivés. Un Mac distant maintient ce flux pour qui pilote Storybook, le poids des actifs statiques et une publication sans surprise.
Build Storybook et portes taille disponibles 24/7
Louez un Mac Mini M4 pour automatiser OpenClaw, le build Storybook et la publication contrôlée. Parcourez les tarifs, l’aide SSH/VNC, ou passez à l’achat sans compte.