Production dotenv ignored

[eMarek]

I am following this instructions regarding environment files for react apps https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used. All nice and clear. I set up my .env.development and .env.production file. Both tested on my computer. Works perfectly. Deployed to Zeit Now and looks like variables in that file are gone. All undefined. There are some mentioned about .env file on this url https://zeit.co/docs/v2/build-step#during-local-development, but it is talking about .env.build. Is that the same? Why is .env.production file totally ignored? How can I set up process.env variables on Zeit Now servers?

[paulogdm]

We don't accept the upload of .env.*. Please use secrets or environment variables instead: https://zeit.co/docs/v2/build-step#using-environment-variables-and-secrets

Example:

{
  "build": {
    "env": {
      "REACT_APP_VERSION": "1.0"
    }
  }
}

[mcsdevv]

Hey @mjurincic, this is undergoing some final testing at the moment, we'll let you know when it's available!

[mjurincic]

Hey @mjurincic, this is undergoing some final testing at the moment, we'll let you know when it's available!

Thanks for info keep the great work, will UI enable to different sets on environment variables to different branches/environment like now you can tie certain domain to specific branch/environment UI, since we have develop/staging/production branches tied to develop.maindomain.com/staging.maindomain.com/www.maindomain.com and every of those needs slightly different config set.

[mcsdevv]

Hey @mjurincic, this is now available! You can read more about it here: https://zeit.co/blog/environment-variables-ui

[mjurincic]

Thanks, one more question if i have now.json env variable mapped to secret and same one (same keey like MYSQL_HOST) defined in UI which one takes precedence.

[paulogdm]

The now.json will take precedence.

[styfle]

Multiple environments are available in Now 18.0.0 and on the dashboard today!

This should solve your problem for needing multiple .env files.

Why is .env.production file totally ignored?

Any file with .env is intentionally ignored from our system for security purposes because these files typically contain plain text secrets. Its better to use our system to manage secrets with now env command or in the dashboard.

[eMarek]

Tested. It works. Thanks. Do you maybe have any plans to "expand variables" as is displayed here in CRA docs. Support for ${npm_package_version} would be nice.

[styfle]

That's an interesting idea!

I think in the case of npm_package_version this can be achieved in a build script since this is assigned from npm.

{
  "version": "1.2.3",
  "scripts": {
    "build": "node -e 'console.log(process.env.npm_package_version)' > version.txt"
  }
}

[eMarek]

This just outputs npm_package_version into version.txt. This does not help me a lot. I would like to reference environment variable in HTML. As you can see on the link there is strict naming convention where only NODE_ENV, PUBLIC_URL and REACT_APP_* variables from process.env are injected into HTML at build time. So in order to see my app version in html meta tag I do next:

• .env.production: REACT_APP_VERSION=${npm_package_version}
• index.html: <meta name="version" content="%REACT_APP_VERSION%" />

This of course does not work on "Zeit now" since REACT_APP_VERSION is undefined or I have to set it manually which loses the whole purpose of it.

[styfle]

Try this:

{
  "version": "1.2.3",
  "scripts": {
    "build": "REACT_APP_VERSION=$npm_package_version react-scripts build"
  }
}

[bigsee]

I am really struggling to deploy a Nuxt project with environment variables in production or preview. I use one to pass attach an authorization header to an API call.

It works absolutely fine in local development using now dev. As soon as I deploy to production, I get a 401. On inspecting the request headers, the env variable is always 'undefined'.

It's in my now.json:

"env": {
    "MY_TOKEN": "@my-token-alias"
  },

...and I refer to process.env.MY_TOKEN in my code.

I have a DB connection URI that is also an env and is working, so I thought the issue might be because there is a space in this one. Tried from the CLI inside quotes. No dice.

Have deleted and re-tried many times, including from the new UI. Any ideas if there is something obvious I'm missing, perhaps about using env in API calls or server vs client side?

C

[eMarek]

In latest version of "zeit now" you do not need now.json anymore for env variables. At least I don't have it. Set them in GUI under Settings > General > Environment Variables.

[bigsee]

Thanks for your response, @eMarek! :)

I was aware of that fact and, in fact, I only had the relevant env variables added via the GUI in development - now dev worked as expected this way.

However, since it would not work in either preview or production environments (which I imagine are both production environments from Nuxt's point-of-view), I had to try every other option available (including adding to now.json). None of them worked.

In the end, I managed to get something working by adding an environment variable to nuxt.config.json like so:

env: {
    myToken: process.env.MY_TOKEN
  }

and changing the reference in the code to process.env.videoAuth, following the Nuxt documentation here.

This seems to have fixed the issue of environment variables being undefined in production, but the solution is still sub-optimal. The opposite is now the case and environment variables are undefined in local development. Seems I cannot have both, even trying things like:

    if (process.browser) { 
        token = process.env.myToken
    }

...or similar. So I have to keep switching them back, which is a pain and cannot be the solution...

[bigsee]

@styfle although OP's question may be answered (and has been marked as such), I believe the problem described by the title hasn't been cleared up. Do you think I should start a new discussion?

I'm conscious that seeing a thread marked as answered might discouraging people from giving it any attention (unless they also have the problem).

[styfle]

I updated my answer. If you have another question feel free to start another discussion 👍