Deployment Guide

Overview

This guide covers deploying the PixelTech Colombia e-commerce platform to production using Firebase Hosting, Cloud Functions, and related services.

Pre-Deployment Checklist

Before deploying, ensure:

Firebase project is created and configured

All environment variables are set in Firebase Functions secrets

You’re logged into Firebase CLI (firebase login)

Correct Firebase project is selected (firebase use production)

All tests pass locally

Code is committed to version control

Build Process

Tailwind CSS Compilation

Build Tailwind CSS for Production

Compile Tailwind CSS with optimizations for production:

npx tailwindcss -i ./src/input.css -o ./public/css/styles.css --minify

This command:

Reads the input CSS from src/input.css
Processes it through Tailwind CSS
Minifies the output for production
Writes to public/css/styles.css

The --minify flag reduces the CSS file size significantly for faster page loads.

Verify Build Output

Check that the compiled CSS exists and is optimized:

ls -lh public/css/styles.css

The file should be significantly smaller than the development version.

Cloud Functions Preparation

Install Production Dependencies

Ensure all Cloud Functions dependencies are installed:

cd functions
npm install --production
cd ..

Validate Functions Code

Run a quick validation to check for syntax errors:

cd functions
node -c index.js
cd ..

Deployment Commands

Full Deployment

Deploy all Firebase services at once:

firebase deploy

This deploys:

Cloud Functions
Firebase Hosting
Firestore Rules
Firestore Indexes
Storage Rules

Full deployments can take 5-10 minutes. Use selective deployment for faster iterations.

Selective Deployment

Hosting Only
Functions Only
Firestore Rules
Storage Rules

Deploy just the frontend (HTML, CSS, JS):

firebase deploy --only hosting

Use this when you’ve only changed frontend code or styles.Deploy time: ~30 seconds

Deploy only Cloud Functions:

firebase deploy --only functions

Deploy specific functions:

# Deploy a single function
firebase deploy --only functions:createMercadoPagoPreference

# Deploy multiple specific functions
firebase deploy --only functions:mercadoPagoWebhook,functions:createCODOrder

Deploy time: 2-5 minutes per function

Deploy Firestore security rules and indexes:

# Deploy rules only
firebase deploy --only firestore:rules

# Deploy indexes only
firebase deploy --only firestore:indexes

# Deploy both
firebase deploy --only firestore

Deploy time: ~10 seconds

Deploy Cloud Storage security rules:

firebase deploy --only storage

Deploy time: ~10 seconds

Environment Variables for Production

Setting Function Secrets

For production, use Firebase’s secret manager instead of .env files:

Set Payment Gateway Credentials

# MercadoPago
firebase functions:secrets:set MP_ACCESS_TOKEN
# Paste your production token when prompted

# 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

Set Email Configuration

firebase functions:secrets:set SMTP_HOST
firebase functions:secrets:set SMTP_PORT
firebase functions:secrets:set SMTP_EMAIL
firebase functions:secrets:set SMTP_PASSWORD

Example values:

SMTP_HOST: smtp.gmail.com
SMTP_PORT: 465
SMTP_EMAIL: [email protected]

Set WhatsApp Configuration

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

Verify Secrets

List all configured secrets:

firebase functions:secrets:access

After setting or updating secrets, you must redeploy your functions for the changes to take effect:

firebase deploy --only functions

Deployment Workflow

Standard Deployment Process

Build Frontend Assets

# Compile and minify Tailwind CSS
npx tailwindcss -i ./src/input.css -o ./public/css/styles.css --minify

Test Locally

# Start emulators
firebase emulators:start

Verify everything works in the emulator environment before deploying.

Deploy to Production

# Deploy everything
firebase deploy

# Or deploy selectively
firebase deploy --only hosting,functions

Monitor Deployment

Watch the deployment progress in your terminal. You’ll see:

Functions being uploaded and deployed
Hosting files being uploaded
Rules being updated
Final deployment URLs

Verify Deployment

Open your production URL and verify:

Site loads correctly
Styles are applied (Tailwind CSS)
Functions are accessible
Authentication works
Database operations work

Cloud Functions Deployment Details

Available Functions

The platform includes the following Cloud Functions: Payment Processing:

createMercadoPagoPreference - Create MercadoPago payment
mercadoPagoWebhook - Handle MercadoPago webhooks
createCODOrder - Create cash-on-delivery orders
createAddiCheckout - Create ADDI payment checkout
addiWebhook - Handle ADDI webhooks
createSistecreditoCheckout - Create Sistecrédito checkout
sistecreditoWebhook - Handle Sistecrédito webhooks

Notifications:

sendOrderConfirmation - Email order confirmations
sendDispatchNotification - Email shipping notifications
sendWhatsappMessage - Send WhatsApp messages
whatsappWebhook - Handle WhatsApp webhooks

Scheduled Tasks:

cleanupOldOrders - Runs every 24 hours
processScheduledTransfers - Process pending transfers
cancelAbandonedPayments - Cancel expired payments
checkExpiredPromotions - Expire outdated promotions

Other:

touchProductTimestamp - Update product sync timestamps
generateProductFeed - Generate Google Merchant feed
sitemap - Generate XML sitemap

Function Configuration

Functions are configured to use:

Node.js Runtime: v24 (specified in functions/package.json)
Region: Auto-selected by Firebase (typically us-central1)
Memory: Default (256MB, can be increased per function if needed)
Timeout: Default (60s for HTTP, 540s for scheduled)

Deploying Individual Functions

For faster deployments, deploy only changed functions:

# Deploy payment-related functions
firebase deploy --only functions:createMercadoPagoPreference,functions:mercadoPagoWebhook

# Deploy email functions
firebase deploy --only functions:sendOrderConfirmation,functions:sendDispatchNotification

# Deploy scheduled functions
firebase deploy --only functions:cleanupOldOrders,functions:processScheduledTransfers

Post-Deployment Verification

Check Hosting

Verify your site is accessible:

curl -I https://your-project-id.web.app

Or visit the URL in your browser.

Test Cloud Functions

Check function endpoints:

# Check sitemap
curl https://your-project-id.web.app/sitemap.xml

# Check Google Merchant feed
curl https://your-project-id.web.app/google-feed.xml

Monitor Function Logs

View real-time logs:

firebase functions:log

# Or view logs for a specific function
firebase functions:log --only createMercadoPagoPreference

Check Firestore Rules

Test that security rules are active:

Go to Firebase Console > Firestore Database
Try to read/write data without authentication
Verify proper access control

Verify Storage Rules

Test Storage security:

Go to Firebase Console > Storage
Try to upload without authentication
Verify public read access for product images

Rollback Strategy

Rolling Back Hosting

Firebase Hosting keeps previous deployments. To rollback:

# List previous releases
firebase hosting:channel:list

# Rollback to a previous version
firebase hosting:clone <previous-version>:live <channel-id>:live

Or use the Firebase Console:

Go to Hosting > Release history
Click on a previous release
Click Rollback

Rolling Back Functions

Functions don’t have automatic rollback. To revert:

Checkout the previous code version:
```
git checkout <previous-commit>
```

Redeploy:

cd functions
npm install
cd ..
firebase deploy --only functions

CI/CD Integration

GitHub Actions Example

Create .github/workflows/deploy.yml:

name: Deploy to Firebase

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '24'
      
      - name: Install dependencies
        run: |
          npm install
          cd functions && npm install
      
      - name: Build Tailwind CSS
        run: npx tailwindcss -i ./src/input.css -o ./public/css/styles.css --minify
      
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          projectId: your-project-id
          channelId: live

Troubleshooting

Deployment fails with authentication error

Solution:

firebase login --reauth
firebase use --add

Select your project again.

Functions fail to deploy due to Node version

Ensure your local Node.js version matches the one specified in functions/package.json (v24):

node --version
# Should show v24.x.x

Use nvm to switch versions if needed.

Styles not updating after deployment

Clear your browser cache
Verify the CSS file was rebuilt:
```
ls -lh public/css/styles.css
```
Check browser DevTools Network tab for 304 vs 200 status

Function environment variables not working

After setting secrets, you must redeploy:

firebase deploy --only functions

Verify secrets are set:

firebase functions:secrets:access

Quota exceeded errors

Check your usage in Firebase Console:

Go to Usage and billing
Check which services are consuming quota
Optimize function calls or upgrade plan if needed

Performance Optimization

Hosting Performance

CDN: Firebase Hosting automatically uses a global CDN
Compression: Gzip/Brotli compression is automatic
Caching: Configure cache headers in firebase.json if needed
SSL: HTTPS is automatic and free

Function Performance

Cold Starts: Keep functions warm with scheduled pings if needed
Memory: Increase memory allocation for heavy functions
Concurrency: Optimize database queries to reduce execution time

Tailwind CSS Optimization

The --minify flag already optimizes CSS, but you can further reduce size:

tailwind.config.js

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        'brand-primary': '#2563EB',
        'brand-dark': '#1E293B',
      }
    },
  },
  plugins: [],
}

Ensure the content array includes all files that use Tailwind classes to enable proper purging.

Setup

Backend

Frontend

Overview

Pre-Deployment Checklist

Build Process

Tailwind CSS Compilation

Cloud Functions Preparation

Deployment Commands

Full Deployment

Selective Deployment

Environment Variables for Production

Setting Function Secrets

Deployment Workflow

Standard Deployment Process

Cloud Functions Deployment Details

Available Functions

Function Configuration

Deploying Individual Functions

Post-Deployment Verification

Rollback Strategy

Rolling Back Hosting

Rolling Back Functions

CI/CD Integration

GitHub Actions Example

Troubleshooting

Performance Optimization

Hosting Performance

Function Performance

Tailwind CSS Optimization

Next Steps

Environment Setup

Firebase Setup

Build docs developers (and LLMs) love

Setup

Backend

Frontend

​Overview

​Pre-Deployment Checklist

​Build Process

​Tailwind CSS Compilation

​Cloud Functions Preparation

​Deployment Commands

​Full Deployment

​Selective Deployment

​Environment Variables for Production

​Setting Function Secrets

​Deployment Workflow

​Standard Deployment Process

​Cloud Functions Deployment Details

​Available Functions

​Function Configuration

​Deploying Individual Functions

​Post-Deployment Verification

​Rollback Strategy

​Rolling Back Hosting

​Rolling Back Functions

​CI/CD Integration

​GitHub Actions Example

​Troubleshooting

​Performance Optimization

​Hosting Performance

​Function Performance

​Tailwind CSS Optimization

​Next Steps

Environment Setup

Firebase Setup

Build docs developers (and LLMs) love

Overview

Pre-Deployment Checklist

Build Process

Tailwind CSS Compilation

Cloud Functions Preparation

Deployment Commands

Full Deployment

Selective Deployment

Environment Variables for Production

Setting Function Secrets

Deployment Workflow

Standard Deployment Process

Cloud Functions Deployment Details

Available Functions

Function Configuration

Deploying Individual Functions

Post-Deployment Verification

Rollback Strategy

Rolling Back Hosting

Rolling Back Functions

CI/CD Integration

GitHub Actions Example

Troubleshooting

Performance Optimization

Hosting Performance

Function Performance

Tailwind CSS Optimization

Next Steps