Installazione E Sviluppo | Regione Toscana Design System

Configurazione per la modalità di sviluppo in Njk e Tailwind

INSTALLAZIONE

Clona questo repository, poi, all’interno della cartella del progetto, esegui:

npm install

per installare l’ambiente.
È necessaria almeno la versione 20.9.0 di Node.

SVILUPPO

Avvio Fractal Core

npm run start

Avvia il server Fractal Core (port 3000) + Webpack watch + CSS watch in parallelo.

Avvio Fractal Servizi

npm run start:servizi

Avvia il server Fractal Servizi (port 3010) + Webpack watch + CSS watch.

Avvio Core + Servizi insieme

npm run start:all

Avvia entrambi i server Fractal (Core port 3000, Servizi port 3010) condividendo un’unica istanza di Webpack watch e CSS watch, utile per verificare i link incrociati tra le due istanze.

Avviando 4 processi insieme, i primi secondi dopo il boot possono mostrare “Page not found” nel browser: è transitorio, basta ricaricare la pagina una volta che i server sono pronti.

BUILD

Build completa (Core + Servizi)

npm run build

Esegue in sequenza: clean → webpack prod → build CSS componenti → build CSS bundle → minify CSS → build Fractal Core → build Fractal Servizi → build portal.

Build Fractal Core

npm run build:fractal

Genera la build statica Fractal Core in dist/core/. Esegue automaticamente sync:changelog prima del build (via prebuild:fractal).

Build Fractal Servizi

node scripts/fractal-servizi-build.js

Genera la build statica Fractal Servizi in dist/servizi/.

Build CSS componenti

npm run build:components           # tutti i componenti
npm run build:components:servizi   # solo 08-servizi/
npm run build:components:widgets   # solo 07-widgets/

Compila i CSS individuali di ogni componente.

Build CSS bundle

npm run build:bundle               # bundle core
npm run build:bundle:servizi       # bundle servizi

Aggrega i CSS dei componenti in un unico file bundle.

Minifica CSS

npm run minify-css

Minifica public/css/main.css → public/css/main.min.css.

Build staging (Fractal + hub)

npm run build:staging

Esegue npm run build + build Storybook (predisposizione) + genera homepage hub in dist/temp/.

Pulizia dist

npm run clean

Cancella l’intera cartella dist/.

STORYBOOK (predisposizione iniziale)

Storybook è configurato nel progetto come predisposizione per un futuro workflow di documentazione. Gli script sono disponibili ma non fanno parte del flusso di sviluppo corrente.

Avvio Storybook Core (sviluppo)

npm run storybook:core     # port 6006
npm run storybook:servizi  # port 6007

Build Storybook

npm run build:storybook:core      # output: dist/core/
npm run build:storybook:servizi   # output: dist/servizi/

SVG SPRITE

Compila solo lo sprite

npm run build-svg-sprite

Genera public/icons.svg dallo sprite SVG in public/svgs/.

Compila sprite + aggiorna config yml

npm run build-svgs

Compila lo sprite SVG e aggiorna i file .config.yml dei componenti icone.

UTILITY

Sync changelog in Fractal

npm run sync:changelog

Copia CHANGELOG.md dalla root in docs/fondamenta/changelog.md per renderlo navigabile in Fractal. Eseguito automaticamente prima di ogni build:fractal.

ZIP delle immagini

npm run zip-images                # nome: images.zip
npm run zip-images-with-date      # nome: images-YYYYMMDD-HHMMSS.zip

Crea un archivio ZIP della cartella public/images/.

Snippet HTML

npm run build-html-snippets

Genera snippet HTML statici dai componenti.