Firebase Setup

Firebase setup instructions for local development, CI/service accounts, and hosting. Keep secrets out of source control and follow your org's deployment policies.

Prerequisites

Before you begin, make sure you have the following installed and an account created. These steps assume you are comfortable running basic commands in a terminal but are new to Firebase, Next.js, HTML/CSS, or hosting.

  • Node.js (LTS recommended, v18 or later) and `npm` required to run and build the Next.js app.
  • Github account to clone the repository and manage source changes.
  • A Google account and a Firebase project (you can create one at the Firebase console).
  • Firebase CLI for connecting the repo to your Firebase project and deploying.
  • A code editor such as Visual Studio Code (recommended) and a web browser (Chrome/Edge/Firefox) for testing.
  • Basic familiarity with editing text files and environment variables (`.env.local`).

If you need help installing any of the items above, here are simple verification commands you can run after installation:

Verify installs
node -v
npm -v
git --version
# Optional: verify firebase tools if installed
# firebase --version

Notes:

  • Download Node.js from the official site if you don't have it: run the installer and choose the LTS version.
  • Install Git from its website (or via your package manager) and configure your name/email for commits.
  • If you're unfamiliar with HTML/CSS or Next.js, the Mozilla MDN guides and the Next.js docs are good introductory resources.

Create a Firebase account & project

If you don't already have a Firebase account or project, follow these steps to create one. You'll use the Firebase console (web UI) to make a new project and retrieve the client config/API keys.

Create Firebase project (high level)
1. Open https://console.firebase.google.com/ and sign in with your Google account.
2. Click 'Add project' and enter a project name (e.g., CrowdCAD-Prod).
3. Follow the prompts: you can skip Google Analytics for now unless you want it.
4. After the project is created, open Project settings (gear icon) -> General.
5. Under 'Your apps', click 'Add app' and choose Web (</>). Register an app name and click 'Register app'.
6. The console will show your Firebase config (apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId). Copy these values into your .env.local using the NEXT_PUBLIC_ variables shown below.
Create Firebase project (high level)
1. Open https://console.firebase.google.com/ and sign in with your Google account.
2. Click 'Add project' and enter a project name (e.g., CrowdCAD-Prod).
3. Follow the prompts: you can skip Google Analytics for now unless you want it.
4. After the project is created, open Project settings (gear icon) -> General.
5. Under 'Your apps', click 'Add app' and choose Web (&lt;/&gt;). Register an app name and click 'Register app'.
6. The console will show your Firebase config (apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId). Copy these values into your .env.local using the NEXT_PUBLIC_ variables shown below.

Enable any products you need for this app:

Enable Firestore / Hosting (optional)
# Firestore: Console -> Build -> Firestore Database -> Create database -> choose start mode and region
# Hosting: Console -> Build -> Hosting -> Get started -> follow prompts (or use firebase init hosting locally)

Once you have the client config, copy the values into your .env.local as described above. For server-side work, download a service account JSON from Project settings → Service accounts and keep it secret.

1) Clone the repository

Start by cloning this repository locally and installing dependencies:

Clone & install
git clone https://github.com/iv-zhang/CrowdCAD.git
cd CrowdCAD
# or your fork: git clone git@github.com:<org>/<repo>.git
npm install

2) Local development

Create a local `.env.local` with the public Firebase config (these keys are safe to expose to client-side code):

Local .env.local (client-only keys)
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=1234567890
NEXT_PUBLIC_FIREBASE_APP_ID=1:1234567890:web:abcdef123456

Run the dev server:

Run dev
npm run dev
# then open http://localhost:3000

3) Server / CI: service account

For server-side operations (backfills, admin scripts, CI), use a service account JSON and keep it secret:

Service account options
# Option A: store JSON as a base64 env var
FIREBASE_SERVICE_ACCOUNT_JSON_BASE64=eyJ0eXAiOiJKV1Qi...

# Option B: mount the JSON file on the runner and point to it
FIREBASE_SERVICE_ACCOUNT_PATH=/secrets/firebase-service-account.json

In CI, decode/load the JSON and initialize the Admin SDK before running server tasks.

4) Connect this repo to a Firebase project

Install the Firebase CLI, login, and select or create a project:

Firebase CLI & connect
# Install (or use npx)
npm install -g firebase-tools
# Login interactively
firebase login
# List projects you have access to
firebase projects:list
# Set an active project for this repo (or create one in the Firebase console)
firebase use --add

Initialize hosting or other features (follow prompts). If asked for a public directory, use the directory your deploy workflow expects (examples below):

Initialize hosting
firebase init hosting
# Choose an existing project and configure the build output directory as required by your hosting setup

5) Build & deploy

Build the Next.js app and deploy hosting (project-specific settings may vary):

Build & deploy
npm run build
# Deploy hosting only
firebase deploy --only hosting

Note: many projects use CI to perform the build and deploy steps using service account credentials. Configure environment variables in your CI/hosting provider rather than committing them to source control.

Quick CLI summary

Quick commands
git clone <repo> && cd <repo>
npm install
# local dev
npm run dev
# firebase connect + deploy
firebase login
firebase use --add
firebase init hosting
npm run build
firebase deploy --only hosting

If you need any help setting up Firebase, please contact support@crowdcad.org.