**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**
```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**?