How to use environment variables in Checkout UI Extension apps

stijn_code
Shopify Partner
3 0 0
Hi there,

I'm trying to find a better way for my team to update the version while deploying my Checkout UI extension app.

I created a small deploy script for this that does a version number prompt. First of all, it turns out that you cannot use numbers with dots (e.g. 1.2.1).

Secondly, I don't really understand where we can use the Environment Variables, as described after each command in this documentation. For the --version flag this should be SHOPIFY_FLAG_VERSION, but as soon as I add it to my .env file it is not used.

I also don't see a command to push my .env or something like that, only to show or pull.

My question now is what exactly are those environment variables used for?


Thanks!
Replies 3 (3)

dylanpierce
Shopify Partner
206 3 91

We also have this question, because we need to make network calls from the Checkout UI Extension to our API as part of the checkout customization.

Without the ability to define an environment variable, we're not able to define a different URL for each of these environments (development, staging vs production).

Otherwise we're relying on hardcoded strings to pass the API URL, which is very dangerous and error prone to be checked into version control.

The closest documented option seems to be the Checkout Settings API, but that's configurable by merchants. Env variables are supposed to be used by developers internally, but I'm not seeing a way to define variables for use within the UI Extension itself.

Founder of Real ID - Verify your customer's real IDs easily & securely with modern AI

theaisyaaziz
Shopify Partner
12 1 4

So I ended up using the Shop's Metafield to handle it. I don't like using the Settings as merchant would need to configure it themselves on the Checkout editor. There's a huge chance that it'll be wrongly set.

Here's a blog post I made for this: 
https://liquidonate.com/blog/shopify-development-hacks-environment-variable-in-checkout-ui-extension

johnmcguin88
Shopify Partner
8 1 1

In case it helps, I landed at a solution that I think I like better than metafields for now. Obviously Shopify supporting this would be ideal / feels like table stakes, but as a workaround I think I like this better than using metafields and writing app code for this.

 

Where I landed was to use `envsubst` with a template file. The template file gets committed while the runtime file does not as it's generated. I pair this with a script that I can run as needed in CI and whatnot (or before `deploy`) for example. My `dev` script now looks like

```
"API_URL=http://localhost:4000 npm run env:setup && shopify app dev"

```

 

where `env:setup` invokes the script "./scripts/setup_ui_extension_environment.sh"

 

which runs

#!/usr/bin/env bash
template="extensions/<your-extension>/src/config.template.txt"
config="extensions/<your_extension>/src/config.ts"

if [ -z "${API_URL}" ]; then
echo -e "\033[0;31mMust set API_URL environment variable"
exit 1
fi

envsubst < "$template" > extensions/<your-extension>/src/config.ts

echo -e "\033[0;32mWrote $API_URL as API_URL from $template to $config"

 

Hope this helps others! Bummer it's not supported 😕