Deployment

Arre is deployed to Firebase Hosting with automated CI/CD via GitHub Actions. This guide covers manual deployment, environment configuration, and production operations.

Deployment Architecture

The application uses a dual-environment strategy:

Environment	URL	Purpose	Data
Development	`arre-app-dev.web.app`	Staging/testing	Test data, wiped frequently
Production	`arre.app` (planned)	Live users	Real user data, backed up

Currently, all deployments go to arre-app-dev. A separate production project is planned for future phases.

Prerequisites

Before deploying, ensure you have:

Firebase CLI installed

npm install -g firebase-tools

Firebase authentication

firebase login

Environment variables configured

Create a .env file in the project root:

.env

VITE_FIREBASE_API_KEY=AIzaSy...
VITE_FIREBASE_AUTH_DOMAIN=arre-app-dev.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=arre-app-dev
VITE_FIREBASE_STORAGE_BUCKET=arre-app-dev.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123456789:web:abcdef

Never commit .env to version control. Add it to .gitignore.

Manual Deployment

Full Deployment (Frontend + Backend)

Deploy the complete application including Firestore rules, Cloud Functions, and Hosting:

Install dependencies

npm ci
cd functions && npm ci && cd ..

Build the application

npm run build

This compiles the Vite app to the dist/ directory with production optimizations.

Deploy to Firebase

firebase deploy

This deploys:

Firestore security rules
Firestore indexes
Cloud Functions (processMagicImport)
Firebase Hosting (static assets)

Output
Selective Deployment

=== Deploying to 'arre-app-dev'...

i  deploying firestore, functions, hosting
i  firestore: checking rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
✔  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (45.2 KB) for uploading
✔  functions: functions folder uploaded successfully
i  hosting[arre-app-dev]: beginning deploy...
i  hosting[arre-app-dev]: found 25 files in dist
✔  hosting[arre-app-dev]: file upload complete
✔  hosting[arre-app-dev]: version finalized
✔  hosting[arre-app-dev]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/arre-app-dev
Hosting URL: https://arre-app-dev.web.app

Deploy only specific services:Hosting only:

firebase deploy --only hosting

Functions only:

firebase deploy --only functions

Firestore rules only:

firebase deploy --only firestore:rules

Multiple services:

firebase deploy --only firestore,functions

Production Build Process

The build command runs Vite with production optimizations:

npm run build

This performs:

Code minification - Reduces bundle size
Tree shaking - Removes unused code
Asset optimization - Compresses images and fonts
Code splitting - Creates efficient chunks
Environment injection - Embeds VITE_* variables

{
  "scripts": {
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

Environment Configuration

Local Development

Uses .env file (not committed to git):

.env

VITE_FIREBASE_API_KEY=AIzaSy...
VITE_FIREBASE_AUTH_DOMAIN=arre-app-dev.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=arre-app-dev

CI/CD (GitHub Actions)

Uses GitHub Secrets injected at build time:

- name: Build
  run: npm run build
  env:
    VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
    VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
    VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}

How Vite Injects Variables

Vite embeds environment variables at build time:

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
};

Only variables prefixed with VITE_ are exposed to the client. Server-side secrets (like GEMINI_API_KEY) must use Cloud Functions.

Secret Management

GitHub Secrets

Store sensitive values in GitHub repository settings:

Navigate to Settings

Repository > Settings > Secrets and variables > Actions

Add secrets

Required secrets:

Secret Name	Description
`VITE_FIREBASE_API_KEY`	Firebase API key
`VITE_FIREBASE_AUTH_DOMAIN`	Auth domain
`VITE_FIREBASE_PROJECT_ID`	Project ID
`VITE_FIREBASE_STORAGE_BUCKET`	Storage bucket
`VITE_FIREBASE_MESSAGING_SENDER_ID`	FCM sender ID
`VITE_FIREBASE_APP_ID`	App ID
`FIREBASE_SERVICE_ACCOUNT_ARRE_APP_DEV`	Service account JSON
`GEMINI_API_KEY`	AI QA agent key

Firebase Service Account

Generate a service account for CI/CD:

Open Firebase Console

Go to Firebase Console

Generate new key

Click Generate new private key
Download the JSON file

Add to GitHub Secrets

Copy the entire JSON content
Add as FIREBASE_SERVICE_ACCOUNT_ARRE_APP_DEV

Firebase Console Operations

View Deployment Status

Open Firebase Console

Navigate to Firebase Console - Arre App Dev

Check Hosting

Build > Hosting > Release historyView:

Current live version
Deployment timestamp
Deployed files
Rollback options

Check Functions

Build > FunctionsView:

Function execution logs
Invocation count
Error rates

Authentication Setup

Enable sign-in methods:

Enable providers

Build > Authentication > Sign-in methodEnable:

Google (requires support email)
Anonymous (for dev login)

Add authorized domains

Build > Authentication > Settings > Authorized domainsAdd:

arre-app-dev.web.app
arre-app-dev.firebaseapp.com
localhost (for development)

Without authorized domains, OAuth sign-in will fail with auth/unauthorized-domain.

Production Deployment Strategy

Recommended: Dual-Project Setup

For robust production operations:

Development
Production

Project: arre-app-dev

URL: arre-app-dev.web.app
Purpose: Staging, testing, demo
Data: Test data, frequently wiped
Deploy: On every merge to main

Project: arre-app-prod (planned)

URL: arre.app (custom domain)
Purpose: Live users
Data: Real user data, backed up
Deploy: On release tags only

Release Workflow

Develop and test

Work in feature branches, merge to main after PR approval

Auto-deploy to dev

GitHub Actions deploys to arre-app-dev.web.app on merge

Create release tag

git tag -a v1.0.0 -m "Release v1.0.0"
git push origin v1.0.0

Deploy to production

GitHub Actions deploys to arre-app-prod on tag push

Rollback

Firebase Hosting retains deployment history for easy rollback:

Open Firebase Console

Firebase Console > Hosting

Select previous release

Click on the stable version in Release history

Rollback

Click Rollback to restore the previous version

Rollbacks take effect immediately without requiring a rebuild.

Cost Control

Pause Deployment

To stop consumption while keeping data:

Disable Hosting
Delete Functions

firebase hosting:disable

Stops public access and bandwidth costs.

firebase functions:delete processMagicImport --region us-central1

Stops compute costs for AI processing.

Downgrade Plan

Open billing settings

Project Overview > Usage and billing

Switch plan

Change from Blaze (Pay as you go) to Spark (Free)

Understand limitations

Free tier limits:

No Cloud Functions
1GB Hosting bandwidth/day
10GB Firestore storage

Delete Project

This permanently deletes all data after 30 days.

Open project settings

Project Settings (gear icon)

Delete project

Scroll to bottom > Delete project

Recovery period

30-day grace period to restore before permanent deletion

Monitoring

Function Logs

View Cloud Function execution:

firebase functions:log --only processMagicImport

Or in Firebase Console:

Build > Functions > processMagicImport > Logs

Hosting Metrics

View bandwidth and request metrics:

Build > Hosting > Usage

Firestore Usage

Monitor read/write operations:

Build > Firestore Database > Usage

Troubleshooting

Authentication Fails

Error: auth/unauthorized-domain Fix: Add domain to authorized domains:

Firebase Console > Authentication > Settings > Authorized domains

Build Fails

Error: import.meta.env.VITE_FIREBASE_API_KEY is undefined Fix: Ensure .env file exists with all required variables

Deployment Fails

Error: HTTP Error: 403, The caller does not have permission Fix: Re-authenticate with Firebase CLI:

firebase logout
firebase login

Function Cold Starts

Issue: First function invocation is slow (5-10 seconds) Solution: Accept as normal Firebase behavior, or upgrade to always-on instances (paid)

Architecture

Backend

Testing & Deployment

Deployment Architecture

Prerequisites

Manual Deployment

Full Deployment (Frontend + Backend)

Production Build Process

Environment Configuration

Local Development

CI/CD (GitHub Actions)

How Vite Injects Variables

Secret Management

GitHub Secrets

Firebase Service Account

Firebase Console Operations

View Deployment Status

Authentication Setup

Production Deployment Strategy

Recommended: Dual-Project Setup

Release Workflow

Rollback

Cost Control

Pause Deployment

Downgrade Plan

Delete Project

Monitoring

Function Logs

Hosting Metrics

Firestore Usage

Troubleshooting

Authentication Fails

Build Fails

Deployment Fails

Function Cold Starts

Next Steps

Testing

CI/CD Pipeline

Build docs developers (and LLMs) love

Architecture

Backend

Testing & Deployment

​Deployment Architecture

​Prerequisites

​Manual Deployment

​Full Deployment (Frontend + Backend)

​Production Build Process

​Environment Configuration

​Local Development

​CI/CD (GitHub Actions)

​How Vite Injects Variables

​Secret Management

​GitHub Secrets

​Firebase Service Account

​Firebase Console Operations

​View Deployment Status

​Authentication Setup

​Production Deployment Strategy

​Recommended: Dual-Project Setup

​Release Workflow

​Rollback

​Cost Control

​Pause Deployment

​Downgrade Plan

​Delete Project

​Monitoring

​Function Logs

​Hosting Metrics

​Firestore Usage

​Troubleshooting

​Authentication Fails

​Build Fails

​Deployment Fails

​Function Cold Starts

​Next Steps

Testing

CI/CD Pipeline

Build docs developers (and LLMs) love

Deployment Architecture

Prerequisites

Manual Deployment

Full Deployment (Frontend + Backend)

Production Build Process

Environment Configuration

Local Development

CI/CD (GitHub Actions)

How Vite Injects Variables

Secret Management

GitHub Secrets

Firebase Service Account

Firebase Console Operations

View Deployment Status

Authentication Setup

Production Deployment Strategy

Recommended: Dual-Project Setup

Release Workflow

Rollback

Cost Control

Pause Deployment

Downgrade Plan

Delete Project

Monitoring

Function Logs

Hosting Metrics

Firestore Usage

Troubleshooting

Authentication Fails

Build Fails

Deployment Fails

Function Cold Starts

Next Steps