A space to discuss online store customization, theme development, and Liquid templating.
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);
Did you find a good solution for this?
yo anyone solved this?
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!
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 <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.