feat: support configurable ws port and remote development (#429)

Co-authored-by: Jeremy Press <[email protected]>
Co-authored-by: Jacky Zhao <[email protected]>

.gitignore

@@ -7,3 +7,5 @@ tsconfig.tsbuildinfo
 .obsidian
 .quartz-cache
 private/
+.replit
+replit.nix

quartz/cli/args.js

@@ -76,6 +76,16 @@ export const BuildArgv = {
     default: 8080,
     describe: "port to serve Quartz on",
   },
+  wsPort: {
+    number: true,
+    default: 3001,
+    describe: "port to use for WebSocket-based hot-reload notifications",
+  },
+  remoteDevHost: {
+    string: true,
+    default: "",
+    describe: "A URL override for the websocket connection if you are not developing on localhost",
+  },
   bundleInfo: {
     boolean: true,
     default: false,

quartz/cli/handlers.js

@@ -402,7 +402,7 @@ export async function handleBuild(argv) {
       return serve()
     })
     server.listen(argv.port)
-    const wss = new WebSocketServer({ port: 3001 })
+    const wss = new WebSocketServer({ port: argv.wsPort })
     wss.on("connection", (ws) => connections.push(ws))
     console.log(
       chalk.cyan(

quartz/plugins/emitters/componentResources.ts

@@ -107,12 +107,18 @@ function addGlobalPageResources(
         document.dispatchEvent(event)`)
   }
 
+  let wsUrl = `ws://localhost:${ctx.argv.wsPort}`
+
+  if (ctx.argv.remoteDevHost) {
+    wsUrl = `wss://${ctx.argv.remoteDevHost}:${ctx.argv.wsPort}`
+  }
+
   if (reloadScript) {
     staticResources.js.push({
       loadTime: "afterDOMReady",
       contentType: "inline",
       script: `
-          const socket = new WebSocket('ws://localhost:3001')
+          const socket = new WebSocket('${wsUrl}'')
           socket.addEventListener('message', () => document.location.reload())
         `,
     })

quartz/util/ctx.ts

@@ -7,6 +7,8 @@ export interface Argv {
   output: string
   serve: boolean
   port: number
+  wsPort: number
+  remoteDevHost?: string
   concurrency?: number
 }