Hi everyone! I’m working on an app as a student that involves a app theme extension, specifically an app embed block.
Due to the app URL constantly changing during development, we would like a way to give the app URL to the app theme extension so the theme extension knows where to send requests to when it needs to talk to my app.
I did a similar thing for a webPixel using the [settings] section in the shopify.extension.toml file, and then setting the app URL via the webPixelUpdate mutation. On the app theme extension side, I don’t know how I would set that URL (I don’t see an equivalent mutation that allows me to update the settings array).
One solution I thought of was storing the app URL in a metafield and then exposing it in the .liquid file associated with my extension, but I’m not sure that’s the correct way to do it.
Any input on how to accomplish this would be appreciated. Thanks!
Sounds like a fun project! I believe storing the app URL in a metafield and reading it in your extension’s Liquid is your best option here.There is no mutation to update app embed block settings directly but you can use the metafieldsSet mutation to update the metafield. Then you’d access the metafield in your Liquid code for the app embed block.
Hope this helps - let us know if you have any other questions
I assume you’re url is changing every time, by creating a Cloudflare tunnel URL. There is, as you’ve discovered, no concept of an ‘environment’ variable you can use here. Whilst updating a metafield every time you run dev IS an option, I’d say it’s not really ideal.
I would personally recommend setting up a long-running cloudflare tunnel (you’ll need a cloudflare account), or an alternative tunnel-ing software.
That way, when running npx shopify app dev, you can pass a specific tunnel in, e.g:
npm run dev – --tunnel-url=https://admin-tosh.myapp.app:8789
Accessing this URL would still need to be hard coded in a sense, but you can just check your dev stores against window.Shopify.shop, and use your development URL, and your production URL for the rest.
There are also more complicated approaches to go down, but I’d say they aren’t really worth the investment, if you’re just building a simple app embed. For example, you could store your source code outside of the extensions folder, and have a build process determine the admin URL, and place the compiled files in the extensions/theme folder!
