Aggiungi Firebase al progetto JavaScript

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

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 l'app con quel progetto. Quando registri la tua app con Firebase, ottieni un oggetto di configurazione Firebase che utilizzerai per collegare l'app alle risorse del progetto Firebase.

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

Se non hai ancora un progetto JavaScript e vuoi solo provare un prodotto Firebase, puoi scaricare uno dei nostri esempi della guida rapida.

Passaggio 2: installa l'SDK e inizializza Firebase

Questa pagina descrive le istruzioni di configurazione dell'API modulare dell'SDK Firebase JS, che utilizza il formato Modulo JavaScript.

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

  1. Installa Firebase utilizzando npm:

    npm install firebase

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

    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 container che archivia le configurazioni comuni e condivide l'autenticazione tra i servizi Firebase. Dopo aver inizializzato un oggetto App Firebase nel tuo codice, puoi aggiungere e iniziare a utilizzare i servizi Firebase.

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

Passaggio 3: accedi a Firebase nell'app

I servizi Firebase (come Cloud Firestore, Authentication, Realtime Database, Remote Config e altri) possono essere importati all'interno di singoli sottopacchetti.

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 bundler di moduli (webpack/Rollup) per ridurre le dimensioni

L'SDK Firebase Web è progettato per funzionare con i bundle di moduli al fine di rimuovere il codice non utilizzato (scuotimento ad albero). Consigliamo vivamente di utilizzare questo approccio per le app di produzione. Strumenti come l'interfaccia a riga di comando Angular, Next.js, l'interfaccia a riga di comando Vue o Create React App gestiscono automaticamente il raggruppamento dei moduli per le librerie installate tramite npm e importate nel codebase.

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

Servizi Firebase disponibili per il web

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

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

Passaggi successivi

Scopri di più su Firebase: