Introducción a Firebase

¿Qué es Firebase?

Firebase es una plataforma integral de desarrollo de aplicaciones creada por Google que ofrece servicios backend, SDKs y bibliotecas de UI listas para usar para ayudar a los desarrolladores a crear apps de alta calidad más rápido. Elimina la necesidad de administrar servidores y escribir código del lado del servidor para muchas tareas comunes.

Fundada originalmente en 2011 como startup, Firebase fue adquirida por Google en 2014 y desde entonces se ha convertido en una de las plataformas Backend-as-a-Service (BaaS) más populares, impulsando millones de apps en todo el mundo.

Resumen de servicios de Firebase

Firebase ofrece un conjunto de servicios organizados en categorías:

Configurar un proyecto de Firebase

Sigue estos pasos para crear tu primer proyecto de Firebase:

Instalar el SDK de Firebase

Agrega Firebase a tu proyecto JavaScript:

# Using npm
npm install firebase

# Using yarn
yarn add firebase

# Using pnpm
pnpm add firebase

Inicializar Firebase

Crea un archivo de configuración de Firebase en tu proyecto:

// firebase.js or firebase.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

// Your web app's Firebase configuration
// Get this from Firebase Console > Project Settings
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize services
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

export default app;

Usar variables de entorno

Para mejor seguridad y mantenimiento, usa variables de entorno:

// .env.local (for Next.js)
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

// firebase.js - Using environment variables
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID
};

Estructura del proyecto Firebase

Estructura típica de un proyecto web con Firebase:

my-firebase-app/
├── src/
│   ├── lib/
│   │   └── firebase.js      # Firebase initialization
│   ├── components/
│   │   └── Auth/            # Authentication components
│   ├── hooks/
│   │   └── useAuth.js       # Custom Firebase hooks
│   └── pages/
│       └── ...
├── .env.local               # Environment variables
├── firebase.json            # Firebase configuration
├── firestore.rules          # Firestore security rules
├── storage.rules            # Storage security rules
└── package.json

CLI de Firebase

Instala la CLI de Firebase para despliegue y desarrollo local:

# Install Firebase CLI globally
npm install -g firebase-tools

# Login to Firebase
firebase login

# Initialize Firebase in your project
firebase init

# Available options during init:
# - Firestore (database rules)
# - Functions (serverless functions)
# - Hosting (deploy your web app)
# - Storage (storage rules)
# - Emulators (local development)

Suite de emuladores de Firebase

Prueba tu app localmente sin afectar producción:

# Start all emulators
firebase emulators:start

# Start specific emulators
firebase emulators:start --only auth,firestore,storage

# The emulator UI runs at http://localhost:4000

// Connect to emulators in development
import { connectAuthEmulator } from 'firebase/auth';
import { connectFirestoreEmulator } from 'firebase/firestore';
import { connectStorageEmulator } from 'firebase/storage';

if (process.env.NODE_ENV === 'development') {
  connectAuthEmulator(auth, 'http://localhost:9099');
  connectFirestoreEmulator(db, 'localhost', 8080);
  connectStorageEmulator(storage, 'localhost', 9199);
}