Guida: Da Artefatto TSX ad App su Netlify (con Claude Desktop + MCP)

Mentre tutto il web parlava della nuova funzionalità artifacti di Claude 4, per il nostro utilizzo in Brix-IA, gli artifact sono risultati piuttosto limitati. E' bello ottenere un widget con un dashboard o piccole app direttamente in Claude 4, che si può condividere con i colleghi, ma il problema sta proprio nel condividere. Se per ipotesi, uno volesse fare una mini app funzionante e che richiede dati esterni (lo stesso dashboard basato su un file di qualche migliaio di righe), il giochino sembra non funzionare:

Nel nostro caso, una semplice app per verificare se un'azienda fa parte delle aziende energivore, non si riusciva a caricare l'elenco delle aziende all'interno dell'artifact ( la soluzione di scrivere l'elenco direttamente nel .tsx può funzionare con poche righe, ma non con 4500).
Dopo un po' di ricerca e interrogatori allo stesso Claude, scopriamo che non c'è nessun modo di condividere dati esterni con l'artifact. Pertanto, se si vuole pubblicare la mini app creata in 10 minuti con claude ci sono 2 strade:

caricare il file .tsx (artifact) su Replit e rifare la app lì con il deploy hostato (soluzione comoda ma che richiede altri 30 USD mensili per Replit)
trasformare il .tsx in una app "completa" e pubblicare su Netlify (soluzione gratuita)

In questa piccola guida pratica, ti condivido passo per passo quello che bisogna fare per la seconda soluzione (quella gratuita). Una volta impostato il workflow, è un processo semiautomatico che ruba ulteriori 10 minuti. Nell'esempio vi mostrerò negli screenshot anche alcuni passaggi chiave che ho seguito per arrivare al risultato finale: https://artifact-energivori.netlify.app/

Prerquisiti: prima di iniziare, assicurati di avere:

✅ Account GitHub (o GitLab/Bitbucket)

Vai su github.com e registrati
Verifica email e configura profilo

✅ Account Netlify collegato a Git

Registrati su netlify.com
IMPORTANTE: Fai login con il tuo account GitHub
Autorizza Netlify ad accedere ai tuoi repository

✅ Claude Desktop con MCP

Claude Desktop installato
MCP filesystem configurato

✅ Node.js installato

Scarica da nodejs.org (versione LTS)
Verifica con node --version nel terminale

Workflow Ottimizzato

1. Setup Locale

# Crea cartella progetto
mkdir C:/DEV/artifact_nome
cd C:/DEV/artifact_nome

2. Salva l'Artefatto

Scarica il file artifact.tsx da Claude web
Salvalo nella cartella del progetto

3. Apri in Claude Desktop

Usa MCP filesystem per aprire la cartella
Comando: "Apri la cartella C:/DEV/artifact_nome"

4. Prompt Magico per Claude

Trasforma l'artifact.tsx in una app React funzionante e prepara per il deploy su Git/Netlify.

Crea:
- Struttura progetto Vite + React + TypeScript
- package.json con scripts ottimizzati
- Configurazione build per Netlify
- File _redirects per SPA
- .gitignore appropriato
- README.md con istruzioni

5. Test Locale

npm install
npm run dev

testiamo e risolviamo gli errori in locale finche l'app non parte senza problemi.

6. Debug e Preparazione Git

Se ci sono errori, chiedi a Claude:

Analizza gli errori in console e risolvi:
- Dipendenze mancanti
- Import non corretti  
- Problemi TypeScript
- Configurazione build

Poi prepara per Git con commit iniziale.

7. Push su Git tramite Claude

Crea repository Git e fai push:
1. git init
2. git add .
3. git commit -m "Initial commit: artifact to app"
4. Crea repo su GitHub
5. git remote add origin [URL]
6. git push -u origin main

Prima di fare push su GIT creiamo il nuovo repository (senza MCP Git questa è l'unica operazione che Claude 4 non riesce a fare da solo)

8. Deploy Netlify (automatico!)

Vai su netlify.com → Dashboard
"New site from Git" → seleziona GitHub
Scegli il repository appena creato
Build command: npm run build
Publish directory: dist
Deploy! → URL live in 2-3 minuti

9. Condivisione

Copia URL Netlify (es. https://app-name.netlify.app)
Condividi il link!
Bonus: Ad ogni push su Git → deploy automatico

Setup Iniziale Git (una tantum)

Se è la prima volta che usi Git su questo computer:

git config --global user.name "Il Tuo Nome"
git config --global user.email "tua-email@esempio.com"

Prompt Utili per Claude Desktop

Setup Iniziale

"Trasforma artifact.tsx in app React + setup Vite + prepara per Netlify"

Debug

"Analizza errori console e risolvi dipendenze mancanti"

Git Operations

"Prepara repository Git, commit iniziale e push su GitHub"

Ottimizzazioni

"Ottimizza app per produzione: build size, performance, SEO"

Checklist Rapida

Cartella creata in locale
artifact.tsx salvato
Claude Desktop connesso via MCP
Prompt "trasforma in app" eseguito
npm run dev funziona
Push su Git completato
Netlify collegato e deployed
URL condiviso

Tempo totale: ~10 minuti con questo workflow ottimizzato!