How to access environment-specific Firebase Function endpoints from Firebase Hosted application?

Question

I have three Firebase projects representing Development, Staging and Production environments hosted on Firebase hosting. Each environment utilizes its own deployed Firebase functions like so:

• Dev function endpoint: https://us-central1-my-app-dev.cloudfunctions.net/someFunction
• Staging function endpoint: https://us-central1-my-app-staging.cloudfunctions.net/someFunction
• Production function endpoint: https://us-central1-my-app.cloudfunctions.net/someFunction

I can't figure out how the static, Firebase-hosted client React application should invoke these functions because the URI endpoints of each changes depending on which environment the code is executing from.

Ideally I could set environment-specific configuration for each Firebase Hosting environment; unfortunately the only way to do this in Firebase Hosting is from within Firebase Functions themselves.

How can I retrieve the environment-specific endpoint for each Firebase Function?

Answer 1

You have a couple options here.

First, you could just configure your React app any way you like. It's necessarily not a bad thing for each system component (backend, frontend) to have its own configuration.

Second, since you're using Firebase Hosting to serve your static content, you can also use it to serve your functions API endpoints. This means that both your static content and API endpoints are all served through the same hostname, which means you no longer have to specify the host when making a request. All the requests can be relative to that host. You can achieve this via Hosting rewrite rules.