CursosEmpresasBlogLiveConfPrecios

Configuración de Firebase en Proyecto Web con JavaScript

Clase 5 de 32 • Curso de Firebase 5 para Web

Clase anteriorSiguiente clase
Resumen

Configura Firebase en un blog con JavaScript puro y sin frameworks, aprovechando la documentación oficial y los scripts por servicio. Aquí verás la estructura del proyecto, el orden de carga en HTML y la configuración sensible que no debes subir al repositorio. Todo directo y listo para empezar a usar los servicios de Firebase.

¿Cómo se organiza el proyecto web sin frameworks?

El proyecto es 100 % web: HTML y JavaScript, sin React, Angular u otros. La estructura incluye directorios para estilos, fuentes, íconos, imágenes y un directorio de JavaScript con módulos donde se añade el código para los servicios. También hay un archivo index.html como entrada principal.

  • Sin frameworks: enfoque en JavaScript puro para entender los servicios.
  • Directorio de JavaScript: módulos por servicio para mantener orden.
  • index.html: página principal que carga los scripts en orden.
  • HTML carga de arriba hacia abajo: el orden importa.

¿Qué hace Gulp en el entorno local?

Se usa Gulp como build system para mejorar el flujo de trabajo.

  • Servidor local para probar cambios.
  • Actualización en caliente al guardar archivos.
  • Evita refrescar manualmente el navegador.

¿Por qué usar JavaScript puro y no frameworks?

Los servicios de Firebase son transparentes respecto al frontend.

  • La integración funciona igual sin importar el framework.
  • Aprendes la base directamente con JavaScript.

¿Cómo integrar Firebase desde la consola y la documentación?

Desde la consola de administración de Firebase, en la pestaña General, selecciona “Añade Firebase a tu aplicación web”. Ahí obtienes los scripts para integrar el proyecto. Antes de copiarlos, revisa “Iniciar nuestro proyecto de Firebase con JavaScript” en la documentación: es clara, actualizada y explica qué scripts usar.

  • Documentación oficial: guía paso a paso y cambios frecuentes.
  • Scripts por servicio: hoy cargas solo lo que necesitas.
  • Menos peso que el antiguo único script general.

¿Qué scripts de Firebase necesitas según los servicios?

Firebase separa los scripts por servicio para optimizar la carga.

  • Carga el script base de Firebase App.
  • Carga el script del servicio que usarás: autenticación, base de datos, storage, etc.
  • Evita incluir librerías innecesarias.

¿Cómo configurar e inicializar Firebase en el código?

Primero crea un archivo de configuración con las credenciales del proyecto. Es un objeto JavaScript con atributos que Firebase usa internamente para permitir que tu app use el proyecto correcto. Luego, en tu JavaScript principal, inicializa Firebase. Asegúrate de cargar la configuración antes que cualquier otro script que dependa de ella.

¿Qué contiene el objeto de configuración?

Incluye datos sensibles que identifican el proyecto:

  • apiKey: clave para usar los servicios.
  • databaseURL: URL de la base de datos.
  • projectId: identificador del proyecto.
  • storageBucket: URL del storage.
  • messagingSenderId: identificador para notificaciones. 
// js/config.js
const firebaseConfig = {
  apiKey: "TU_API_KEY",
  databaseURL: "TU_DATABASE_URL",
  projectId: "TU_PROJECT_ID",
  storageBucket: "TU_STORAGE_BUCKET",
  messagingSenderId: "TU_MESSAGING_SENDER_ID"
};

¿Cómo proteger la configuración en el repositorio?

La configuración es delicada y debe tratarse como privada.

  • Evita subirla a GitHub u otros repositorios públicos.
  • En equipos internos, compártela con cuidado.

¿En qué orden cargar los scripts en index.html?

Carga primero el archivo de configuración, luego Firebase y, al final, tu código que usa los servicios. Recuerda: HTML carga de arriba hacia abajo.

<!-- index.html -->
<!-- 1. Configuración del proyecto -->
<script src="js/config.js"></script>

<!-- 2. Firebase App y los servicios que usarás -->
<!-- <script src="https://www.gstatic.com/firebasejs/X.Y.Z/firebase-app.js"></script> -->
<!-- <script src="https://www.gstatic.com/firebasejs/X.Y.Z/firebase-auth.js"></script> -->
<!-- Agrega aquí los scripts por servicio que necesites -->

<!-- 3. Tu JavaScript general -->
<script src="js/general.js"></script>

Finalmente, inicializa Firebase tomando los datos de configuración. Esto deja listos los servicios para su uso.

// js/general.js
firebase.initializeApp(firebaseConfig);

¿Quieres que avancemos con autenticación y veamos cómo iniciar sesión y proteger contenido? Cuéntame qué servicio te gustaría integrar primero y en qué parte de tu blog lo necesitas.

      Configuración de Firebase en Proyecto Web con JavaScript