How to identify which app a theme extension belongs to in Liquid?

Extensions
1

Problem

I’m developing a Shopify app with two separate environments: a development app and a production app. Both apps have the same theme app extension (app block), but they need to connect to different API endpoints based on which app is installed.

My scenario:

  • Dev App → Should call http://localhost:3000
  • Prod App → Should call https://my-production-domain.com

The challenge is: How can I determine which app the theme extension belongs to within the Liquid template?

Current workaround (using App-Data Metafield)

I found that I can use App-Data Metafields via the {{ app.metafields }} object:

Step 1: Create App-Data Metafield in the app backend

mutation CreateAppDataMetafield($metafieldsSetInput: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafieldsSetInput) {
    metafields { id namespace key value }
  }
}

# Variables
{
  "metafieldsSetInput": [{
    "namespace": "config",
    "key": "api_endpoint",
    "type": "single_line_text_field",
    "value": "http://localhost:3000", # or production URL
    "ownerId": "gid://shopify/AppInstallation/123"
  }]
}

Step 2: Access in widget.liquid

<script>
  const apiEndpoint = "{{ app.metafields.config.api_endpoint.value }}";
  console.log('API Endpoint:', apiEndpoint);
</script>

Questions

  1. Is there a better/official way to identify which app a theme extension belongs to?
  2. Are there any built-in Liquid variables (like app.id or similar) that I’m missing?
  3. Is using App-Data Metafields the recommended approach for this use case?

I’d appreciate any insights from the Shopify community or official guidance on this!