Studio: Make port configurable

packages/cli/src/commands/experimental/templates/opentelemetry.ts.template

@@ -15,6 +15,8 @@ const {
 } = require('@opentelemetry/semantic-conventions')
 const { PrismaInstrumentation } = require ('@prisma/instrumentation')
 
+const { getConfig } from '@redwoodjs/project-config'
+
 // You may wish to set this to DiagLogLevel.DEBUG when you need to debug opentelemetry itself
 diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.INFO)
 
@@ -25,10 +27,12 @@ const resource = Resource.default().merge(
   })
 )
 
+const studioPort = getConfig().experimental.studio.basePort
 const exporter = new OTLPTraceExporter({
   // Update this URL to point to where your OTLP compatible collector is listening
-  // The redwood development studio (`yarn rw exp studio`) can collect your telemetry at `http://127.0.0.1:4318/v1/traces`
-  url: 'http://127.0.0.1:4318/v1/traces',
+  // The redwood development studio (`yarn rw exp studio`) can collect your
+  // telemetry at `http://127.0.0.1:<PORT>/v1/traces` (default PORT is 4318)
+  url: `http://127.0.0.1:${studioPort}/v1/traces`,
 })
 
 // You may wish to switch to BatchSpanProcessor in production as it is the recommended choice for performance reasons

packages/project-config/src/__tests__/config.test.ts

@@ -69,6 +69,7 @@ describe('getConfig', () => {
             "enabled": false,
           },
           "studio": {
+            "basePort": 4318,
             "graphiql": {
               "authImpersonation": {
                 "authProvider": undefined,

packages/project-config/src/config.ts

@@ -75,6 +75,7 @@ interface AuthImpersonationConfig {
 }
 
 interface StudioConfig {
+  basePort: number
   inMemory: boolean
   graphiql?: GraphiQLStudioConfig
 }
@@ -171,6 +172,7 @@ const DEFAULT_CONFIG: Config = {
       apiSdk: undefined,
     },
     studio: {
+      basePort: 4318,
       inMemory: false,
       graphiql: {
         endpoint: 'graphql',

packages/studio/api/graphql/yoga.ts

@@ -149,6 +149,7 @@ export const setupYoga = (fastify: FastifyInstance) => {
       }
 
       type StudioConfig {
+        basePort: Int!
         inMemory: Boolean
         graphiql: GraphiQLConfig
       }

packages/studio/api/index.ts

@@ -1,13 +1,16 @@
+import path from 'node:path'
+
+import fastifyStatic from '@fastify/static'
 import Fastify from 'fastify'
 import type { FastifyInstance } from 'fastify'
 import open from 'open'
 
 import withApiProxy from './fastify/plugins/withApiProxy'
-import reactRoutes from './fastify/react'
 import spanRoutes from './fastify/spanIngester'
 import yogaRoutes from './fastify/yoga'
 import { setupYoga } from './graphql/yoga'
-import { getWebConfig } from './lib/config'
+import { getStudioConfig, getWebConfig } from './lib/config'
+import { rewriteWebToUsePort } from './lib/rewriteWebToUsePort'
 import {
   registerMailRelatedWatchers,
   startServer as startMailServer,
@@ -16,7 +19,6 @@ import {
 import { runMigrations } from './migrations'
 
 const HOST = 'localhost'
-const PORT = 4318
 
 let fastify: FastifyInstance
 
@@ -59,20 +61,26 @@ export const start = async (
     rewritePrefix: '/' + graphqlEndpoint.split('/').slice(3).join('/'),
   })
 
+  const studioPort = getStudioConfig().basePort
+  const webPath = path.join(__dirname, '..', '..', 'web')
+
+  rewriteWebToUsePort(webPath, studioPort)
+
   // GraphQL
   const yogaServer = setupYoga(fastify)
 
   // Routes
   fastify.register(spanRoutes)
   fastify.register(yogaRoutes, { yoga: yogaServer })
-  fastify.register(reactRoutes)
+  // Statically serve the web side (React)
+  fastify.register(fastifyStatic, { root: webPath })
 
-  fastify.listen({ port: PORT, host: HOST })
+  fastify.listen({ port: studioPort, host: HOST })
   fastify.ready(() => {
-    console.log(`Studio API listening on ${HOST}:${PORT}`)
+    console.log(`Studio API listening on ${HOST}:${studioPort}`)
 
     if (autoOpen) {
-      open(`http://${HOST}:${PORT}`)
+      open(`http://${HOST}:${studioPort}`)
     }
   })
 

packages/studio/api/lib/rewriteWebToUsePort.ts

@@ -0,0 +1,12 @@
+import fs from 'fs'
+import path from 'path'
+
+export function rewriteWebToUsePort(webPath: string, studioPort: number) {
+  const indexHtmlPath = path.join(webPath, 'index.html')
+  let indexHtml = fs.readFileSync(indexHtmlPath, 'utf8')
+  indexHtml = indexHtml.replace(
+    'RWJS_STUDIO_BASE_PORT=4318',
+    'RWJS_STUDIO_BASE_PORT=' + studioPort
+  )
+  fs.writeFileSync(indexHtmlPath, indexHtml)
+}

packages/studio/api/mail/index.ts

@@ -1,5 +1,6 @@
 import path from 'node:path'
 
+import { getStudioConfig } from 'api/lib/config'
 import chokidar from 'chokidar'
 import fs from 'fs-extra'
 import { simpleParser as simpleMailParser } from 'mailparser'
@@ -38,8 +39,11 @@ export function startServer() {
       })
     },
   })
-  smtpServer.listen(4319, undefined, () => {
-    console.log('Studio SMTP Server listening on 4319')
+
+  const port = getStudioConfig().basePort + 1
+
+  smtpServer.listen(port, undefined, () => {
+    console.log('Studio SMTP Server listening on ' + port)
   })
 }
 

packages/studio/api/types.ts

@@ -126,6 +126,7 @@ export interface AuthImpersonationConfig {
 }
 
 export interface StudioConfig {
+  basePort: number
   inMemory: boolean
   graphiql?: GraphiQLStudioConfig
 }

packages/studio/web/index.html

@@ -5,6 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="https://redwoodjs.com/images/diecut.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RedwoodJS Studio</title>
+    <!-- The port number below will be replaced before serving the web side -->
+    <script>window.RWJS_STUDIO_BASE_PORT=4318</script>
   </head>
   <body class="h-full">
     <div id="root" class="min-w-full max-w-full"></div>

packages/studio/web/src/Pages/GraphiQL.tsx

@@ -24,8 +24,9 @@ const DEFAULT_QUERY = `{
 }`
 
 function GraphiQL() {
+  const port = window.RWJS_STUDIO_BASE_PORT
   const { data } = useQuery(GET_AUTH)
-  let headers = undefined as undefined | Record<string, string>
+  let headers: undefined | Record<string, string> = undefined
 
   if (data && data.generateAuthHeaders) {
     const { authProvider, authorization, cookie } = data.generateAuthHeaders
@@ -46,20 +47,18 @@ function GraphiQL() {
     }
 
     if (headers) {
-      console.debug('headers', headers)
-      console.debug('headers JSON', JSON.stringify(headers))
       return (
         <RedwoodGraphiQL
           headers={JSON.stringify(headers)}
-          endpoint="http://localhost:4318/proxies/graphql"
+          endpoint={`http://localhost:${port}/proxies/graphql`}
           defaultQuery={DEFAULT_QUERY}
         />
       )
     }
 
     return (
       <RedwoodGraphiQL
-        endpoint="http://localhost:4318/proxies/graphql"
+        endpoint={`http://localhost:${port}/proxies/graphql`}
         defaultQuery={DEFAULT_QUERY}
       />
     )

packages/studio/web/src/main.tsx

@@ -25,7 +25,7 @@ import Overview from './Pages/Overview'
 import Performance from './Pages/Performance'
 
 const client = new ApolloClient({
-  uri: 'http://localhost:4318/graphql',
+  uri: `http://localhost:${window.RWJS_STUDIO_BASE_PORT}/graphql`,
   cache: new InMemoryCache({
     typePolicies: {
       Span: {

packages/studio/web/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+declare global {
+  interface Window {
+    RWJS_STUDIO_BASE_PORT: number
+  }
+}
+
+export {}