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

Jeremy Press

2023-08-28 b6b1dabde0f63ca0ae743aa7f4266ca892d7b5e5

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

Co-authored-by: Jeremy Press <jeremy@replit.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

 .gitignore

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

 quartz/cli/args.js

@@ -76,6 +76,16 @@
    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 @@
      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 @@
        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 @@
  output: string
  serve: boolean
  port: number
  wsPort: number
  remoteDevHost?: string
  concurrency?: number
}