Sigue esta guía para utilizar el SDK de Firebase JavaScript en tu app web o como cliente para el acceso de usuario final (por ejemplo, en una aplicación de Node.js para computadoras o IoT).
Paso 1: Crea un proyecto de Firebase y registra tu app
Antes de que puedas agregar Firebase a tu app de JavaScript, tendrás que crear un proyecto de Firebase y registrar tu app en él. Cuando lo hagas, obtendrás un objeto de configuración de Firebase que usarás para conectar la app con los recursos del proyecto de Firebase.
Consulta la Información sobre los proyectos de Firebase a fin de obtener detalles sobre los proyectos de Firebase y las prácticas recomendadas para agregar apps a los proyectos.
Si solo quieres probar un producto de Firebase, pero aún no tienes un proyecto de JavaScript, puedes descargar una de nuestras muestras de inicio rápido.
Paso 2: Instala el SDK e inicializa Firebase
En esta página, se describen las instrucciones de configuración para la versión 9 del SDK de Firebase JS, que usa un formato del módulo de JavaScript.
Este flujo de trabajo usa npm y requiere agrupadores de módulos o herramientas del framework de JavaScript, porque la v9 del SDK está optimizada para funcionar con agrupadores de módulos a fin de eliminar el código que no se usa (eliminación de código no utilizado) y reducir el tamaño del SDK.
Instala Firebase con npm:
npm install firebase
Inicializa Firebase en tu app y crea un objeto de app de Firebase:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);Una app de Firebase es un objeto similar a un contenedor que almacena una configuración común y comparte la autenticación entre los servicios de Firebase. Después de inicializar un objeto de la app de Firebase en tu código, puedes agregar y comenzar a usar los servicios de Firebase.
Paso 3: Accede a Firebase en tu app
Los servicios de Firebase (como Cloud Firestore, Authentication, Realtime Database, Remote Config y muchos más) están disponibles para importarse en subpaquetes individuales.
En el siguiente ejemplo, se muestra cómo usar el SDK de Cloud Firestore Lite para recuperar una lista de datos.
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;
}
Paso 4: Usa un agrupador de módulos (webpack/Rollup) para reducir el tamaño
El SDK web de Firebase está diseñado para funcionar con agrupadores de módulos a fin de quitar cualquier código que no se use (eliminación de código no utilizado). Te recomendamos usar este enfoque para las apps de producción. Las herramientas, como la CLI de Angular, Next.js, la CLI de Vue o Create React App, controlan automáticamente la agrupación de módulos para bibliotecas instaladas mediante npm y que se importan a tu base de código.
Consulta nuestra guía Usa agrupadores de módulos con Firebase para obtener más información.
Servicios de Firebase disponibles para la Web
Ahora que configuraste Firebase, puedes comenzar a agregar y usar cualquiera de estos servicios de Firebase disponibles en tu app web.
En los siguientes comandos, se muestra cómo importar bibliotecas de Firebase instaladas de forma local
con npm. Para ver otras opciones de importación, consulta la
documentación sobre bibliotecas disponibles.
Próximos pasos
Obtén información acerca de Firebase:
Explora las apps de muestra de Firebase.
Obtén experiencia personal con el Codelab sobre aplicaciones web en Firebase.
Explora el código fuente abierto en GitHub.
Revisa los entornos compatibles con el SDK de Firebase JavaScript.
Acelera tu desarrollo con bibliotecas de código abierto adicionales mantenidas por Firebase, como AngularFire, RxFire y FirebaseUI para la Web.
Prepárate para iniciar tu app:
- Configura alertas de presupuesto para tu proyecto en Google Cloud Console.
- Supervisa el panel Uso y facturación en Firebase console para obtener una descripción general del uso de tu proyecto en varios servicios de Firebase.
- Revisa la Lista de tareas para el lanzamiento de Firebase.