Get App URL from the Checkout UI extension

Shopify Apps
,

Topic summary

Problem: Developers need a dynamic way for a Checkout UI Extension to access the app’s backend URL without hardcoding it.

Current state: Multiple participants report no client-side API to retrieve the app URL directly within Checkout UI Extensions.

Workarounds discussed:

  • Environment/config approach: Use Shopify CLI deploy with a named config and a linked .env file, then access the value via process.env.. One suggestion is to check process.env.APP_URL.
  • Metafield approach: Store the URL in the Shop’s metafield and read it from the extension; a blog post guide was shared.

Key references: Shopify CLI deploy --config documentation link and a blog post detailing the metafield-based method are central to applying these workarounds.

Outcome and status:

  • Some developers still rely on hardcoded URLs.
  • A follow-up question asks how to apply the metafield method in production; no answer yet.
  • No official or built-in solution confirmed; discussion remains open-ended.
Summarized with AI on December 12. AI used: gpt-5.
1

Can anyone help to understand how can make a request to the app backend from the Checkout UI Extension? I mean I can make a request if I will hardcode the app URL in the extension code. But how to retrieve the URL dynamically?

1 Like
2

Hi. I have the same problem. Have you found any solution?

3

Unfortunately no, I had to use a hardcoded URL

4

I also could not find a client-side API to get the app’s URL within my Checkout UI Extension.

You might try using a configuration file / environment file to deploy your extension with your app’s URL. Shopify’s deploy command has a --config flag where you can pass the name of a configuration. This comment outlines how you can create a .env file that’s linked to a config.

Then you could access that .env variable within your Checkout UI Extension like this: process.env.<your_env_file_var_name>.

5

try checking the value for process.env.APP_URL, it should have your apps URL

6

So whoever still facing the same problem, I ended up using the Shop’s Metafield to handle it. Here’s a blog post I made for this: https://liquidonate.com/blog/shopify-development-hacks-environment-variable-in-checkout-ui-extension

7

Can you share on how to use it on a production env?