elixforms-web-pages/react/automate.md

Perfetto: preparo per te un sistema completamente automatizzato che crea una nuova pagina React+Vite+FluentUI già configurata per produrre un singolo file JS.
Ti basta lanciare un solo comando per generare una nuova pagina dentro custom-pages/.

---

🚀 Obiettivo

Automatizzare la creazione di nuove pagine con:

• struttura custom-pages/<nome-pagina>/
• React + Vite + Fluent UI
• configurazione vite.config.js già pronta per bundle unico
• CSS iniettato nel JS
• build pronta per deploy

---

🧩 1. Script Node: create-page.js

Metti questo file nella cartella root che contiene custom-pages/:

create-page.js
custom-pages/

📄 create-page.js

#!/usr/bin/env node

const { execSync } = require("child_process");
const fs = require("fs");
const path = require("path");

const pageName = process.argv[2];

if (!pageName) {
  console.error("❌ Devi specificare il nome della pagina: es. node create-page.js scelta-carriera");
  process.exit(1);
}

const baseDir = path.join(process.cwd(), "custom-pages");
const targetDir = path.join(baseDir, pageName);

if (!fs.existsSync(baseDir)) {
  fs.mkdirSync(baseDir);
}

if (fs.existsSync(targetDir)) {
  console.error("❌ La pagina esiste già:", targetDir);
  process.exit(1);
}

console.log("📁 Creo la cartella:", targetDir);
execSync(`npm create vite@latest ${pageName} -- --template react`, { stdio: "inherit", cwd: baseDir });

console.log("📦 Installo Fluent UI e plugin CSS...");
execSync(`npm install @fluentui/react vite-plugin-css-injected-by-js`, { stdio: "inherit", cwd: targetDir });

console.log("🛠️ Sovrascrivo vite.config.js...");
const viteConfig = `
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

export default defineConfig({
  plugins: [
    react(),
    cssInjectedByJsPlugin()
  ],
  build: {
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        manualChunks: undefined,
        inlineDynamicImports: true,
        entryFileNames: 'bundle.js',
        assetFileNames: '[name].[ext]'
      }
    }
  }
});
`;

fs.writeFileSync(path.join(targetDir, "vite.config.js"), viteConfig);

console.log("✨ Pagina creata con successo!");
console.log(`➡️ Vai in: custom-pages/${pageName}`);
console.log("➡️ Avvia dev server: npm run dev");
console.log("➡️ Build finale: npm run build");

---

🧪 2. Come usarlo

1️⃣ Rendi eseguibile lo script (solo macOS/Linux)

chmod +x create-page.js

2️⃣ Crea una nuova pagina

node create-page.js scelta-carriera

3️⃣ Avvia la pagina

cd custom-pages/scelta-carriera
npm run dev

4️⃣ Build finale (bundle unico)

npm run build

Output:

dist/
  index.html
  bundle.js   ← unico file JS

---

🧱 3. Cosa fa automaticamente

Funzione	Dettaglio
Crea cartella pagina	custom-pages/<nome>
Inizializza Vite React	npm create vite@latest
Installa Fluent UI	@fluentui/react
Installa plugin CSS → JS	vite-plugin-css-injected-by-js
Configura bundle unico	manualChunks: undefined, inlineDynamicImports: true
Imposta nome bundle	bundle.js

---

🎁 Vuoi un livello in più?

Posso aggiungere:

• ✔ uno script che crea automaticamente componenti base (App.jsx già con Fluent UI)
• ✔ un template condiviso per tutte le pagine
• ✔ uno script che builda tutte le pagine in una volta
• ✔ supporto TypeScript

Vuoi che lo script generi anche un App.jsx preconfigurato con Fluent UI?