[Feature]: app dev should update URLs and respect paths

[zirkelc]

What area(s) will this request affect?

App, Running your code locally

What type of change do you want to see?

New feature

Overview

When shopify app dev runs, it creates a tunnel via Cloudfare and updates the app URLs in Partners Dashboard.

The URLs have the following format:

application_url = "https://trash-shopping-health-inspection.trycloudflare.com"

[auth]
redirect_urls = [
  "https://trash-shopping-health-inspection.trycloudflare.com/auth/callback",
  "https://trash-shopping-health-inspection.trycloudflare.com/auth/shopify/callback",
  "https://trash-shopping-health-inspection.trycloudflare.com/api/auth/callback"
]

where the subdomain trash-shopping-health-inspection is a random string that changes on every app dev.

I would like to suggest to make it possible to configure the paths of each URL. For example, instead of /auth/callback it should be possible to use /app/auth/callback or any other paths. Right now it's always / for the application_url and /auth/callback, /auth/shopify/callback and /api/auth/callback for redirect_urls.

It would be nice if there were two CLI options like --app-url-path=/apps or --redirect-url-path=/app/auth/callback to override the default values.
Another option would be, if the CLI updates only the hostname trash-shopping-health-inspection.trycloudflare.com of each URL and doesn't update the paths.

Motivation

I have to work with multiple apps (custom and public apps) on the same backend. In order to re-use the same infrastructure, I have to distinguish the different apps by their ID. I do that by simply adding /apps/<app-id> as prefix to all app URLs.

1. https://trash-shopping-health-inspection.trycloudflare.com/apps/123/
2. https://trash-shopping-health-inspection.trycloudflare.com/apps/456/

These two URLs would go through the same Remix backend and the right config is loaded depending on the <app-id>.

The static URL paths from the CLI make it very hard to make app dev work.

[zirkelc]

Right after opening this issue, I've search through the code to see if I could easily add this feature myself. Of course, I stumbled upon this code:

cli/packages/app/src/cli/services/dev/urls.ts

Lines 145 to 165 in 54b1a9b

	export function generatePartnersURLs(
	baseURL: string,
	authCallbackPath?: string | string[],
	proxyFields?: CurrentAppConfiguration['app_proxy'],
	): PartnersURLs {
	let redirectUrlWhitelist: string[]
	if (authCallbackPath && authCallbackPath.length > 0) {
	const authCallbackPaths = Array.isArray(authCallbackPath) ? authCallbackPath : [authCallbackPath]
	redirectUrlWhitelist = authCallbackPaths.reduce<string[]>((acc, path) => {
	if (path && path.length > 0) {
	acc.push(`${baseURL}${path}`)
	}
	return acc
	}, [])
	} else {
	redirectUrlWhitelist = [
	`${baseURL}/auth/callback`,
	`${baseURL}/auth/shopify/callback`,
	`${baseURL}/api/auth/callback`,
	]
	}

which seems to refer to the auth_callback_path of the shopify.web.toml. It looks like what I need is already available for redirect_urls .

Is is possible to get the same for application_url, like a new field app_path in shopify.web.toml that will get added to the generated tunnel URL?

By the way, I would be willing to submit a PR for this feature :-)

[gonzaloriestra]

Hi! Thanks for the suggestion, I think it makes sense. @nickwesselman what do you think?

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[zirkelc]

@nickwesselman sorry to ping you. Do you think this feature would be possible?

[nickwesselman]

Hi @zirkelc -- Sorry for the delayed reply. I dug into the logic here a bit and confirmed that this is actually already possible in the shopify.web.toml with the auth_callback_path option. For example, if I add the last line here to my shopify.web.toml:

name = "remix"
roles = ["frontend", "backend"]
webhooks_path = "/webhooks"
auth_callback_path = ["/hello/world","/foo/bar"]

Then when I run shopify app dev the URLs are updated to:

[auth]
redirect_urls = [
  "https://social-consortium-monroe-cleaner.trycloudflare.com/hello/world",
  "https://social-consortium-monroe-cleaner.trycloudflare.com/foo/bar"
]

Does this solve your need?

[zirkelc]

Hi @zirkelc -- Sorry for the delayed reply. I dug into the logic here a bit and confirmed that this is actually already possible in the shopify.web.toml with the auth_callback_path option. For example, if I add the last line here to my shopify.web.toml:

name = "remix"
roles = ["frontend", "backend"]
webhooks_path = "/webhooks"
auth_callback_path = ["/hello/world","/foo/bar"]

Then when I run shopify app dev the URLs are updated to:

[auth]
redirect_urls = [
  "https://social-consortium-monroe-cleaner.trycloudflare.com/hello/world",
  "https://social-consortium-monroe-cleaner.trycloudflare.com/foo/bar"
]

Does this solve your need?

Yes, but I would like the same behavior for application_url. See this comment #4219 (comment)

name = "remix"
roles = ["frontend", "backend"]
webhooks_path = "/webhooks"
auth_callback_path = ["/hello/world","/foo/bar"]

# New
app_path = "/foo"

Then shopify app dev should update the application URL:

application_url = "https://trash-shopping-health-inspection.trycloudflare.com/foo"

[nickwesselman]

Sorry sorry, failure to read. Let me confirm with the team that this would not be in conflict with any other plans around the app URL in our roadmap.

[nickwesselman]

Hi @zirkelc -- We are open to the feature but before accepting a PR for this, the team raised a couple additional questions we'd need to answer --

1. Apps can have multiple web.toml, how would we resolve which to use? This isn't an issue for auth_callback_path since they can just be concatenated.
2. Does this affect the UI extension preview server at all? This probably requires testing -- does appending to the app path affect the expected URL for the HMR websocket connection?

• Thinking about this more, probably not -- you could use a path in your App URL without this configuration. But it would be good to confirm.

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[zirkelc]

Hi @nickwesselman

1. Apps can have multiple web.toml, how would we resolve which to use? This isn't an issue for auth_callback_path since they can just be concatenated.

Is there any naming conventions when using multiple web.toml files? Otherwise can we determine the right web.toml from the roles array? I assume the same question applies to webhooks_path if an app has multiple web.toml files.

2. Does this affect the UI extension preview server at all? This probably requires testing -- does appending to the app path affect the expected URL for the HMR websocket connection?>

• Thinking about this more, probably not -- you could use a path in your App URL without this configuration. But it would be good to confirm.

I have no experience with UI extensions, so not really sure what you meant with that. If you can elaborate in more detail, I can verify this.

[github-actions]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action.
→ If there's no activity within a week, then a bot will automatically close this.
Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[zirkelc]

not stale