Providers & Deployment

Create the Firebase project

1. 1. Go to console.firebase.google.com and create a new project.
2. 2. Enable Google Analytics if you want it — it's not required by OCM.
3. 3. In the left sidebar go to Build → Authentication → Get started.
4. 4. Enable the Email/Password sign-in provider (and any others you want, e.g. Google).
5. 5. Go to Build → Firestore Database → Create database. Start in production mode — you'll add Security Rules next.

Get the Web SDK config (frontend)

1. 1. In Firebase Console go to Project Settings (gear icon) → General → Your apps.
2. 2. Click Add app → Web. Register it (no Firebase Hosting needed).
3. 3. Copy the firebaseConfig object. Each field maps to a VITE_ env var in frontend/.env.local.

// Firebase gives you this:
const firebaseConfig = {
  apiKey: "...",            // → VITE_FIREBASE_API_KEY
  authDomain: "...",        // → VITE_FIREBASE_AUTH_DOMAIN
  projectId: "...",         // → VITE_FIREBASE_PROJECT_ID
  storageBucket: "...",     // → VITE_FIREBASE_STORAGE_BUCKET
  messagingSenderId: "...", // → VITE_FIREBASE_MESSAGING_SENDER_ID
  appId: "...",             // → VITE_FIREBASE_APP_ID
};

Get the service account key (backend)

1. 1. In Project Settings go to the Service Accounts tab.
2. 2. Click "Generate new private key" and confirm.
3. 3. Download the JSON file and save it as backend/firebase-key.json.
4. 4. Never commit this file. It's already in .gitignore.

Firestore Security Rules

OCM uses Firestore directly from the frontend for chat. Paste these rules in Firestore → Rules to restrict reads/writes to authenticated users only:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Chat rooms: any authenticated user can read
    match /rooms/{roomId} {
      allow read: if request.auth != null;
      allow write: if request.auth != null;

      // Messages inside a room
      match /messages/{messageId} {
        allow read: if request.auth != null;
        allow create: if request.auth != null
                      && request.resource.data.uid == request.auth.uid;
        allow delete: if request.auth != null
                      && resource.data.uid == request.auth.uid;
      }
    }
  }
}

Deploy via Vercel CLI

npm i -g vercel
cd frontend
vercel

Vercel auto-detects Vite. Set the root directory to frontend when prompted.

Or deploy via the Vercel dashboard

1. 1. Go to vercel.com and import your GitHub repository.
2. 2. Set the Root Directory to "frontend" in the project settings.
3. 3. Framework will be detected as Vite automatically.
4. 4. Add all VITE_ environment variables from your .env.local in Project Settings → Environment Variables.
5. 5. Deploy. Every push to main triggers a new deployment.

Point VITE_API_URL at your live backend

Once the backend is deployed (next step), update the environment variable in Vercel's dashboard:

VITE_API_URL=https://your-service.onrender.com/api/

1. Connect the repo

1. 1. Go to dashboard.render.com → New → Blueprint.
2. 2. Connect your GitHub account and select this repository.
3. 3. Render finds render.yaml and shows you the services it will create: "opencms" (web) and "cmsdb-service" (PostgreSQL).
4. 4. Click Apply — Render creates both services.

2. Set environment variables

DATABASE_URL and SECRET_KEY are handled automatically by render.yaml. You need to set the rest manually in the web service's Environment tab:

ALLOWED_HOSTS=your-service.onrender.com
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
PAYSTACK_SECRET_KEY=
BACKEND_ADMIN_EMAIL=
BACKEND_ADMIN_PASSWORD=

3. Upload firebase-key.json

Render doesn't support file uploads directly, so you have two options:

4. What happens on deploy

Render runs build.sh which:

pip install -r requirements.txt
python manage.py collectstatic --no-input
python manage.py migrate

Then starts the server with:

python -m gunicorn church.asgi:application -k uvicorn.workers.UvicornWorker