Firebase Project Configuration

Overview

PixelTech Colombia uses Firebase as its backend infrastructure, including Firestore, Authentication, Cloud Functions, Hosting, and Storage. This guide walks you through setting up a new Firebase project.

Creating a Firebase Project

Create Project in Firebase Console

Go to the Firebase Console
Click Add project
Enter your project name (e.g., pixeltech-colombia)
Configure Google Analytics (optional but recommended)
Click Create project

In the Firebase Console, click the Web icon (</>)
Register your app with a nickname
Enable Firebase Hosting for this app
Copy the Firebase configuration object - you’ll need this for your frontend

Install Firebase CLI

If you haven’t already, install the Firebase CLI globally:

npm install -g firebase-tools

firebase login
firebase use --add

Select your newly created project and give it an alias (e.g., production).

Enabling Firebase Services

Firestore Database

Enable Firestore

In Firebase Console, go to Firestore Database
Click Create database
Start in Production mode (we’ll deploy custom rules)
Select the location: nam5 (US Central - matches your config)

Deploy Firestore Configuration

Your project includes pre-configured Firestore rules and indexes. Deploy them:

firebase deploy --only firestore:rules
firebase deploy --only firestore:indexes

The security rules define access control for:

Users: Read/write own data, admins can access all
Products: Public read, admin write, authenticated users can update stock
Orders: Create validation, users can read own orders
Categories & Brands: Public read, admin write
Warranties: Users can create, read own warranties
Chats: Admin only access

Authentication

Enable Authentication Providers

Go to Authentication > Sign-in method
Enable the following providers:
- Email/Password: For admin and customer accounts
- Google (optional): For social login
- Anonymous (optional): For guest checkout tracking

Configure Authorized Domains

Add your production domain to the authorized domains list:

Go to Authentication > Settings > Authorized domains
Add your custom domain (e.g., pixeltech.com.co)

Cloud Storage

Enable Cloud Storage

In Firebase Console, go to Storage
Click Get started
Use Production mode (we’ll deploy custom rules)
Select the same location as Firestore

Deploy Storage Rules

Deploy the pre-configured storage security rules:

firebase deploy --only storage

Storage rules allow:

Products, Banners, Categories, Brands: Public read, authenticated write
Warranties: Authenticated users can read/write
Invoices: Authenticated users only
Chats: Public read (for WhatsApp), authenticated write

Configure CORS (Optional)

If you need to access Storage from external domains, configure CORS:Create a cors.json file:

[
  {
    "origin": ["https://your-domain.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Apply it using gsutil:

gsutil cors set cors.json gs://your-project-id.appspot.com

Cloud Functions

Upgrade to Blaze Plan

Cloud Functions require the Blaze (pay-as-you-go) plan:

Go to Firebase Console > Upgrade
Select the Blaze plan
Set up billing alerts (recommended)

The Blaze plan includes a generous free tier. You only pay for usage beyond the free quota.

Configure Service Account

For production deployments, set up a service account:

Go to Google Cloud Console
Select your Firebase project
Navigate to IAM & Admin > Service Accounts
Create a service account with these roles:
- Firebase Admin
- Cloud Functions Developer
Generate and download a JSON key

Set Environment Variables

Set secret environment variables for Cloud Functions:

# MercadoPago
firebase functions:secrets:set MP_ACCESS_TOKEN

# ADDI
firebase functions:secrets:set ADDI_CLIENT_ID
firebase functions:secrets:set ADDI_CLIENT_SECRET

# Sistecrédito
firebase functions:secrets:set SC_API_KEY
firebase functions:secrets:set SC_APP_KEY
firebase functions:secrets:set SC_APP_TOKEN

# Email (SMTP)
firebase functions:secrets:set SMTP_HOST
firebase functions:secrets:set SMTP_PORT
firebase functions:secrets:set SMTP_EMAIL
firebase functions:secrets:set SMTP_PASSWORD

# WhatsApp
firebase functions:secrets:set WHATSAPP_VERIFY_TOKEN
firebase functions:secrets:set WHATSAPP_API_TOKEN
firebase functions:secrets:set WHATSAPP_PHONE_ID

For production, always use firebase functions:secrets:set instead of .env files. Secrets are encrypted and more secure.

Firebase Hosting

Review Hosting Configuration

The firebase.json file includes hosting configuration:

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/sitemap.xml",
        "function": "sitemap"
      },
      {
        "source": "/google-feed.xml",
        "function": "generateProductFeed"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This configuration:

Serves static files from the public/ directory
Routes /sitemap.xml to a Cloud Function
Routes /google-feed.xml to a Cloud Function for Google Merchant
Implements SPA routing (all routes serve index.html)

Configure Custom Domain (Optional)

To use a custom domain:

Go to Hosting > Add custom domain
Enter your domain name
Follow the DNS configuration instructions
Firebase automatically provisions an SSL certificate

Firebase Configuration File

Your firebase.json defines the complete Firebase configuration:

firebase.json

{
  "hosting": {
    "public": "public",
    "rewrites": [...],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Content-Security-Policy",
            "value": "default-src 'self' https: data: blob: 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'; ..."
          }
        ]
      }
    ]
  },
  "functions": {
    "source": "functions"
  },
  "firestore": {
    "database": "(default)",
    "location": "nam5",
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {...}
}

Firestore Indexes

The project includes a firestore.indexes.json file for composite indexes:

firestore.indexes.json

{
  "indexes": [],
  "fieldOverrides": []
}

As your application grows, Firestore will suggest indexes for complex queries. Add them to this file and deploy with:

firebase deploy --only firestore:indexes

Security Best Practices

Admin User Setup

Create your first admin user:

Create a user via Firebase Console > Authentication
Manually add a document in Firestore at /users/{userId} with:

{
  "role": "admin",
  "email": "[email protected]",
  "createdAt": <timestamp>
}

API Key Security

Your Firebase API key is safe to include in frontend code
Security is enforced by Firestore and Storage rules, not the API key
Use Firebase App Check for additional protection against abuse

Function Secrets

Never commit secrets to version control
Use firebase functions:secrets:set for production secrets
Use .env files only for local development
Rotate secrets regularly, especially payment gateway credentials

Monitoring and Analytics

Enable Cloud Monitoring

Go to Google Cloud Console
Enable Cloud Monitoring API
Create alerts for:
- Function execution errors
- High latency
- Budget thresholds

Firebase Analytics

If you enabled Google Analytics during project creation:

View user engagement in Firebase Console > Analytics
Track e-commerce events (product views, purchases, etc.)
Monitor conversion funnels

Next Steps

Environment Setup

Set up your local development environment

Deployment

Deploy your application to production

Setup

Backend

Frontend

Overview

Creating a Firebase Project

Enabling Firebase Services

Firestore Database

Authentication

Cloud Storage

Cloud Functions

Firebase Hosting

Firebase Configuration File

Firestore Indexes

Security Best Practices

Monitoring and Analytics

Enable Cloud Monitoring

Firebase Analytics

Next Steps

Environment Setup

Deployment

Build docs developers (and LLMs) love

Setup

Backend

Frontend

​Overview

​Creating a Firebase Project

​Enabling Firebase Services

​Firestore Database

​Authentication

​Cloud Storage

​Cloud Functions

​Firebase Hosting

​Firebase Configuration File

​Firestore Indexes

​Security Best Practices

​Monitoring and Analytics

​Enable Cloud Monitoring

​Firebase Analytics

​Next Steps

Environment Setup

Deployment

Build docs developers (and LLMs) love

Overview

Creating a Firebase Project

Enabling Firebase Services

Firestore Database

Authentication

Cloud Storage

Cloud Functions

Firebase Hosting

Firebase Configuration File

Firestore Indexes

Security Best Practices

Monitoring and Analytics

Enable Cloud Monitoring

Firebase Analytics

Next Steps