Get App Url from liquid

[carlos-lg]

In order to make API calls to my App from the app theme extension blocks I need to know the current app URL. In production environment there is no problem since the URL is fixed but for development I have to change manually the URLs in every JS assets for every block when I run the server with "npm run dev". I have been looking for an object in liquid like "app.url" or something similar but there is nothing. I do not want to rely on proxy becasue in production environment it can be change by the merchant and I do not want to have to store my URL in an App metafield every time I run the development server...

Does anyone found a simple way to achieve the automatic app URL change in liquid?

Many thanks!!

[Liam]

Hi Carlos,

Liquid itself doesn't directly provide a way to dynamically fetch the app URL, but you can implement a solution by using a combination of Liquid, JavaScript, and environment variables. A possible strategy could be:

1. Environment Variables: Utilize environment variables in your development and production environments to store the base URL of your app. For local development, you can use a .env file, and for production, you can set these variables in your hosting environment.

2. Liquid File for Configuration: Create a Liquid file (let's call it config.liquid) in your theme extension that outputs the app URL as a JavaScript variable. You can leverage Liquid's ability to read metafields or configuration settings. If you're using metafields, you can update the metafield value with your app's URL during the deployment process using CI/CD pipelines.

3. JavaScript to Fetch URL: In your JavaScript files, fetch the app URL from the global variable set by config.liquid. This allows your JS files to remain unchanged, as they will always refer to the variable for the base URL.

Hope this helps!

[carlos-lg]

Hi Liam!,

Thanks for your answer,

My main problem is during development due to the fact that changes in JS or liquid files are not loaded in frontstore I suppose because of some cache in shopify's workflow. This means I have to rerun "npm run dev" many times to see those changes, but that changes the URL.

I have found a temporary solution using ngrok, but it's not free from problems itself being cloudfare provided solution more convenient. The ideas you point out are interesting but are not straghtforward and I will have to update the dev URL's somwhere every time I run the development server. In any case, I think Shopify should consider adding to liquid files the feature to read an object with APP URL  or some of the sort.