Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

ZEIT

Our mission is to make cloud computing as easy and accessible as mobile computing. You can find our Next.js community here.

ZEIT / General

GitHub deployments doesn't have env variables

GitHub deployments doesn't have env variables

ZEIT/General · January 9, 2019 at 3:37pm

GitHub deployments doesn't have env variables

ZEIT / General · January 9, 2019 at 3:37pm
Hello guys,
I have a problem with a React app (setup with CRA). I have setup Now with GitHub to deploy every push in branches. I have environmental variables on my app and I used Now secrets to hide them. I'm dealing with an issue though:
When Now automatically deploys from the latest push, I got an error in the console saying I have an invalid API Key. By checking the value from a log statement, I can see the API Key is undefined. Therefore the app doesn't work.
However, If I deploy my app manually (by running now), I don't get the error and my app is working fine.
Here is the content of my now.json file:

{
"version": 2,
"name": "meetout",
"alias": "meetout-dev",
"builds": [
{
"src": "package.json",
"use": "@now/static-build"
}
],
"env": {
"REACT_APP_FIREBASE_API_KEY": "@react_app_firebase_api_key",
}
}

Am I missing something with GitHub deployments?

January 9, 2019 at 5:34pm

Could you please give us a minimal example?

I could not reproduce it with my own: https://github.com/paulogdm/chop-my-url/pull/3

Are you sure the secrets exists in the same account or team that is deploying under GH?

  • reply
  • like

January 10, 2019 at 1:55pm

Thanks for your response @paulogdm!

What do you mean by minimal example?

I have additional details: today, I replace the environmental variable by its raw value and it doesn't work too. So it seems that the automatic deploy by Now via GitHub doesn't load the env variables.

I really don't get what is the problem here :|

  • reply
  • like

January 10, 2019 at 3:04pm

Could you try to print the entire process.env?

If the secret "@react_app_firebase_api_key" didn't exist, now would throw an error, cancelling the deployment.

  • reply
  • like

If I print `process.env`, I get that:

{ NODE_ENV: "production", PUBLIC_URL: "" }

Nothing more, nothing less!

If I hard-code my secrets and don't use env variables, all is working fine though.

  • reply
  • like

Are you trying to use it on a BUILD phase?

  • reply
  • like

What do you call Build phase?

If it can help, I'm using create-react-app on this app. Here is the scripts of my `package.json` file:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "now-build": "react-scripts build && mv build dist",
    "deploy": "now && now alias meetout"
  }

  • reply
  • like

The BUILD phase is when now executes now-build to build your app.

I will try to reproduce it right now...

  • reply
  • like

I can repro! Creating a github issue atm.

  • reply
  • like

So, the error comes from the Now for GitHub app then?

  • reply
  • like

I'm sorry, but it seems I'm mistaken. We will prepare a guide for this because it sure put me in a confused state...

How you are using the variable in your code?

  • reply
  • like

You need something like: https://github.com/zeit/docs/blob/master/.babelrc.js#L1 to use env variables.

Edited
  • reply
  • like

I don't know if I have such a file in the code as I'm using CRA.

They hide all the babel and webpack config.

As far as I know, we can use custom environmental variables by prefixing them with `REACT_APP`: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Something that is weird too is that if I deploy the app manually, that is to say by running manually `now`, things work perfectly and the environmental variables are properly loaded. So I'm not sure if adding a Babel file would solve the problem as env variables are loaded when I deploy the app manually.

It's just when I push some code into my GitHub repo and that Now deploys from there that it seems env variables are not loaded.

I admit that it confuses me too!

  • reply
  • like

That was a nice and detailed description. Could you give me access to the repo or it has sensitive/private content?

  • reply
  • like

I've also run into this issue with Environment Variables not available in the BUILD Phase. More info at the [RFC] next.config.js improvement for serverless environment on GitHub: https://github.com/zeit/next.js/issues/5846#issuecomment-451047516

I am using babel-plugin-transform-define like you shared @paulogdm, however, it doesn't get the process.env.* and I am left with hard-coding the values like (hoping at some point they'd pull as desired):

babel.config.js

const env = require('./next.env')
...
['babel-plugin-transform-define', env],

next.env.js:

const __ENV_VARIABLE__ = process.env.ENV_VARIABLE || 'Value Here'
module.exports = {
  __ENV_VARIABLE__: __ENV_VARIABLE__
}

now.json:

"env": {
  "ENV_VARIABLE": "@secret--env_variable"
},

Admittedly at the top of next.env.js I am using require('dotenv').config() which I believe does not work per somewhere else I read, and I am now wondering if it is breaking things. I can try without it later if you'd think it would help.

  • reply
  • like

January 11, 2019 at 3:46pm

https://zeit.co/docs/v2/deployments/configuration#build.env

@thomlom not sure if you and I were having the same issue with Environment Variables, but if you need Environment Variables as part of your build process you need to wrap it in a build object of now.json.

🤯️ 🤯️ 🤯️

"build": {
    "env": {
        "ENV_VARIABLE": "@secret--env_variable"
    }
},

🤯️ 🤯️ 🤯️

  • reply
  • like

Thank you so much @jeromefitz! It works now. This was driving me crazy :)

like-fill
1
  • reply
  • like

💯️

Please note, if you are using now-env locally with now-secrets.json you'll need to have both build and env objects in your now.json at the moment as well.

  • reply
  • like

Log in or sign up to chat