[Feature]: Env variables support

[patryk-smc]

What area(s) will this request affect?

Extension

What type of change do you want to see?

New feature

Overview

I thought it would be nice to have env variables support similar to Vite (https://vite.dev/guide/env-and-mode) - those can be set in .env file or in vite config. In Shopify CLI I imagine that they could be set on shopify.app.toml level and possibly in .env file. Then it should replace all import.meta.env... in extension files.

Motivation

Need simpler way to store API endpoint variable depending on the environment (dev/staging/production)

[isaacroldan]

Hey @patryk-smc , there is already a way to do this for UI extensions:

• Use env variables in your extension code as process.env.YOUR_VARIABLE
• Define YOUR_VARIABLE in your environment, either exporting the variable or defining it when running the command:

YOUR_VARIABLE=value shopify app deploy

The CLI will automatically replace process.env.YOUR_VARIABLE with value.

You can also load variables automatically by defining a custom script in your package.json that does it.

Does this work for you?

[patryk-smc]

Hi @isaacroldan
I heard about this option from someone but didn’t use it because it wasn’t documented, and I didn’t want to risk it being removed later, which could cause deployment issues. If this option is permanent, I’ll give it a try.

[isaacroldan]

I'm aware of the lack of documentation for this, sorry about that. But this is stable and shouldn't change in the short term.

[patryk-smc]

@isaacroldan Thanks! It works. So my only suggestion would be to have CLI log in the console that certain env variables are read (both in dev and during deployment). Thanks again for your help.

[isaacroldan]

Unfortunately that's not possible. They way it works is that we pass the contents of process.env (all environment variables) to esbuild. And then esbuild does the replacement while building the extension. So we don't know which specific values are being replaced.

Since it has been solved, i'll close the issue :)