Firebase CDN

Firebase CDN (Content Delivery Network) is a feature of the Firebase platform that allows you to host and serve static assets, such as HTML, CSS, JavaScript, images, and videos, from a network of edge locations around the world.

Steps to Set Up Firebase

Open the Firebase website.
Click on "Get started."
Sign in with your Google account.

Create a New Project

Name your project (you can use the same project as Google OAuth).

Project Name

Optionally, you can disable Google Analytics.

Google Analytics

Wait for 20/30 seconds for the project to be ready, then click on "Continue."

Continue

Click on "All Products."

All Products

Select "Storage."

Storage

Click on "Get Started."

Get Started

Click on "Next."

Select your "Cloud Storage location."

Cloud Storage Location

Return to the Project Overview.

Project Overview

Click on "+ Add app" under your project name, then click on "Web."

Web

Save all this information in a text file.

Save Information

Fill all the firebaseConfig variables in the .env file.

FIREBASE_API_KEY=api_key #apiKey
FIREBASE_AUTH_DOMAIN=auth_domain #authDomain
FIREBASE_PROJECT_ID=project_id #projectId
FIREBASE_STORAGE_BUCKET=storage_bucket #storageBucket
FIREBASE_MESSAGING_SENDER_ID=messaging_sender_id #messagingSenderId
FIREBASE_APP_ID=1:your_app_id #appId

Return one last time to the Project Overview.

Project Overview

Select Storage

Select Rules and delete : if false; on this line: allow read, write: if false;
- your updated rules should look like this:
rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /images/{userId}/{fileName} { allow read, write: if true; } } }

Publish your updated rules

Configure `fileStrategy` in `librechat.yaml`

Finally, to enable the app use Firebase, you must set the following in your librechat.yaml config file.

  version: 1.3.4
  cache: true
  fileStrategy: "firebase"

For more information about the librechat.yaml config file, see the guide here: Custom Endpoints & Configuration.

Export convos as png when using Firebase

Step-by-Step Guide to Set Up CORS for Firebase Storage

Step 1: Create the CORS Configuration File

Open a text editor of your choice.
Create a new file and name it cors.json.
Add the following configuration to allow access from "https://ai.example.com":

[
  {
    "origin": ["https://ai.example.com"],
    "method": ["GET", "POST", "DELETE", "PUT"],
    "maxAgeSeconds": 3600
  }
]

Save the file.

Step 2: Apply the CORS Configuration

Open your terminal or command prompt.
Navigate to the directory where you saved the cors.json file.
Execute the following command, replacing <your-cloud-storage-bucket> with the name of your Firebase Storage bucket:

gsutil cors set cors.json gs://<your-cloud-storage-bucket>

Step 3: Verify the CORS Settings

To confirm that the CORS settings have been applied correctly, you can retrieve the current CORS configuration with the following command:

gsutil cors get gs://<your-cloud-storage-bucket>

The output should reflect the settings you specified in the cors.json file.

Step 4: Test the Configuration

Try exporting a convo as png from the allowed origin ("https://ai.example.com").
If everything is set up correctly, you should not encounter any CORS issues.

Note: Always ensure that you're applying CORS settings only for trusted origins to maintain the security of your application. Adjust the allowed methods and headers according to your specific needs.

That's it! You've successfully configured CORS for your Firebase Storage bucket to allow requests from a specific origin. Remember to replace <your-cloud-storage-bucket> with your actual bucket name and https://ai.example.com with your own domain when applying the configuration.

Firebase CDN

On this page