Include websocket URL in dev session create API call

packages/app/src/cli/api/graphql/app-dev/generated/dev-session-create.ts

@@ -7,6 +7,7 @@ import {TypedDocumentNode as DocumentNode} from '@graphql-typed-document-node/co
 export type DevSessionCreateMutationVariables = Types.Exact<{
   appId: Types.Scalars['String']['input']
   assetsUrl: Types.Scalars['String']['input']
+  websocketUrl?: Types.InputMaybe<Types.Scalars['String']['input']>
 }>
 
 export type DevSessionCreateMutation = {
@@ -33,6 +34,11 @@ export const DevSessionCreate = {
           variable: {kind: 'Variable', name: {kind: 'Name', value: 'assetsUrl'}},
           type: {kind: 'NonNullType', type: {kind: 'NamedType', name: {kind: 'Name', value: 'String'}}},
         },
+        {
+          kind: 'VariableDefinition',
+          variable: {kind: 'Variable', name: {kind: 'Name', value: 'websocketUrl'}},
+          type: {kind: 'NamedType', name: {kind: 'Name', value: 'String'}},
+        },
       ],
       selectionSet: {
         kind: 'SelectionSet',
@@ -51,6 +57,11 @@ export const DevSessionCreate = {
                 name: {kind: 'Name', value: 'assetsUrl'},
                 value: {kind: 'Variable', name: {kind: 'Name', value: 'assetsUrl'}},
               },
+              {
+                kind: 'Argument',
+                name: {kind: 'Name', value: 'websocketUrl'},
+                value: {kind: 'Variable', name: {kind: 'Name', value: 'websocketUrl'}},
+              },
             ],
             selectionSet: {
               kind: 'SelectionSet',

packages/app/src/cli/api/graphql/app-dev/queries/dev-session-create.graphql

@@ -1,5 +1,5 @@
-mutation DevSessionCreate($appId: String!, $assetsUrl: String!) {
-  devSessionCreate(appId: $appId, assetsUrl: $assetsUrl) {
+mutation DevSessionCreate($appId: String!, $assetsUrl: String!, $websocketUrl: String) {
+  devSessionCreate(appId: $appId, assetsUrl: $assetsUrl, websocketUrl: $websocketUrl) {
     userErrors {
       message
       on

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

@@ -183,7 +183,7 @@ export async function devUIExtensions(options: ExtensionDevOptions): Promise<voi
   })
 }
 
-function getWebSocketUrl(url: ExtensionDevOptions['url']) {
+export function getWebSocketUrl(url: string) {
   const websocketURL = new URL('/extensions', url)
   websocketURL.protocol = 'wss:'
 

packages/app/src/cli/services/dev/extension/server/middlewares.ts

@@ -2,6 +2,7 @@ import {getExtensionPointRedirectUrl, getExtensionUrl, getRedirectUrl, sendError
 import {GetExtensionsMiddlewareOptions} from './models.js'
 import {getUIExtensionPayload} from '../payload.js'
 import {getHTML} from '../templates.js'
+import {getWebSocketUrl} from '../../extension.js'
 import {fileExists, isDirectory, readFile, findPathUp} from '@shopify/cli-kit/node/fs'
 import {IncomingMessage, ServerResponse, sendRedirect, send} from 'h3'
 import {joinPath, extname, moduleDirectory} from '@shopify/cli-kit/node/path'
@@ -199,7 +200,7 @@ export function getExtensionPayloadMiddleware({devOptions, getExtensions}: GetEx
           url: new URL('/extensions', devOptions.url).toString(),
         },
         socket: {
-          url: getWebsocketUrl(devOptions),
+          url: getWebSocketUrl(devOptions.url),
         },
         devConsole: {
           url: new URL('/extensions/dev-console', devOptions.url).toString(),
@@ -245,10 +246,3 @@ export function getExtensionPointMiddleware({devOptions, getExtensions}: GetExte
     await sendRedirect(response.event, url, 307)
   }
 }
-
-function getWebsocketUrl(devOptions: GetExtensionsMiddlewareOptions['devOptions']) {
-  const socket = new URL('/extensions', devOptions.url)
-  socket.protocol = 'wss:'
-
-  return socket.toString()
-}

packages/app/src/cli/services/dev/processes/dev-session/dev-session-process.test.ts

@@ -90,9 +90,12 @@ describe('pushUpdatesForDevSession', () => {
     abortController = new AbortController()
     devSessionStatusManager = new DevSessionStatusManager()
     options = {
+      app: {} as AppLinkedInterface,
+      apiKey: 'test-api-key',
       developerPlatformClient,
       appWatcher,
       storeFqdn: 'test.myshopify.com',
+      url: 'https://test.dev',
       appId: 'app123',
       organizationId: 'org123',
       appPreviewURL: 'https://test.preview.url',
@@ -410,6 +413,7 @@ describe('pushUpdatesForDevSession', () => {
         modules: [
           {
             uid: 'test-ui-extension-uid',
+            uuid: undefined,
             assets: 'test-ui-extension-uid',
             handle: updatedExtension.handle,
             type: updatedExtension.externalType,
@@ -469,8 +473,7 @@ describe('pushUpdatesForDevSession', () => {
       shopFqdn: 'test.myshopify.com',
       appId: 'app123',
       assetsUrl: 'https://gcs.url',
-      manifest: expect.any(Object),
-      inheritedModuleUids: [],
+      websocketUrl: 'wss://test.dev/extensions',
     })
   })
 

packages/app/src/cli/services/dev/processes/dev-session/dev-session.ts

@@ -5,6 +5,7 @@ import {AppEvent, AppEventWatcher, ExtensionEvent} from '../../app-events/app-ev
 import {compressBundle, getUploadURL, uploadToGCS, writeManifestToBundle} from '../../../bundle.js'
 import {DevSessionCreateOptions, DevSessionUpdateOptions} from '../../../../utilities/developer-platform-client.js'
 import {AppManifest} from '../../../../models/app/app.js'
+import {getWebSocketUrl} from '../../extension.js'
 import {endHRTimeInMs, startHRTime} from '@shopify/cli-kit/node/hrtime'
 import {ClientError} from 'graphql-request'
 import {JsonMapType} from '@shopify/cli-kit/node/toml'
@@ -276,16 +277,23 @@ export class DevSession {
       const {manifest, inheritedModuleUids, assets} = await this.createManifest(appEvent)
       const signedURL = await this.uploadAssetsIfNeeded(assets, !this.statusManager.status.isReady)
 
-      const payload = {
-        shopFqdn: this.options.storeFqdn,
-        appId: this.options.appId,
-        assetsUrl: signedURL,
-        manifest,
-        inheritedModuleUids,
-      }
+      const websocketUrl = getWebSocketUrl(this.options.url)
       if (this.statusManager.status.isReady) {
+        const payload: DevSessionUpdateOptions = {
+          shopFqdn: this.options.storeFqdn,
+          appId: this.options.appId,
+          assetsUrl: signedURL,
+          manifest,
+          inheritedModuleUids,
+        }
         return this.devSessionUpdateWithRetry(payload)
       } else {
+        const payload: DevSessionCreateOptions = {
+          shopFqdn: this.options.storeFqdn,
+          appId: this.options.appId,
+          assetsUrl: signedURL,
+          websocketUrl,
+        }
         return this.devSessionCreateWithRetry(payload)
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/app/src/cli/utilities/developer-platform-client.ts

@@ -167,7 +167,7 @@ interface DevSessionSharedOptions {
 
 export interface DevSessionCreateOptions extends DevSessionSharedOptions {
   assetsUrl?: string
-  manifest: AppManifest
+  websocketUrl?: string
 }
 
 export interface DevSessionUpdateOptions extends DevSessionSharedOptions {

packages/app/src/cli/utilities/developer-platform-client/app-management-client.ts

@@ -1017,12 +1017,17 @@ export class AppManagementClient implements DeveloperPlatformClient {
     return appDeepLink({id, organizationId})
   }
 
-  async devSessionCreate({appId, assetsUrl, shopFqdn}: DevSessionCreateOptions): Promise<DevSessionCreateMutation> {
+  async devSessionCreate({
+    appId,
+    assetsUrl,
+    shopFqdn,
+    websocketUrl,
+  }: DevSessionCreateOptions): Promise<DevSessionCreateMutation> {
     const appIdNumber = String(numberFromGid(appId))
     return this.appDevRequest({
       query: DevSessionCreate,
       shopFqdn,
-      variables: {appId: appIdNumber, assetsUrl: assetsUrl ?? ''},
+      variables: {appId: appIdNumber, assetsUrl: assetsUrl ?? '', websocketUrl},
       requestOptions: {requestMode: 'slow-request'},
     })
   }