Environment variables in Theme App Extension

I’m implementing Theme App Extension with app embed block. I’m using tag inside app-embed.liquid to access the Shopfiy product or shop JSON. Inside this script, I need to use some environment variables that can be set at .env file because the variables are different in development and production. How can I access the env variables in script tag in a liquid file? Or there is a way to switch between development and production environments? Please let me know. Thank you.

app-embed.liquid:

10 Likes

Did you find a good solution for this?

1 Like

yo anyone solved this?

1 Like

This solution would not work for any environment variable (I couldn’t find a solution for that) but will work for anything related to a request, which is what you need in the provided example. You can see in the Shopify example app that they are making the request to a proxy URL (“/apps/prapp/reviews”). You can set the proxy destination in your Partners dashboard on a per app basis, in App setup > App proxy. Every app can have their own proxy destination, but keep a shared request path that will be in your JS file. Hope this helps!

2 Likes

Anyone found a good solution to this topic?

The solution is that you can not simply specify url per envrionment.

  1. Add the environment variable to your CI/CD pipeline

  2. Create a bash script called XXX.sh that takes a url as a paramater. For example you can run something like create-url.sh

  3. Add the command to call the script to your package .json like this. code: when called via npm or yarn should run the bash script. You can hard code the url.

  4. In your CI/CD pipeline, call the correct script via env name. ie. in Staging pipeine, run yarn code:staging which will call the bash script and insert the correct url in the file for use prior to deploying the extension.