Update server URL in extensions in dev mode

Dev Platform
1

As per my understanding, there is no easy way to update the “server URL” in app extensions when the app is running using shopify app dev command. With the new Dev platform, the main app workflow has improved a lot, but the app extensions can not talk to the local dev server. We have to manually update the base URL in all the extensions to point to the Cloudflare URL.

It would be great if we could find a way to have the base URLs in extensions point to the main app URL in dev. Is there any plan for the Shopify team to implement this?

2

Hi @Rishabh_Tayal, you can access the app URL from your extensions (during dev) by accessing process.env.APP_URL, this env var is replaced with the current app url at build time by the CLI.

Hope this helps!

3

Thanks @Isaac-Shopify . Will this work in production as well when we build the app using remix vite:build command? How can we make the same code work for both dev and prod?

4

I am getting error Uncaught ReferenceError: process is not defined in theme app extension snippet liquid code.

5

Hi @Rishabh_Tayal , sorry this solution is only for JS extensions (ui_extensions and functions), doesn’t work for theme app extensions.

It does work for production if you provide the real app URL in your build step or as a default if the env var doesn’t exist

6

Figured out a solution for this.

In vite.config.ts

fs.writeFileSync('extensions/theme-extension/assets/config.js', `window.MY_CONFIG = {
  API_BASE_URL: '${process.env.SHOPIFY_APP_URL}'
};`);

And then in the theme app extension, you can use it like this.

const API_BASE_URL = window.MY_CONFIG?.API_BASE_URL || '``https://prod.domain.com``';