Aggiungi Firebase al progetto JavaScript

Segui questa guida per utilizzare l'SDK Firebase JavaScript nella tua app web o come client per l'accesso degli utenti finali, ad esempio in un'applicazione IoT o desktop Node.js.

Passaggio 1: crea un progetto Firebase e registra la tua app

Prima di poter aggiungere Firebase alla tua app JavaScript, devi creare un progetto Firebase e registrare la tua app in quel progetto. Quando registri la tua app con Firebase, ricevi un oggetto di configurazione Firebase che utilizzerai per collegare l'app alle risorse del tuo progetto Firebase.

Consulta Informazioni sui progetti Firebase per saperne di più sui progetti Firebase e sulle best practice per aggiungere app ai progetti.

  1. Nella console Firebase, fai clic su Aggiungi progetto.

    • Per aggiungere risorse Firebase a un progetto Google Cloud esistente, inserisci il nome del progetto o selezionalo dal menu a discesa.

    • Per creare un nuovo progetto, inserisci il nome desiderato. Se vuoi, puoi anche modificare l'ID progetto visualizzato sotto il nome del progetto.

  2. Se richiesto, leggi e accetta i Termini di Firebase.

  3. Fai clic su Continua.

  4. (Facoltativo) Configura Google Analytics per il tuo progetto, in modo da poter usufruire di un'esperienza ottimale con uno dei seguenti prodotti Firebase:

    Seleziona un account Google Analytics esistente o creane uno nuovo.

    Se crei un nuovo account, seleziona la località dei report Analytics, quindi accetta le impostazioni di condivisione dei dati e i termini di Google Analytics per il tuo progetto.

  5. Fai clic su Crea progetto (o Aggiungi Firebase, se utilizzi un progetto Google Cloud esistente).

Firebase esegue automaticamente il provisioning delle risorse per il tuo progetto Firebase. Al termine della procedura, nella console Firebase verrà visualizzata la pagina Panoramica del progetto Firebase.

Dopo aver creato un progetto Firebase, puoi registrare la tua app web al progetto.

  1. Al centro della pagina di riepilogo del progetto della Console Firebase, fai clic sull'icona Web () per avviare il flusso di lavoro di configurazione.

    Se hai già aggiunto un'app al tuo progetto Firebase, fai clic su Aggiungi app per visualizzare le opzioni della piattaforma.

  2. Inserisci il nickname dell'app.
    Questo nickname è un identificatore interno di praticità ed è visibile solo a te nella Console Firebase.

  3. Fai clic su Registra app.

  4. Segui le istruzioni sullo schermo per aggiungere e inizializzare l'SDK Firebase nella tua app.

    Puoi anche trovare istruzioni più dettagliate per aggiungere, inizializzare e utilizzare l'SDK Firebase nei passaggi successivi di questa pagina introduttiva.

Se non hai ancora un progetto JavaScript e vuoi solo provare un prodotto Firebase, puoi scaricare uno dei nostri esempi di avvio rapido.

Passaggio 2: installa l'SDK e inizializza Firebase

Questa pagina descrive le istruzioni di configurazione per l'API modulare dell'SDK Firebase JS, che utilizza un formato modulo JavaScript.

Questo flusso di lavoro utilizza npm e richiede strumenti di bundler di moduli o framework JavaScript perché l'API modulare è ottimizzata per funzionare con bundler di moduli per eliminare il codice inutilizzato (tree-shaking) e ridurre le dimensioni dell'SDK.

  1. Installa Firebase utilizzando npm:

    npm install firebase
  2. Inizializza Firebase nella tua app e crea un oggetto Firebase App:

    import { initializeApp } from 'firebase/app';
    
    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);

    Un'app Firebase è un oggetto simile a un contenitore che memorizza la configurazione comune e condivide l'autenticazione tra i servizi Firebase. Dopo aver inizializzato un oggetto App Firebase nel codice, puoi aggiungere e iniziare a utilizzare i servizi Firebase.

    Se la tua app include funzionalità dinamiche basate sul rendering lato server (SSR), devi eseguire alcuni passaggi aggiuntivi per assicurarti che la configurazione permanetra le passate di rendering lato server e lato client. Nella logica del server, implementa l'interfaccia FirebaseServerApp per ottimizzare la gestione delle sessioni con i service worker della tua app.

Passaggio 3: accedi a Firebase nella tua app

I servizi Firebase (come Cloud Firestore, Authentication, Realtime Database, Remote Config e altri) sono disponibili per l'importazione all'interno di singoli subpacchetti.

L'esempio seguente mostra come utilizzare l'SDK Cloud Firestore Lite per recuperare un elenco di dati.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

Passaggio 4: utilizza un aggregatore di moduli (webpack/Rollup) per ridurre le dimensioni

L'SDK web di Firebase è progettato per funzionare con i bundler dei moduli per rimuovere qualsiasi codice inutilizzato (tree-shaking). Ti consigliamo vivamente di utilizzare questo approccio per le app di produzione. Strumenti come Angular CLI, Next.js, Vue CLI o Create React App gestiscono automaticamente il bundling dei moduli per le librerie installate tramite npm e importate nel tuo codice di base.

Per ulteriori informazioni, consulta la nostra guida Utilizzare i bundler di moduli con Firebase.

Servizi Firebase disponibili per il web

Ora che hai configurato Firebase, puoi iniziare ad aggiungere e utilizzare uno dei seguenti servizi Firebase disponibili nella tua app web.

I comandi riportati di seguito mostrano come importare le librerie Firebase installate localmente con npm. Per opzioni di importazione alternative, consulta la documentazione delle librerie disponibili.

Passaggi successivi

Scopri di più su Firebase: