148 lines
3.7 KiB
Markdown
148 lines
3.7 KiB
Markdown
**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**? |