Inizia a utilizzare App Hosting

Se hai già un'app Next.js o Angular (versioni Next.js 13.5.x+ o Angular 18.2.x+) in un repository GitHub, iniziare a utilizzare App Hosting può essere semplice come creare un backend di App Hosting e poi avviare un'implementazione con un push al branch live. Se non hai un'app, utilizza una delle nostre app di esempio per seguire i passaggi descritti in questa guida.

Per l'assistenza AI, copia il prompt riportato di seguito nell' agente di programmazione AI (ad esempio Antigravity, Claude Code, Codex e Cursor). Puoi personalizzare il prompt e interagire con l'agente. Per informazioni dettagliate sull'installazione, visita la pagina relativa alle competenze degli agenti Firebase. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

Questa guida descrive come configurare App Hosting nella console Firebase per eseguire automaticamente il deployment ogni volta che viene eseguito un nuovo commit in un repository GitHub. Al termine di questo flusso, avrai un'app di esempio Next.js o Angular live di cui viene eseguito il deployment ogni volta che esegui il commit di una nuova modifica al branch main del repository GitHub.

Sebbene questa guida si concentri sul flusso consigliato della console Firebase, esistono altri modi per eseguire il deployment, incluso l'utilizzo dell'interfaccia a riga di comando Firebase per eseguire il deployment del codice locale senza una connessione GitHub.

Passaggio 1: crea una copia del repository demo

Vai alla pagina https://github.com/firebase/apphosting-adapters e seleziona Fork.

Passaggio 2: crea un backend App Hosting

  1. Nella console Firebase, vai a Hosting e serverless > App Hosting.

  2. Fai clic su Inizia.

  3. Se ti viene richiesto, esegui l'upgrade al piano tariffario Blaze con pagamento a consumo per utilizzare App Hosting.

Uno screenshot della configurazione del backend di App Hosting.

Segui le istruzioni per completare questi passaggi:

  • Scegli una regione principale (di solito la regione più vicina ai tuoi utenti).
  • Connettiti a GitHub. Scegli il repository che hai appena creato eseguendo il fork del repository firebase-framework-tools.
  • Imposta la directory principale dell'app su una delle seguenti:
  • Imposta il branch live come main.
  • Abilita le implementazioni automatiche (sono abilitate per impostazione predefinita).
  • Assegna un nome al backend.
  • Seleziona l'ambiente di runtime. Per impostazione predefinita, la versione di Node.js più recente consigliata è preselezionata.
  • Crea una nuova app web Firebase.

Seleziona Fine ed esegui il deployment.

Passaggio 3: visualizza l'app di cui è stato eseguito il deployment

Quando crei un backend, Firebase ti fornisce un sottodominio senza costi in cui gli utenti finali possono visitare la tua app web. Il formato è backend-id--project-id.us-central1.hosted.app.

Nella riga Informazioni sul backend della dashboard del backend, seleziona il link al backend live per visualizzare il nuovo sito web:

Uno screenshot della riga di informazioni di backend con il link all'app live in evidenza.

Passaggio 4: attiva un'implementazione eseguendo il push di una modifica

Una volta creato il backend e ottenuto un URL pubblicato, puoi attivare il rilascio di una nuova versione dell'app web ogni volta che esegui il push delle modifiche nel branch live del repository GitHub. Per eseguire un test della App Hosting configurazione:

  1. Nella copia del repository GitHub demo, vai all'origine della home page dell'app demo, apporta le modifiche riconoscibili che preferisci, quindi esegui il push della modifica al branch principale. Per trovare la home page:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. Nella Firebase console, monitora App Hosting mentre la nuova modifica viene implementata in produzione. Al termine dell'implementazione, puoi visualizzare la modifica nella home page dell'app.

Passaggi successivi