How to access the application_url from my embedded app's javascript & call my public API route?

[colton007]

Hi, I have an app that saves some data about the store (eg icon type) via the Shopify admin page for my app (using ReactJS)

I expose a public API route that will return this icon type for a given store (by its domain) who installs my app.

I have an embedded app that displays this icon type in the store's front-end pages.  This embedded app has a .liquid file which loads the related .js and .css into the browser.

When the .js loads it needs to create an API request to my public API to fetch the 'icon type'.

The domain of the public API is given by the Shopify application_url which lives in the shopify.app.toml file.

But in dev this url changes on every deploy (run npm dev) since I have 'automatically_update_urls_on_dev = true' and in production it will be a different url.

How do I know what the application_url is from my embedded app's javascript (runs in the browser) or the related .liquid file (and pass it to the .js) so I can create the API request in the browser to my public API on my app?

[Stephen2020]

You can get and return it in the loader function of a router:

const applicationUrl = process.env.SHOPIFY_APP_URL ?? null;
return json({ applicationUrl });

Then pass it with the useLoaderData hook into your react component part.

 const { applicationUrl } = useLoaderData();