Pubblicare la Sua app creata con Lovable, Bolt o un altro builder IA sul Suo hosting WebOké

Ha creato un'app con Lovable, Bolt o un altro builder IA e desidera pubblicarla sul Suo dominio presso WebOké? È possibile. In questo articolo scoprirà come estrarre il codice dal builder IA, come compilare e caricare l'app e come GitHub può farlo automaticamente per Lei.

1. Che tipo di app ha?

Apra il file package.json nel Suo progetto. Da questo file capisce di che tipo di app si tratta.

• Un'app statica (React con Vite). In package.json compare vite e nessun framework server. Con npm run build crea una cartella dist con normali file HTML, JavaScript e CSS, che va caricata in public_html. Questo funziona con qualsiasi pacchetto di hosting. Molte app di Bolt e le app più vecchie di Lovable sono costruite in questo modo.
• Un'app con un proprio server. Dal 13 maggio 2026 Lovable crea app con TanStack Start: in tal caso in package.json compare @tanstack/react-start. Un'app di questo tipo esegue codice lato server e quindi non funziona come semplici file in public_html. Va configurata come app Node.js (vedere il punto 6). Lo stesso vale per altre app con un proprio server, come un backend Express.
• Un'app con Supabase o Lovable Cloud come backend. Il database, l'accesso e le funzioni restano in tal caso presso Supabase o Lovable. Su WebOké pubblica soltanto la parte visibile (il front-end). Durante la compilazione deve però indicare l'indirizzo e la chiave pubblica di Supabase (vedere il punto 5).

2. Estrarre il codice dal builder IA tramite GitHub

Lovable e Bolt possono salvare il Suo progetto in un repository GitHub personale. Le modifiche vengono quindi sincronizzate in entrambe le direzioni: ciò che modifica nel builder IA arriva su GitHub e ciò che modifica su GitHub torna nel builder IA.

In Lovable:

1. Apra il Suo progetto e vada su Project settings > Git > GitHub.
2. Faccia clic su Add connection e conceda all'app Lovable l'accesso al Suo account GitHub.
3. Alla voce Accounts faccia clic su Connect. Lovable crea un repository privato e lo mantiene aggiornato.

È possibile anche senza GitHub: con Download codebase in Project settings > Git può scaricare il codice (con un abbonamento Lovable a pagamento).

In Bolt:

1. Apra il Suo progetto e faccia clic sull'icona di GitHub in alto a destra.
2. Acceda a GitHub, faccia clic su Authorize e installi l'app GitHub di Bolt.
3. Inserisca un nome per il repository e faccia clic su Create repository. Da quel momento Bolt lavora nel branch main.

3. Compilare e caricare un'app statica

L'app va compilata sul Suo computer. A tale scopo serve Node.js, versione 22 (la versione attuale di Vite richiede almeno la 20.19 o la 22.12).

1. Recuperi il codice: esegua git clone del Suo repository oppure estragga il file scaricato.
2. Apra un terminale nella cartella del progetto e installi i pacchetti con npm ci (oppure npm install se non è presente un file package-lock.json).
3. Compili l'app con npm run build. Ora è presente una cartella dist con un file index.html e una cartella assets.
4. Carichi il contenuto di dist in domains/ilsuodominio.it/public_html, con un programma FTP o con il File Manager di DirectAdmin. Non carichi quindi la cartella dist stessa, né il codice sorgente o node_modules.
5. Inserisca il file .htaccess riportato di seguito in public_html.

Un'app con più pagine (un router) mostra nel browser indirizzi come ilsuodominio.it/chi-siamo. Queste pagine non esistono come file sul server. Se aggiorna una pagina di questo tipo o apre direttamente il link, ottiene un errore 404. Con questo file .htaccess il server inoltra tali indirizzi a index.html e l'app mostra la pagina corretta:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^assets/ - [R=404,L]
RewriteRule ^ index.html [L]

I file e le cartelle esistenti vengono mostrati normalmente dal server. Un file mancante in assets restituisce un vero errore 404, così individua più facilmente un problema. Tutto il resto viene inoltrato all'app.

4. Pubblicare l'app in una sottocartella

Desidera pubblicare l'app non su ilsuodominio.it ma su ilsuodominio.it/app? In tal caso l'app deve saperlo già al momento della compilazione. Altrimenti il browser cerca i file in /assets anziché in /app/assets e la schermata resta bianca.

1. In vite.config.js (o vite.config.ts) imposti l'opzione base: '/app/'.
2. Indichi lo stesso percorso al router. Con React Router lo fa con <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Compili di nuovo e carichi il contenuto di dist in public_html/app.
4. In public_html/app/.htaccess inserisca lo stesso file riportato sopra, con RewriteBase /app/.

5. Supabase, Lovable Cloud e altre impostazioni (variabili env)

Le impostazioni che iniziano con VITE_, come VITE_SUPABASE_URL e VITE_SUPABASE_PUBLISHABLE_KEY (nei progetti meno recenti VITE_SUPABASE_ANON_KEY), vengono inserite da Vite nei file JavaScript durante la build. Non è possibile impostarle successivamente sul server.

• Trova i valori nel file .env del Suo progetto. Riporti i nomi esattamente così come sono.
• Se il file .env non è presente nel Suo progetto, lo crei Lei stesso nella cartella del progetto prima di eseguire npm run build. Con GitHub Actions li imposta come secret (vedere il punto 7).
• Se ha modificato un valore, esegua di nuovo la build e carichi nuovamente l'app.

6. Un'app con un proprio server: come app Node.js

Un'app con codice lato server, come un'app TanStack Start creata con Lovable, si configura con Setup Node.js App in DirectAdmin. Come funziona è spiegato in Attivare Node.js in DirectAdmin. Per un'app TanStack Start si procede così:

1. Esegua la build dell'app sul Suo computer con NITRO_PRESET=node-server npm run build. Ora è presente una cartella .output.
2. Crei un'app in Setup Node.js App, con Node.js 22 e una cartella al di fuori di public_html, ad esempio apps/myapp.
3. Carichi la cartella .output in quella cartella.
4. Nella stessa cartella crei un file start.cjs con questa unica riga e inserisca start.cjs in Application startup file:

   import('./.output/server/index.mjs');

5. Imposti le impostazioni di cui il server ha bisogno, come SUPABASE_URL e SUPABASE_PUBLISHABLE_KEY, in Environment variables.
6. Clicchi su Restart. Lo faccia anche dopo ogni nuovo caricamento.

Il piccolo file start.cjs è necessario perché il server in .output è un modulo JavaScript moderno (.mjs), mentre l'ambiente Node.js carica il file di avvio nel modo tradizionale. Se l'app restituisce un errore 503, controlli il file stderr.log nella cartella della Sua app.

7. Deploy automatico con GitHub Actions

Con GitHub Actions, GitHub compila la Sua app a ogni modifica nel branch main e carica il risultato sul Suo pacchetto. Poiché Lovable e Bolt scrivono su GitHub, una modifica fatta nel builder IA sarà online dopo pochi minuti. La funzione Git di DirectAdmin non compila nulla, si limita a copiare i file; per un'app Vite è quindi più pratico GitHub Actions.

Password e chiavi non vanno mai inserite nel repository, ma salvate come secret in GitHub:

1. Apra il Suo repository su GitHub e vada su Settings > Secrets and variables > Actions.
2. Clicchi su New repository secret, inserisca il nome e il valore e clicchi su Add secret. Ripeta l'operazione per ogni secret della variante scelta.
3. Crei nel Suo repository il file .github/workflows/deploy.yml con uno dei due esempi riportati di seguito.
4. Dopo la modifica successiva, controlli nella scheda Actions se l'operazione è riuscita. Con Run workflow può avviare il workflow anche manualmente.

Variante A: tramite FTPS (tutti i pacchetti hosting). Crei in DirectAdmin un account FTP dedicato a GitHub, selezionando in Cartella root l'opzione Dominio (vedere Come funziona l'FTP su WebOké?). Secret: FTP_SERVER (il nome del server del Suo pacchetto, ad esempio linux2023.webawere.nl, non il Suo nome di dominio), FTP_USERNAME (il nome completo, ad esempio github@tuodominio.it), FTP_PASSWORD e i valori VITE_ della Sua app.

name: Build and deploy

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
      - uses: SamKirkland/FTP-Deploy-Action@v4.4.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          protocol: ftps
          port: 21
          local-dir: ./dist/
          server-dir: public_html/

Variante B: tramite SSH con rsync (pacchetti con SSH). L'SSH è incluso in Power Webhost Three e Four, AI Wordpress Three e Power Reseller, sulla porta 1967 e solo con chiave (vedere Accesso SSH e il Terminale in DirectAdmin).

1. Crei sul Suo computer una chiave dedicata a GitHub, senza password: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Inserisca il contenuto di github-deploy.pub in DirectAdmin in Chiavi SSH > INCOLLA CHIAVE.
3. Inserisca il contenuto di github-deploy (la chiave privata) nel secret SSH_PRIVATE_KEY. Successivamente elimini il file dal Suo computer.
4. Esegua ssh-keyscan -p 1967 linux2023.webawere.nl e inserisca l'output nel secret SSH_KNOWN_HOSTS. In questo modo GitHub verifica di connettersi davvero al Suo server.
5. Imposti come secret anche SSH_HOST (il nome del server), SSH_USER (il Suo nome utente DirectAdmin), DOMEIN (ad esempio tuodominio.it) e i valori VITE_.

name: Build and deploy

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
      - name: Deploy
        env:
          SSH_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          SSH_KNOWN_HOSTS: ${{ secrets.SSH_KNOWN_HOSTS }}
          SSH_HOST: ${{ secrets.SSH_HOST }}
          SSH_USER: ${{ secrets.SSH_USER }}
          DOMEIN: ${{ secrets.DOMEIN }}
        run: |
          mkdir -p ~/.ssh
          printf '%s\n' "$SSH_KEY" > ~/.ssh/deploy_key
          chmod 600 ~/.ssh/deploy_key
          printf '%s\n' "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
          rsync -rlptz --delete --exclude=.well-known --exclude=cgi-bin \
            -e "ssh -p 1967 -i ~/.ssh/deploy_key" \
            dist/ "$SSH_USER@$SSH_HOST:domains/$DOMEIN/public_html/"

Se non utilizza Supabase, ometta le righe con VITE_SUPABASE oppure le sostituisca con le variabili VITE_ della Sua app. Se l'accesso non riesce più volte, il server blocca temporaneamente l'indirizzo IP di GitHub. In tal caso controlli i Suoi secret e avvii di nuovo il workflow.

8. Errori frequenti

• La homepage funziona, ma aggiornando la pagina o aprendo un link diretto compare un errore 404. Il file .htaccess del punto 3 manca o si trova nella cartella sbagliata.
• Una schermata bianca. Apra gli strumenti per sviluppatori del Suo browser (F12) e controlli in Console o Network. Vede errori 404 sui file in /assets? Allora il percorso non è corretto: ha caricato la cartella dist stessa invece del suo contenuto, oppure l'app si trova in una sottocartella senza il base corretto (punto 4).
• L'app si carica, ma l'accesso o i dati non funzionano, oppure vede un messaggio come supabaseUrl is required. Le variabili VITE_ non erano presenti durante la build. Le inserisca in .env o come secret ed esegua di nuovo la build.
• La build non riesce con un messaggio sulla versione di Node.js. Utilizzi Node.js 22, sia sul Suo computer sia nel workflow (node-version: 22).
• npm ci non riesce. Non è presente alcun package-lock.json, ad esempio perché il progetto ha solo un bun.lock. Esegua una volta npm install e aggiunga il nuovo package-lock.json al Suo repository.
• Nella build non c'è alcun index.html. Si tratta allora di un'app con un proprio server, come TanStack Start. La configuri come app Node.js (punto 6).

Vedere anche: Connettersi con FileZilla (FTP, FTPS e SFTP) e Chiavi SSH e accesso con SSH.

Spiegazione dettagliata con screenshot: Configurare un'app Node.js nella guida di DirectAdmin.