Issue connecting to dev vs. prod FaunaDB environments in React

Support
1

Hi! I am having issues figuring out how to connect to a “dev” FaunaDB environment while running localhost:8888, and making sure my deployed site at actionify.netlify.app connects to the “prod” FaunaDB environment.

I’ve been following this tutorial: GitHub - netlify/netlify-faunadb-example: Using FaunaDB with netlify functions

At the moment, my functions reference process.env.FAUNADB_SERVER_SECRET, and that works –

exports.handler = async (event, context) => {
  /* configure faunaDB Client with our secret */
  const client = new faunadb.Client({
    secret: process.env.FAUNADB_SERVER_SECRET,
  });

… but the problem is that while I’m running the app on localhost:8888, the data gets written to the same database that actionify.netlify.app writes to.

I experimented with changing the variable name to be process.env.REACT_APP_FAUNADB_SERVER_SECRET and setting a REACT_APP_FAUNADB_SERVER_SECRET=XXXXX in a local .env file, but that did not work – it looks like the variable name needs to be process.env.FAUNADB_SERVER_SECRET

Has anyone else had success differentiating the FaunaDB databases their create-react-app writes to?

2

Perhaps, you can set the value of FAUNADB_SERVER_SECRET based on that other env var. Maybe something like FAUNADB_SERVER_SECRET = $(REACT_APP_FAUNADB_SERVER_SECRET) would work?

3

Thanks @Dennis! And sorry, I am a little confused… do you mean I should try:

exports.handler = async (event, context) => {
  /* configure faunaDB Client with our secret */
  const client = new faunadb.Client({
    FAUNADB_SERVER_SECRET = $(REACT_APP_FAUNADB_SERVER_SECRET),
  });

Or are you saying that I should define FAUNADB_SERVER_SECRET as an environment variable on Netlify and set it equal to $(REACT_APP_FAUNADB_SERVER_SECRET)? But the problem there is that REACT_APP_FAUNADB_SERVER_SECRET is meant to be a local variable accessible only in thee .env file, which isn’t pushed up.

…unless Netlify knows about that local .env file since I am running netlify bundle and netlify deploy, maybe :thinking:

4

Update: I tried:

image
image892×138 4.86 KB

… but not sure how to switch between dev and prod environments from there. That is, I want my localhost:8888 to save to the dev database defined in my .env file, and the the production URL to save to the prod DB whose secret key I had previously saved as the “value” for FAUNADB_SERVER_SECRET.

5

I think he was saying set it during build, based on the existing one. You can set the private variable just in our UI (build & deploy settings page), and it will be set during build BUT only used if you use it and not in git. Then your build could do something like:

export FAUNADB_SERVER_SECRET=${REACT_APP_FAUNADB_SERVER_SECRET} && npm run build

If you don’t explicitly build your functions, this won’t work - so you could instead change the code to use $REACT_APP_FAUNADB_SERVER_SECRET directly instead of using the unset $FAUNADB_SERVER_SECRET, perhaps?

6

Thanks for taking a look here, @fool! I’m going to document what I have set up, since I think I still don’t fully understand what you mean by “set it during build, based on the existing [key].”

  1. In the Netlify dashboard, I set an environment variable called FAUNADB_SERVER_SECRET to link to the secret key corresponding to my FaunaDB database in production.

  2. In my .env file locally, I have a REACT_APP_FAUNADB_SERVER_SECRET environment variable which is set equal to the secret related to my FaunaDB database for development (not production) purposes:
    REACT_APP_FAUNADB_SERVER_SECRET=......

  3. In the terminal, I ran:

export FAUNADB_SERVER_SECRET=${REACT_APP_FAUNADB_SERVER_SECRET} && npm run build

to link FAUNADB_SERVER_SECRET to that variable I have in my local .env file.

  1. My lambda function (based on the official Netlify tutorial) looks like:
    image
    image2078×1018 343 KB

As an aside, I originally tried a couple of times to use secret: process.env.REACT_APP_FAUNADB_SERVER_SECRET, in my code above (on line 9) to have it correspond with the environment variable I defined in .env, but it could never get picked up, for some reason, and I’d see the alert in localhost:8888 telling me that there was no FaunaDB key.

… maybe it was because I needed to run npm run build directly after?

Will try that again and report back.

7

Update:

  1. I changed line 9 from the screenshot in my previous post to be secret: process.env.REACT_APP_FAUNADB_SERVER_SECRET, instead fo secret: process.env.FAUNADB_SERVER_SECRET,

  2. I double checked that my .env file had REACT_APP_FAUNADB_SERVER_SECRET=XXXX defined, with XXXX being the secret key for my “development” database in FaunaDB.

  3. I ran npm run build

  4. I saw an “environment variable not found” message in the terminal:

image
image1546×684 247 KB

◈ Checking your site's environment variables...

◈ Injected **addon** env var: FAUNADB_ADMIN_SECRET

◈ Injected **addon** env var: FAUNADB_CLIENT_SECRET

◈ Injected **build setting** env var: REACT_APP_DOMAIN

◈ Injected **build setting** env var: REACT_APP_clientId

Creating your FaunaDB Database...

Required FAUNADB_SERVER_SECRET enviroment variable not found.

Make sure you have created your Fauna databse with "netlify addons:create fauna"

Then run "npm run bootstrap" to setup your database schema
8

Hey @lpnotes,

Not my area of expertise but I wanted to check in and see how you were doing?

I’ve found a few interesting topics surrounding the FAUNADB_SERVER_SECRET such as this and this. I hope that they can steer you!