Load Environment Variables in Theme App Extension && Checkout UI

Shopify Apps
1

Hey, folks!

I’m creating a new app that will use the Shopify app theme extension and the Checkout UI extension. In addition, the app will have an administrative area available for the store. This administrative area implements an “.env” file that stores and controls environment variables with important information for communicating with external APIs.

My two extensions are in the folder: “extensions”, while the application for the admin area is in a different folder, inside “web/frontend”, according to the default app template delivered by the Shopify CLI.

My question at this point is to know if there is any way to access the environment variables that is available for the application used in the store’s admin panel, as mentioned above, in the “.env”.

In case this is not possible, I will have three different places where I will need to store variables data? That is: data that can be different between development environment and production environment.

7 Likes
2

Also need to know this

3

Hi did we find an answer for this?

4

Any updates @Shopify_77 ?

5

Looks like adding a liquid’s variable outside like {% render ‘config’ %} which “development” defined is the only way so far we could do.

6

So I answered a few other posts on this. The short version of it is that I ended up using the Shop’s Metafield to make it work since it can be set from admin and can be read from the UI extension.

The longer version on how to implement it is in this blog post I wrote: https://liquidonate.com/blog/shopify-development-hacks-environment-variable-in-checkout-ui-extension

1 Like
7

Adding my solution here, should it help:

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](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//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//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 :confused: