App Bridge Configuration UI not linked correctly on production test store, but is working on dev sto

[DeeDee-TDY]

I am a corporate developer, new to Shopify, with a Shopify Plus Enterprise Platform Plan plan.
I created and tested an extension only app using the new Product Discount Function API and deployed/tested on a dev store. The code started with Shopify's 'Build a discounts experience' section which, I believe, automatically included App Bridge UI components. Everything functioned fine in dev store testing.
Next, I chose to distribute with 'Custom distribution' from the partner portal link and received a Shopify install link. Using the link, the Shopify custom app installed on my production store with no issues.
However, when accessing Discounts -> Create discount, and selecting to create discount using the new app, an 'Example Domain' information page appeared instead of the discount configuration page which I believe may be something wrong with App Bridge UI links. Can anyone help with the functions configuration UI not displaying on a production test store? Should the function UI be working after store distribution?

[DeeDee-TDY]

  These are my package dependency versions:

  "@shopify/app": "3.48.2",

    "@shopify/cli": "3.48.2",

    "react": "^17.0.2"

[lizk]

Hi there 👋

It looks like your UI path is pointing example.com

I just wanted to clarify a few things, to help figure out what may be going on here!

I created and tested an extension only app
Did you later add the Remix App Template? 

Everything functioned fine in dev store testing.
Could you confirm that on your dev store you were able to navigate to the page to create a new product discount correctly?

Could you share what your ui.paths are set to in your extensions/product-discount/shopify.extension.toml?

[DeeDee-TDY]

Thank you for the questions.

1.Did you later add the Remix App Template? 

No, the recent instruction had everything downloaded as one big application package including Remix.

2.Could you confirm that on your dev store you were able to navigate to the page to create a new product discount correctly?

Yes, below is a screenshot of the Create Discount configuration screen on the dev store.

TOML file looks like this:

# Learn more about configuring your checkout UI extension:
# https://shopify.dev/api/checkout-extensions/checkout/configuration

# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2023-07"

[[extensions]]
type = "ui_extension"
name = "checkout-ui"
handle = "checkout-ui"

# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview

[[extensions.targeting]]
module = "./src/CheckoutCarrierAccount.jsx"
target = "purchase.checkout.shipping-option-list.render-after"

# Loads metafields on checkout resources, including the cart,
# products, customers, and more. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields
[[extensions.metafields]]
namespace = "details"
key = "acct"

[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access
api_access = true

# Gives your extension access to make external network calls, using the
# JavaScript `fetch()` API. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access
# network_access = true

# Defines settings that will be collected from merchants installing
# your extension. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#settings-definition

# [extensions.settings]
# [[extensions.settings.fields]]
# key = "banner_title"
# type = "single_line_text_field"
# name = "Banner title"
# description = "Enter a title for the banner"

[lizk]

Hi 

1. That looks like the toml file for a Checkout UI extension. Could you share the toml file in the extensions/<your-function-name> folder?
It should look similar to this.

name = "product-discount"
type = "product_discounts"
api_version = "2023-07"

[build]
command = ""
path = "dist/function.wasm"

[ui.paths]
create = "/"
details = "/"

I have attempted to reproduce this issue, but I am not totally clear on all the actions that you took to get to the current state. Could you share exactly what steps you took to get here? The exact CLI commands, any modifications you made to the code ect?

[DeeDee-TDY]

Apologies - here is the app toml file:

# Learn more about configuring your app at https://shopify.dev/docs/apps/tools/cli/configuration

name = "tdy-discount"
client_id = "1137f855bb29d98869b4d0407cd1ff6d"
application_url = "https://wars-por-alberta-bring.trycloudflare.com"
embedded = true

[access_scopes]
# Learn more at https://shopify.dev/docs/apps/tools/cli/configuration#access_scopes
scopes = "write_products,write_discounts"

[auth]
redirect_urls = [
"https://wars-por-alberta-bring.trycloudflare.com/auth/callback",
"https://wars-por-alberta-bring.trycloudflare.com/auth/shopify/callback",
"https://wars-por-alberta-bring.trycloudflare.com/api/auth/callback"
]

[webhooks]
api_version = "2023-07"

[pos]
embedded = false

[build]
automatically_update_urls_on_dev = true
dev_store_url = "checkout-ext-dk.myshopify.com"

[lizk]

Hi there!
Sorry for the back and forth but could you please share the toml (shopify.extension.toml) file inside the extensions folder for the app that you are having issues with. 

The above you shared is the shopify.app.toml file inside the root folder.

I need to verify that the [ui.paths] configured in the shopify.extension.toml are set up correctly. 

[DeeDee-TDY]

It looks like they are from a template

[ui.paths]
create = "/app/volume-discount/:functionId/new"
details = "/app/volume-discount/:functionId/:id"

[lizk]

Thank you! 

And to confirm, when you installed the App on the second store did you see the example.com UI directly after install or *only* when you navigate to create a new discount type?

[DeeDee-TDY]

Only when I navigate to create a new discount type and choose the new app to create the discount.

[lizk]

When you view the new apps home page, you are seeing the default home template?

[DeeDee-TDY]

I think no, I'm seeing the Example.com page when opening app home page too:

[lizk · Accepted solution]

Could you navigate to your partner dashboard and verify that in the App Setup > App URL the App URL is set correctly.

From the functionality you are seeing it would appear that the App URL is set to example.com. You will want to update that to the real URL. 

If you are wanting to use a cloudflare tunnel with the Shopify CLI, it can automatically update the URLs for you. You can run npm run dev -- --reset and select yes to Have Shopify automatically update your app's URL in order to create a preview experience?