move react projects to own folder

2026-06-11 14:49:21 +02:00
parent 81ecc4d3f5
commit d8699ee4b5
35 changed files with 2 additions and 2 deletions
@@ -0,0 +1,148 @@
+**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**?