[Feature request] Document support for environment variables

As requested in [IMPORTANT] Stop creating issues here, use the Shopify Community forum instead · Issue #2521 · Shopify/ui-extensions · GitHub, I am re-raising this issue.

Please find below the details of Supporting Environment Variables for Checkout Extensions · Issue #680 · Shopify/ui-extensions · GitHub

Please list the related package(s)

checkout-ui-extension

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

App that my team develops is deployed to multiple environments (dev, sandbox, staging, prod, etc).

Whenever, I am deploying app to these environments process becomes very manual.

For each environment I need to go and select the different app and then run deploy command.

Also, inside my extension code, api endpoint will change depending upon the environment.

Whenever, I run yarn dev for a particular app, I need to go in extension code and change the api endpoint manually. It would be wonderful if you can provide .env file and we can set env vars for shopify app dev and `shopify app deploy’ commands in the .env file.

Support passing the environment variables to checkout extensions. It is needed if the extension is built for multiple environments and use different APIs.

Describe the changes you are looking for

Ability to pass custom options to shopify app dev and shopify app deploy, it could be using either .env file or separate key-value pairs. These environment variables should flow to the checkout extension code and it should be made available to use.

Describe alternatives you’ve considered

Let’s say extension is deployed on 3 environments dev, sandbox, and prod. For each of these envs checkout extension would want to hit different url dev.mydomain.com, sandbox.mydomain.com, etc.

But whenever app is deployed, I can’t really specify which env to target.

To achieve this I have defined extension settings, whenever app is deployed I can get value for env from extension settings.

But extension settings are not available when running local dev server. So whenever I run the local dev server, I’ve to go and update the env code. It is really frustrating.

Additional context

Various people have implemented hacks - but first party support would be extremely helpful.

For remix server, remix doesn’t support multiple environment variables, only support .env file for local development to override variables.

so you need define environment variables in each servers.

  • local development : .env
  • other environment : set variables to each server

on the other hand, app extension has a solution to load environment variables.

  • npm run shopify app deploy -- -c sandbox uses shopify.app.sandbox.toml and .env.sandbox
  • npm run shopify app deploy -- -c production uses shopify.app.production.toml and .env.production

Hope this helps :slight_smile:

Hi @Tomoyuki_Kashiro - this post is about Checkout Extensions. I don’t think this has anything to do with Remix.

Specifically, I’m interested in how to access those environment variables in the deployed checkout extension. I don’t believe there’s a way to do that in the locked down environment of Checkout Extensions.

Do you think there is a way to access those variables?

@edhgoose

The second half of my reply is about checkout extension.
Give it a try :slight_smile:

@Tomoyuki_Kashiro - thanks, but how do you access the environment variable from the running code in the Shopify Extension?

@edhgoose

The checkout extension building process uses esbuild’s define option under the hood.

.env.sandbox

foo=bar

in checkout extension code

console.log(process.env.foo)

build

$ npm run shopify app deploy -- -c sandbox

the checkout extension code will be replaced .env.sandbox values.

console.log("bar")

you also need setup shopify.app.sandbox.toml.

Well, colour me surprised. It does indeed work.

Critically, console.log(process.env) will not work, but console.log(process.env.WHATEVER) where WHATEVER is defined in your .env file does indeed work.

In that case - my ask of the Shopify team would be to document that behaviour. I will adjust my topic accordingly.

Thank you @Tomoyuki_Kashiro - really appreciate it.

1 Like

This is my own workaround for the missing ENV variable support in Checkout UI / POS extensions:

In short, this CLI tool reads your current environment can creates a shimmed variables file that is read by your extension. Then in your CI/CD you can run this same tool to replace the config file with your production ENV variables:

npx @getverdict/envify --vars API_HOST
1 Like