Overview Arre uses Firebase as its backend infrastructure, including Authentication, Firestore, Cloud Storage, and Cloud Functions. This guide covers both production configuration and local development setup.
Firebase Project Configuration Environment Variables The Firebase SDK is initialized using environment variables. Create a .env file in your project root:
VITE_FIREBASE_API_KEY = your-api-key VITE_FIREBASE_AUTH_DOMAIN = your-project.firebaseapp.com VITE_FIREBASE_PROJECT_ID = your-project-id VITE_FIREBASE_STORAGE_BUCKET = your-project.appspot.com VITE_FIREBASE_MESSAGING_SENDER_ID = your-sender-id VITE_FIREBASE_APP_ID = your-app-id
All environment variables use the VITE_ prefix for Vite to expose them to the client-side code.
Firebase SDK Initialization The Firebase app is initialized in src/lib/firebase.ts:
import { initializeApp } from 'firebase/app' ; import { getAuth , connectAuthEmulator } from 'firebase/auth' ; import { getFirestore , connectFirestoreEmulator } from 'firebase/firestore' ; import { getStorage , connectStorageEmulator } from 'firebase/storage' ; import { getFunctions , connectFunctionsEmulator } from 'firebase/functions' ; 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 , storageBucket: import . meta . env . VITE_FIREBASE_STORAGE_BUCKET , messagingSenderId: import . meta . env . VITE_FIREBASE_MESSAGING_SENDER_ID , appId: import . meta . env . VITE_FIREBASE_APP_ID }; const app = initializeApp ( firebaseConfig ); export const auth = getAuth ( app ); export const db = getFirestore ( app ); export const storage = getStorage ( app ); export const functions = getFunctions ( app );
Local Development with Emulators Starting the Emulators Arre uses Firebase Local Emulator Suite for development. Start all emulators with:
This command runs: firebase emulators:start --only auth,firestore,storage,functions
Emulator Ports The emulator configuration is defined in firebase.json:
Emulator Ports
firebase.json
Service Port Purpose Auth 9099 Firebase Authentication Firestore 8080 Cloud Firestore database Storage 9199 Cloud Storage for files Functions 5001 Cloud Functions HTTP endpoints UI Auto Emulator Suite UI (auto-assigned)
{ "emulators" : { "auth" : { "port" : 9099 }, "functions" : { "port" : 5001 }, "firestore" : { "port" : 8080 }, "storage" : { "port" : 9199 }, "ui" : { "enabled" : true } } }
Automatic Emulator Connection When running in development mode (import.meta.env.DEV), the app automatically connects to local emulators:
if ( import . meta . env . DEV ) { console . log ( '🔥 Connecting to Firebase Emulators...' ); connectAuthEmulator ( auth , 'http://localhost:9099' ); connectFirestoreEmulator ( db , 'localhost' , 8080 ); connectStorageEmulator ( storage , 'localhost' , 9199 ); connectFunctionsEmulator ( functions , 'localhost' , 5001 ); }
Emulator connections must be established before any Firebase operations. The connection calls should run immediately after service initialization.
Cloud Functions Setup Secret Management Cloud Functions use Google Cloud Secret Manager for sensitive data:
Define Secrets
Secrets are defined using defineSecret() in functions/index.js: const { defineSecret } = require ( 'firebase-functions/params' ); const geminiApiKey = defineSecret ( 'GEMINI_API_KEY' ); const googleClientId = defineSecret ( 'GOOGLE_CLIENT_ID' ); const googleClientSecret = defineSecret ( 'GOOGLE_CLIENT_SECRET' );
Add Secrets to Google Cloud
Set secrets using the Firebase CLI: firebase functions:secrets:set GEMINI_API_KEY firebase functions:secrets:set GOOGLE_CLIENT_ID firebase functions:secrets:set GOOGLE_CLIENT_SECRET
Access in Functions
Access secret values within function handlers: exports . processMagicImport = onCall ({ secrets: [ geminiApiKey ] }, async ( request ) => { const apiKey = geminiApiKey . value (); // Use the secret... });
Functions Configuration Functions are configured in firebase.json:
{ "functions" : [ { "source" : "functions" , "codebase" : "default" , "disallowLegacyRuntimeConfig" : true , "ignore" : [ "node_modules" , ".git" , "firebase-debug.log" , "firebase-debug.*.log" , "*.local" ] } ] }
Hosting Configuration The firebase.json hosting configuration supports single-page application routing:
{ "hosting" : { "public" : "dist" , "ignore" : [ "firebase.json" , "**/.*" , "**/node_modules/**" ], "rewrites" : [ { "source" : "**" , "destination" : "/index.html" } ] } }
The dist directory is generated by Vite’s build process (npm run build).
Next Steps
Firestore Schema Learn about data structures and TypeScript interfaces
Cloud Functions Explore serverless function implementations
Security Rules Understand data access control and validation
