Solved

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

DeeDee-TDY
Shopify Partner
46 4 4

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?

DeeDeeTDY_0-1692373741014.png

 

Accepted Solution (1)
lizk
Shopify Staff
246 58 72

This is an 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?

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 12 (12)

DeeDee-TDY
Shopify Partner
46 4 4
  These are my package dependency versions:
  "@shopify/app": "3.48.2",
    "@shopify/cli": "3.48.2",
    "react": "^17.0.2"

lizk
Shopify Staff
246 58 72

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?

To learn more visit the Shopify Help Center or the Community Blog.

DeeDee-TDY
Shopify Partner
46 4 4

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.

DeeDeeTDY_0-1692397477454.png

 

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
Shopify Staff
246 58 72

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?

To learn more visit the Shopify Help Center or the Community Blog.

DeeDee-TDY
Shopify Partner
46 4 4

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
Shopify Staff
246 58 72

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. shopify.extension.toml — diversified-franchise-app 2023-08-21 11-05-10.png

To learn more visit the Shopify Help Center or the Community Blog.

DeeDee-TDY
Shopify Partner
46 4 4

It looks like they are from a template

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

lizk
Shopify Staff
246 58 72

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?

To learn more visit the Shopify Help Center or the Community Blog.

DeeDee-TDY
Shopify Partner
46 4 4

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

 

lizk
Shopify Staff
246 58 72

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

To learn more visit the Shopify Help Center or the Community Blog.

DeeDee-TDY
Shopify Partner
46 4 4

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

DeeDeeTDY_0-1692739063897.png

DeeDeeTDY_1-1692739096599.png

DeeDeeTDY_2-1692739134463.pngDeeDeeTDY_3-1692739151521.pngDeeDeeTDY_4-1692739182704.png

 

 

lizk
Shopify Staff
246 58 72

This is an 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?

To learn more visit the Shopify Help Center or the Community Blog.