Show Local URL in dev info when no App URL is available

Author: isaacroldan

.changeset/dev-local-url-fallback.md

@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+Show Local URL in dev info when no App URL is available

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

@@ -439,6 +439,7 @@ async function launchDevProcesses({
     appName: config.remoteApp.title,
     organizationName: config.commandOptions.organization.businessName,
     configPath: config.localApp.configPath,
+    localURL: config.network.proxyUrl,
   })
 }
 

packages/app/src/cli/services/dev/ui.tsx

@@ -21,12 +21,14 @@ export async function renderDev({
   appName,
   organizationName,
   configPath,
+  localURL,
 }: DevProps & {
   devSessionStatusManager: DevSessionStatusManager
   appURL?: string
   appName?: string
   organizationName?: string
   configPath?: string
+  localURL?: string
 }) {
   if (!terminalSupportsPrompting()) {
     await renderDevNonInteractive({processes, app, abortController, developerPreview, shopFqdn})
@@ -41,6 +43,7 @@ export async function renderDev({
         appName={appName}
         organizationName={organizationName}
         configPath={configPath}
+        localURL={localURL}
         onAbort={async () => {
           await app.developerPlatformClient.devSessionDelete({appId: app.id, shopFqdn})
         }}

packages/app/src/cli/services/dev/ui/components/DevSessionUI.test.tsx

@@ -554,6 +554,64 @@ describe('DevSessionUI', () => {
     renderInstance.unmount()
   })
 
+  test('hides Local URL in app info when an app URL is available', async () => {
+    // Given
+    const renderInstance = render(
+      <DevSessionUI
+        processes={[]}
+        abortController={new AbortController()}
+        devSessionStatusManager={devSessionStatusManager}
+        shopFqdn="mystore.myshopify.com"
+        appURL="https://my-app.ngrok.io"
+        localURL="http://localhost:3000"
+        appName="My Test App"
+        onAbort={onAbort}
+      />,
+    )
+
+    await waitForInputsToBeReady()
+
+    // When
+    await sendInputAndWait(renderInstance, 10, 'a')
+
+    // Then - only App URL is shown, Local URL is hidden
+    const output = unstyled(renderInstance.lastFrame()!)
+    expect(output).toContain('App URL:')
+    expect(output).toContain('https://my-app.ngrok.io')
+    expect(output).not.toContain('Local URL:')
+    expect(output).not.toContain('http://localhost:3000')
+
+    renderInstance.unmount()
+  })
+
+  test('shows Local URL in app info when no app URL is available', async () => {
+    // Given
+    const renderInstance = render(
+      <DevSessionUI
+        processes={[]}
+        abortController={new AbortController()}
+        devSessionStatusManager={devSessionStatusManager}
+        shopFqdn="mystore.myshopify.com"
+        localURL="http://localhost:3000"
+        appName="My Test App"
+        onAbort={onAbort}
+      />,
+    )
+
+    await waitForInputsToBeReady()
+
+    // When
+    await sendInputAndWait(renderInstance, 10, 'a')
+
+    // Then - Local URL is shown in place of App URL
+    const output = unstyled(renderInstance.lastFrame()!)
+    expect(output).toContain('Local URL:')
+    expect(output).toContain('http://localhost:3000')
+    expect(output).not.toContain('App URL:')
+
+    renderInstance.unmount()
+  })
+
   test('hides URL list when terminal supports hyperlinks', async () => {
     // Given
     mocks.terminalSupportsHyperlinks.mockReturnValue(true)

packages/app/src/cli/services/dev/ui/components/DevSessionUI.tsx

@@ -37,6 +37,7 @@ interface DevSesionUIProps {
   appName?: string
   organizationName?: string
   configPath?: string
+  localURL?: string
   onAbort: () => Promise<void>
 }
 
@@ -49,6 +50,7 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
   appName,
   organizationName,
   configPath,
+  localURL,
   onAbort,
 }) => {
   const {isRawModeSupported: canUseShortcuts} = useStdin()
@@ -230,6 +232,7 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
             tabularData={[
               ['App:', appName ?? ''],
               ['App URL:', appURL ?? ''],
+              ['Local URL:', appURL ? '' : (localURL ?? '')],
               ['Config:', configPath?.split('/').pop() ?? ''],
               ['Org:', organizationName ?? ''],
             ].filter(([, value]) => value)}