Environment variables in Theme App Extension

test6A
Shopify Partner
23 0 12

 I'm implementing Theme App Extension with app embed block. I'm using <script> 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:

<script type="text/javascript">

    const URL = "https://my-server-url.com";  // This URL is different between development and production

    async  function main() {  
        {% assign productId = product.id|append: "" %}
        const productId = {{ productId| json}};
        fetchProduct(URL, productId);
    }

    async function fetchProduct(productId) {
         const response = await fetch(URL, {
              method: 'GET',
              headers: {
                  'Content-Type': 'application/json',
                  'Accept': 'application/json'
              }            
         });
         return response.json();
    }

    window.addEventListener("load", main);

 

Replies 5 (5)

m20io
Shopify Partner
10 0 2

Did you find a good solution for this?

rohit_martires
Shopify Partner
49 3 7

yo anyone solved this?

felixdb
Shopify Partner
1 0 2

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!

HerculesApps
Shopify Partner
19 1 14

Anyone found a good solution to this topic?

gidizim
Shopify Partner
7 0 1

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 <url>

3. Add the command to call the script to your package .json like this. code:<environment> 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.