Audit Web Environment Variables DX and Current Functionality

[thedavidprice]

Related to work on #4334 and #4461

cc @dac09

Discussion Topics

• What is the DX we want for Web env var?
• Should we consider .env.default for build (i.e. production deploy)

Deployment test

console.log(process.env.X) where X = ...:

1. env var that isn’t defined anywhere
2. env var that’s defined in hosting provider dashboard
3. env var that’s defined in toml
4. env var that has a prefix
5. evn var that’s in env.default

Goals:

• Define the optimal DX working with Web env vars across local and production contexts
• Audit 1) current behavior of env var handling for deployment and 2) documentation for using Web env vars
• Add CI (unit or functional?) to prevent regression

Deployed Test

NOTE:
As of now the only Env defined in the Netlify Dashboard is DOT_ENV

Need to add TOML_ARRAY and REDWOOD_ENV_PREFIX to Netlify deploy dashboard environment

Netlify Site

https://hardcore-mestorf-245ef2.netlify.app

GitHub Repo

https://github.com/redwoodjs/env-var-test

Home page:
https://github.com/redwoodjs/env-var-test/blob/main/web/src/pages/HomePage/HomePage.tsx

Local Test

yarn rw dev

yarn rw serve (after building)

[thedavidprice]

@dac09 So far, it's all working in production according to docs.

However, I am confused as to why locally I can't access value when using .env.defaults — it was working, then I added a .env and then I could never get it working again even after git clean and deleting .env. Needs diagnosing.

I suspect once I add TOML_ARRAY and REDWOOD_ENV_PREFIX to Netlify dashboard they'll be working. But wanted to start here.

[Tobbe]

This is wrong, right? DOT_ENV should not exist, because it's neither in your toml nor prefixed with REDWOOD_ENV_

DOT_ENV is neither 1 nor 2, so should not be available to the web side (but it should be available to the api side)

That's how I'm interpreting the docs at least

[dac09]

Precisely the problem I was pointing out @Tobbe - there's inconsistencies between how we're saying it should work, and how it actually does.

[thedavidprice]

...in production...

The docs have always referred to production settings. Maybe not clearly enough.

Agree that the discrepancy is confusing.

[Tobbe]

Yes, in production. yarn rw serve is production, no? That's why I made a point of including your red "yarn rw serve" text when I used part of your screenshots.

For yarn rw dev I think your screenshot is correct.

Ohh, hmm, NODE_ENV set to production is the key here, right? I thought you used "yarn rw serve" to mean "deployed to my hosting provider". But you were running yarn rw serve locally too, right?

Deployed to Netlify it does look like it should

[virtuoushub]

To add some color here (I think this is the right place, if not apologies and will open a separate ticket), NODE_ENV being set to production can cause some undesirable behavior when building/deploying Storybook, specifically interaction testing (see: redwoodjs/example-storybook#32).

If I try and manually override this env var, bad things happen. Code such as that listed below makes it so Storybook builds only sometimes work in non production environments.

• https://github.com/redwoodjs/redwood/blob/main/packages/core/config/webpack.common.js#L133-L139
• deltas in https://github.com/redwoodjs/redwood/blob/main/packages/core/config/webpack.development.js / https://github.com/redwoodjs/redwood/blob/main/packages/core/config/webpack.production.js
• https://github.com/redwoodjs/redwood/blob/main/packages/testing/config/storybook/main.js#L142-L145