Firebase

Setup

Before deploying to Firebase, you need to configure the .env.production.local files for each app. Please follow this guide to set up environment variables.

Change the NODE_ENV to production in the terminal:

Terminal

export NODE_ENV="production"

Firebase Hosting

For more information on Firebase Hosting, refer to the official Firebase Hosting Documentation.

Create a Firebase Project

If not already, create a Firebase project in the Firebase Console:

Create a project named Transcript Seeker.
Then, create a new web app:
- transcript-seeker-proxy: Replace transcript-seeker-proxy in firebase.json and .firebaserc with this new ID.
Navigate to Hosting and click "Get Started."
Finally, Replace transcript-seeker-bdc29 in firebase.json and .firebaserc with your project id. (This is for firebase hosting, when you click on get started it automatically creates a hosting project with ur app id)

Install Firebase CLI Globally

Always ensure you have the latest version of the Firebase CLI installed.

npm install -g firebase-tools@latest

pnpm add -g firebase-tools@latest

yarn global add firebase-tools@latest

Make sure to use version ^11.18.0 or higher to deploy nodejs18 functions.

Log in to Firebase

Use the Firebase CLI to log into your Firebase account.

Terminal

firebase login

Google Cloud Run

For more information on installation and the Google Cloud CLI, check out the official Google Cloud CLI Documentation.

If you're using the devcontainer configuration provided by this repository, the GCloud CLI will be automatically installed.

Initialize Google Cloud CLI

This command will prompt you to log in and select the project you're working on.

Terminal

gcloud init

Deployment

Proxy Deployment

You need to be on the Blaze plan to use Nitro with cloud functions.

Set Up Firebase Functions

In the Firebase Console:

Navigate to Functions and click "Get Started."

This completes the Firebase setup.

Navigate to the Proxy Application Directory

Terminal

cd apps/proxy

Build and Deploy

To deploy to Firebase Hosting, first build the Nitro app, then deploy:

Terminal

NITRO_PRESET=firebase pnpm build
firebase deploy

API Deployment

The API cannot be deployed to Firebase functions. Instead, we are using Google Cloud Run.

Navigate to the Project Root

Terminal

cd /workspaces/transcript-seeker

Create a Cloud Run Service

The following command will create a Cloud Run service. Modify the SERVICE_NAME to suit your needs.

Terminal

export DEPLOY_REGION="us-central1"
export SERVICE_NAME="transcript-seeker-api-prod"

gcloud run deploy "$SERVICE_NAME" \
  --image=us-docker.pkg.dev/cloudrun/container/hello \
  --region="$DEPLOY_REGION" \
  --allow-unauthenticated \
  --port=3001 \
  --set-env-vars "$(grep -v '^#' apps/api/.env.production.local | grep -v '^\s*$' | sed 's/=\s*"\(.*\)"$/=\1/' | tr '\n' ',' | sed 's/,$//')"

Build and Deploy the Cloud Run Service

The command below builds and deploys the Cloud Run service. Modify the SERVICE_NAME and GITHUB_USERNAME to suit your needs.

The below command assumes you are using a git repository. If you are not, you can replace COMMIT_SHA with a unique identifier.

If you have already deployed the frontend and are encountering a CORS error, it may be due to the API being built for production. Once the build is complete, the CORS error should be resolved.

Terminal

export COMMIT_SHA=$(git rev-parse --short HEAD)
export DEPLOY_REGION="us-central1"
export SERVICE_NAME="transcript-seeker-api-prod"
export GITHUB_USERNAME="your_github_username"

gcloud builds submit \
  --region="$DEPLOY_REGION" \
  --config=cloudbuild.yaml \
  --substitutions=_GITHUB_USERNAME="$GITHUB_USERNAME",_DEPLOY_REGION="$DEPLOY_REGION",_SERVICE_NAME="$SERVICE_NAME",COMMIT_SHA="$COMMIT_SHA"

Frontend Deployment

Navigate to the Frontend Application Directory

Terminal

cd apps/web

Build and Deploy

To deploy the frontend to Firebase Hosting, build the project and deploy:

Terminal

pnpm build
firebase deploy

On this page