Feature: framework specific .env file support

[erezrokah]

Is your feature request related to a problem? Please describe.

https://github.com/netlify/cli/pull/924 Attempted to align our .env support with create-react-app. After doing some thinking on how the CLI is built, we might want to handle .env files as a part of the framework detection mechanism, as some frameworks might handle those files differently.

If we find out that all/most frameworks use same the logic we can close this issue

Describe the solution you'd like

Have Netlify CLI mimic the detected framework .env file support and inherit the variables.

Describe alternatives you've considered

Using the same logic for all frameworks

Can you submit a pull request?

Yes

[ercgrat]

The handling of environment variables in Next.js and netlify dev doesn't seem to be compatible. When running netlify dev my local .env variables are overridden by the Netlify variables pulled from my production settings (Site settings > Build & deploy > Environment > Environment variables).

This is at least true for the variables that I need to be accessible in the browser with the NEXT_PUBLIC_ prefix (blog post).

For anyone who runs into this, my workaround is to define a separate environment variable only in my local .env file, and add conditionals to code (womp!).

.env

NEXT_PUBLIC_PAYPAL_ENV=sandbox
NEXT_PUBLIC_PAYPAL_ENV_DEV=sandbox

In my production settings, NEXT_PUBLIC_PAYPAL_ENV=production. The browser value of process.env.NEXT_PUBLIC_PAYPAL_ENV ends up being production when running netlify dev.

workaround:

let env = process.env.NEXT_PUBLIC_PAYPAL_ENV_DEV;
if (!env) {
    env = process.env.NEXT_PUBLIC_PAYPAL_ENV;
}

[erezrokah]

When running netlify dev my local .env variables are overridden by the Netlify variables pulled from my production settings

This is actually a bug. Do you mind opening a new issue for that?

[ercgrat]

Sure thing, created it here: #1386

[Soviut]

@erezrokah rather than doing any detection, I think it would be more useful to be able to use netlify.toml to explicitly configure which env files are loaded.

Perhaps some kind of list that specified the priority to load the env files in. For example:

env_priority = [ ".env", ".env.local" ]

The above would work with Vite priorities and also be extended to support development, production and even custom (eg: staging) modes as well as their respective .local overrides.

env_priority = [ ".env", ".env.local", ".env.development", ".env.development.local" ]

This would also mean you could also configure to not inject any .env files at all with an empty list.

env_priority = []

EDIT: it might also be useful to have this as a cli flag so it could be easily overridden in npm scripts or CI/CD systems.

netlify dev --env .env .env.local

[erezrokah]

Hi @Soviut, that's a good idea and we should probably do both to have:

1. Good defaults
2. Configurability

Are you open to submitting a PR for it? This configuration should go under the [dev] block and only apply for the CLI, correct?

[Soviut]

@erezrokah I noticed that someone else took the assignment here? https://github.com/netlify/cli/issues/4272#issuecomment-1041990010

I'd be happy to collaborate. I don't know the cli code base very well so anyone more aware than me is going to be able to focus more quickly on the areas of the code that affect this.