Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Environment variables in Theme App Extension

Environment variables in Theme App Extension

test6A
Shopify Partner
23 0 13

 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
12 0 2

Did you find a good solution for this?

rohit_martires
Shopify Partner
49 3 7

yo anyone solved this?

felixdb
Shopify Partner
2 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
20 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.