Aggiungi Firebase al progetto JavaScript

Segui questa guida per utilizzare l'Firebase JavaScript SDK nella tua app web o come client per l'accesso degli utenti finali, ad esempio in un'applicazione desktop o IoT 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 l'app con questo progetto. Quando registri la tua app con Firebase, riceverai un oggetto di configurazione Firebase che utilizzerai per connettere l'app alle risorse del progetto Firebase.

Visita la pagina Informazioni sui progetti Firebase per scoprire di più sui progetti Firebase e sulle best practice per l'aggiunta di app ai progetti.

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' Firebase JavaScript SDK, che utilizza un modulo JavaScript formato.

Questo flusso di lavoro utilizza npm e richiede strumenti di framework JavaScript o di creazione di pacchetti di moduli perché l'API modulare è ottimizzata per funzionare con i pacchetti 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 configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    Un'app Firebase è un oggetto simile a un container che archivia la configurazione comune e condivide l'autenticazione tra i servizi Firebase. Dopo aver inizializzato un oggetto Firebase App nel 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 persista durante il rendering lato server e il rendering lato client. Nella logica del server, implementa l' FirebaseServerAppinterfaccia per ottimizzare la gestione delle sessioni dell'app con i service worker.

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 pacchetti secondari.

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

L'Firebase JavaScript SDK è progettato per funzionare con i pacchetti di moduli per rimuovere il 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 la creazione di pacchetti di moduli per le librerie installate tramite npm e importate nel codebase.

Per ulteriori informazioni, consulta la nostra guida Utilizzo di 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 seguenti comandi mostrano come importare le librerie Firebase installate localmente con npm. Per le opzioni di importazione alternative, consulta la documentazione delle librerie disponibili.

1 Firebase AI Logic era precedentemente denominato "Vertex AI in Firebase" con il pacchetto firebase/vertexai.

2 Firebase SQL Connect era precedentemente denominato "Firebase Data Connect".

Passaggi successivi

Scopri di più su Firebase: