2

I'm using React with next.js and Google Cloud functions to serve the app. I also use firebase. I'm looking for the best way to automatically configure the staging and production configuration for the 3 environments.

  • Production: Uses production credentials
  • Staging: Uses staging credentials
  • Local: Also uses staging credentials

I have two Firebase projects and currently switch between the configuration using the firebase.js file in my app. I swap out the config object, then deploy. I want to be able to run the app locally, and both on staging and production without changing anything on deploy as it leads to errors.

The issue for me is setting different environment variables for the two cloud projects...I can read cloud environment variables I set up there, but only in the cloud functions environment, not in the client-facing app, which is where I am currently swapping the configuration.

I can see this being solved by:

  1. Google Cloud Platform environment variables (but I have tried and failed to read them from the client). Maybe I change the next.js config to read something up in the cloud when running, instead of doing the config change at deploy?
  2. Local nextjs environment configuration but this doesn't know anything about the two different servers (only dev vs prod which don't match up exactly with local and cloud)
  3. React dotenv configuration (same as the point above)
  4. webpack / npm configuration that swaps the config when compiling
  5. Swapping env based on firebase use [environment] on the command line at deploy time

Points #1 and #5 seem the most likely candidates for automatic and seamless deployment but I can't figure out how to read the GCP config variables in React and for #5 I don't know how to run a custom script that could swap variables based on the firebase project currently being used on the command line.

Most info I have seen on this doesn't tackle this issue exactly - all the env variables are either only in the cloud functions or distinguish local vs cloud or dev vs prod, but cannot distinguish between two clouds and a local that uses the same config as one of the clouds.

Someone must have had experience with this?

paintedbicycle
  • 287
  • 3
  • 13
  • From a Firebase/GCP perspective, the only recommended advice to separating environments is to create different projects for each environment. – Doug Stevenson Mar 04 '19 at 16:29
  • @DougStevenson Right, yes I have two different projects in GCP. What I'm curious about, it how to push my code to these two environments with the correct config. I have one codebase that I run `firebase use production` and `firebase use default`. So now, how do I have it so that each of these two GCP projects have the correct Firebase config? – paintedbicycle Mar 04 '19 at 18:15
  • There are a bunch of environment variables provided by GCF to help you figure out where you're running. https://cloud.google.com/functions/docs/env-var#reserved_keys_key_validation – Doug Stevenson Mar 04 '19 at 18:19
  • @DougStevenson Yes, I reference those in my question, but as I understand, they are not available to the client, correct? I'm using serverless and need to set up my client side app. With the correct config. – paintedbicycle Mar 04 '19 at 18:31
  • You'll need to come up with your own preferred solution on the client. – Doug Stevenson Mar 04 '19 at 18:34
  • @paintedbicycle Did you find a solution? I have the same issue. What approach did you end up taking ? – zd5151 Oct 04 '19 at 17:57
  • @zd5151 No, I didn't. I'm still manually changing the setup before deploy. – paintedbicycle Oct 04 '19 at 18:35
  • @paintedbicycle I found this but it's from an angularjs perspective. I am not sure if it applies to Next.js. URL: https://angularfirebase.com/lessons/deploy-multiple-sites-to-firebase-hosting/ – zd5151 Oct 07 '19 at 18:43
  • Might be worth marking this as a duplicate of https://stackoverflow.com/questions/50516126/auto-config-firebase-sdk-in-react – paintedbicycle Jan 04 '20 at 16:19
  • Does this answer your question? [Auto config Firebase SDK in React](https://stackoverflow.com/questions/50516126/auto-config-firebase-sdk-in-react) – paintedbicycle Jan 04 '20 at 20:53

1 Answers1

6

I've finally tracked down an answer to this.

The best way I've found to handle this in React/nextjs is to use a combination of my ideas #4 and #5 from my original question.

As seen here, firebase has a firebase apps:sdkconfig command on the cli that:

Prints the Google services configuration of a Firebase App.

So knowing that, you can add a script to npm that creates a firebase config file each time the site gets built. Since it knows which firebase project you are currently using on the command line, it knows the version of the config to output when you're deploying.

Then, in your package.json, you can set it to run.

  "scripts": {
   ...
   "build": "npm run getconfig && next build",
   "getconfig": "firebase apps:sdkconfig web --json > ./firebase-config.json",
   ...
  },

Then, in your firebase.js or wherever you're configuring firebase in your app:

// Get the Firebase config from the auto generated file.
const firebaseConfig = require('./firebase-config.json').result.sdkConfig;

// Instantiate a Firebase app.
const firebaseApp = firebase.initializeApp(firebaseConfig);

This works both locally and in the cloud with no manual changes needed other than what you'd already be doing to switch the environment you're using (i.e. firebase use)

You might need to tweak which npm script it runs on or other small things to suit your needs, but this general setup is working great for me with production, staging and development environments.

paintedbicycle
  • 287
  • 3
  • 13