elixforms-web-pages/react/development.md

# Development

Perfetto — ti accompagno passo‑passo nella creazione di un ambiente **pulito, modulare e scalabile** per sviluppare pagine ReactJS (con Fluent UI) dentro VS Code, seguendo esattamente la struttura che desideri.

## 🎯 **Obiettivo sintetico**

Vuoi una cartella `custom-pages/` che contenga varie sottocartelle, ognuna con una pagina React completamente autonoma, compilabile in un bundle da pubblicare su un server remoto.

La soluzione migliore è usare **Vite** (più moderno e leggero di Create React App) e configurare ogni pagina come **micro‑progetto indipendente**.

## 🧱 1. Struttura iniziale della cartella

Crea la cartella principale:

```text
custom-pages/
```

All’interno, ogni pagina sarà una sottocartella:

```text
custom-pages/
  scelta-carriera/
  pagina-2/
  pagina-3/
```

Ogni sottocartella sarà un progetto React completo.

## 🛠️ 2. Creazione di una nuova pagina React con Vite + Fluent UI

### 📌 Passo 1 — entra nella cartella principale

Apri VS Code nella cartella:

```pwsh
cd custom-pages
code .
```

### 📌 Passo 2 — crea una nuova pagina (es. “scelta-carriera”)

```pwsh
npm create vite@latest scelta-carriera -- --template react
```

Questo genera un progetto React minimale.

### 📌 Passo 3 — installa Fluent UI

Dentro la cartella della pagina:

```pwsh
cd scelta-carriera
npm install @fluentui/react
```

## 📁 3. Struttura interna di ogni pagina

Dopo l’inizializzazione, avrai qualcosa del genere:

```text
scelta-carriera/
  index.html
  package.json
  vite.config.js
  src/
    main.jsx
    App.jsx
    App.css
```

Puoi aggiungere componenti, assets, logiche interne… tutto rimane confinato nella pagina.

## 🎨 4. Esempio di integrazione Fluent UI

Modifica `App.jsx`:

```jsx
import { PrimaryButton, Text } from '@fluentui/react';

function App() {
  return (
    <div style={{ padding: 20 }}>
      <Text variant="xLarge">Scelta carriera</Text>
      <PrimaryButton text="Continua" style={{ marginTop: 20 }} />
    </div>
  );
}

export default App;
```

## 🏗️ 5. Compilazione in un unico file (bundle)

Vite produce già un output ottimizzato e pronto per il deploy.

Esegui:

```pwsh
npm run build
```

Troverai l’output in:

```text
scelta-carriera/dist/
```

Tipicamente contiene:

```text
dist/
  index.html
  assets/
    index-xxxxx.js
    index-xxxxx.css
```

👉 **Questo è ciò che puoi caricare sul server remoto.**

Se vuoi forzare un *singolo file JS*, si può configurare Rollup (incluso in Vite). Dimmi se ti interessa e te lo preparo.

## 🔁 6. Creare una nuova pagina? Ripeti il pattern

Per una nuova pagina:

```pwsh
cd custom-pages
npm create vite@latest nome-pagina -- --template react
cd nome-pagina
npm install @fluentui/react
```

Ogni pagina è completamente isolata, con le sue dipendenze e il suo build.

## 🚀 7. Possibili miglioramenti (se ti interessano)

Posso guidarti anche in:

- creare uno **script automatizzato** per generare nuove pagine con un solo comando  
- configurare **alias comuni** per condividere componenti tra pagine  
- creare un **template base** per tutte le pagine  
- configurare un **output single-file** (JS + CSS inline)  
- integrare **TypeScript**  
- aggiungere **routing interno** (se mai servisse)

## 🔍 Domanda per te

Vuoi che ogni pagina produca **un singolo file JS** (bundle unico) oppure ti va bene la struttura standard `index.html + assets/`?

**Vuoi un singolo file JS per ogni pagina React. La configurazione più affidabile oggi è: disabilitare gli *chunks* di Rollup e iniettare il CSS direttamente nel JS.**  
Questa combinazione è confermata da fonti aggiornate su Vite e da soluzioni consolidate della community.   [Stack Overflow](https://stackoverflow.com/questions/67781170/bundle-js-and-css-into-single-file-with-vite)

## ✅ Configurazione Vite per ottenere **un unico file JS** (con dentro anche il CSS)

Per ogni pagina (es. `scelta-carriera/`), modifica il file `vite.config.js` così:

```js
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()   // forza l’iniezione del CSS nel JS
  ],
  build: {
    cssCodeSplit: false,      // evita file CSS separati
    rollupOptions: {
      output: {
        manualChunks: undefined,   // disabilita la creazione di chunk multipli
        inlineDynamicImports: true, // forza tutto in un singolo bundle
        entryFileNames: 'bundle.js', // nome del file finale
        assetFileNames: '[name].[ext]' // evita hash nei nomi
      }
    }
  }
});
```

### 🔍 Perché funziona

- **`manualChunks: undefined`** → Rollup non divide più il codice in vendor.js, index.js, ecc.  
  (Soluzione confermata da discussioni tecniche su Vite)   [Stack Overflow](https://stackoverflow.com/questions/67781170/bundle-js-and-css-into-single-file-with-vite)
- **`inlineDynamicImports: true`** → anche gli import dinamici vengono inglobati in un unico file.  
  (Soluzione usata anche in configurazioni ufficiali per single‑bundle)   [Github](https://github.com/vitejs/vite/discussions/2739)
- **`vite-plugin-css-injected-by-js`** → il CSS viene incorporato nel JS, evitando file `.css` separati.  
  (Consigliato esplicitamente per ottenere un singolo file JS)   [Stack Overflow](https://stackoverflow.com/questions/67781170/bundle-js-and-css-into-single-file-with-vite)

## 📦 Risultato finale della build

Dopo:

```pwsh
npm run build
```

otterrai:

```text
dist/
  index.html
  bundle.js   ← unico file da pubblicare
```

Il file `bundle.js` contiene **React + Fluent UI + il tuo codice + il CSS**.

## 📁 Struttura consigliata del tuo workspace

```text
custom-pages/
  scelta-carriera/
    vite.config.js
    package.json
    src/
      App.jsx
      main.jsx
  pagina-2/
  pagina-3/
```

Ogni pagina è un micro‑progetto indipendente, con build autonoma e output singolo.

## 🚀 Vuoi che ti generi automaticamente un template completo?

Posso prepararti:

- uno **script Node** che crea automaticamente una nuova pagina con questa configurazione  
- un **template base React + Fluent UI + single‑bundle**  
- una **struttura condivisa** per componenti comuni tra pagine

Vuoi automatizzare la creazione delle nuove pagine?