Fix: server nuxt client directly without proxy

client/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-white max-h-screen h-screen overflow-hidden bg-bg">
+    <div class="h-screen max-h-screen overflow-hidden text-white bg-bg">
     <app-appbar />
 
     <app-side-rail v-if="isShowingSideRail" class="hidden md:block" />
@@ -368,6 +368,7 @@ export default {
     initializeSocket() {
       this.socket = this.$nuxtSocket({
         name: process.env.NODE_ENV === 'development' ? 'dev' : 'prod',
+        channel: this.$config.routerBasePath,
         persist: 'main',
         teardown: false,
         transports: ['websocket'],

client/modules/rewritePwaManifest.js

@@ -33,13 +33,12 @@ export default function rewritePwaManifest () {
 
       const currentBasePath = manifest.start_url.split('?')[0]
 
-      if (currentBasePath !== routerBasePath) {
+      if (currentBasePath !== (routerBasePath || '/')) {
         // Rewrite start_url and icons paths
-        manifest.start_url = `${routerBasePath || '/'}${manifest.start_url.slice(currentBasePath.length)}`
+        manifest.start_url = `${routerBasePath}${manifest.start_url.slice(currentBasePath.length)}`
         for (const icon of manifest.icons) {
-          icon.src = currentBasePath.startsWith('.')
-            ? `${routerBasePath}${icon.src}` // Initially, the start_url is `./`
-            : `${routerBasePath}/${icon.src.slice(currentBasePath.length)}`
+          const path = icon.src.startsWith('/') ? icon.src.slice(currentBasePath.length) : icon.src
+          icon.src = `${routerBasePath}${path}`
         }
 
         // Update manifest file

client/nuxt.config.js

@@ -117,11 +117,11 @@ module.exports = ({ command }) => ({
       background_color: '#373838',
       icons: [
         {
-          src: '/icon.svg',
+          src: 'icon.svg',
           sizes: "any"
         },
         {
-          src: '/icon64.png',
+          src: 'icon64.png',
           type: "image/png",
           sizes: "64x64"
         }
@@ -151,7 +151,7 @@ module.exports = ({ command }) => ({
     }
   },
   server: {
-    port: process.env.CLIENT_PORT || 3000,
+    port: process.env.NODE_ENV === 'production' ? 80 : 3000,
     host: '0.0.0.0'
   },
 

index.js

@@ -12,7 +12,6 @@ if (isDev) {
   if (devEnv.FFProbePath) process.env.FFPROBE_PATH = devEnv.FFProbePath
   process.env.SOURCE = 'local'
   process.env.ROUTER_BASE_PATH = devEnv.RouterBasePath || ''
-  process.env.CLIENT_PORT = devEnv.ClientPort || 8080
 }
 
 const PORT = process.env.PORT || 80
@@ -23,9 +22,8 @@ const UID = process.env.AUDIOBOOKSHELF_UID
 const GID = process.env.AUDIOBOOKSHELF_GID
 const SOURCE = process.env.SOURCE || 'docker'
 const ROUTER_BASE_PATH = process.env.ROUTER_BASE_PATH || ''
-const CLIENT_PORT = process.env.CLIENT_PORT || 3000
 
 console.log('Config', CONFIG_PATH, METADATA_PATH)
 
-const Server = new server(SOURCE, PORT, HOST, UID, GID, CONFIG_PATH, METADATA_PATH, ROUTER_BASE_PATH, CLIENT_PORT)
+const Server = new server(SOURCE, PORT, HOST, UID, GID, CONFIG_PATH, METADATA_PATH, ROUTER_BASE_PATH)
 Server.start()

server/Server.js

@@ -38,7 +38,7 @@ const CronManager = require('./managers/CronManager')
 const TaskManager = require('./managers/TaskManager')
 
 class Server {
-  constructor(SOURCE, PORT, HOST, UID, GID, CONFIG_PATH, METADATA_PATH, ROUTER_BASE_PATH, CLIENT_PORT) {
+  constructor(SOURCE, PORT, HOST, UID, GID, CONFIG_PATH, METADATA_PATH, ROUTER_BASE_PATH) {
     this.Port = PORT
     this.Host = HOST
     global.Source = SOURCE
@@ -48,7 +48,6 @@ class Server {
     global.ConfigPath = fileUtils.filePathToPOSIX(Path.normalize(CONFIG_PATH))
     global.MetadataPath = fileUtils.filePathToPOSIX(Path.normalize(METADATA_PATH))
     global.RouterBasePath = ROUTER_BASE_PATH
-    global.ClientPort = CLIENT_PORT
     global.XAccel = process.env.USE_X_ACCEL
 
     if (!fs.pathExistsSync(global.ConfigPath)) {
@@ -219,7 +218,7 @@ class Server {
     app.get('/healthcheck', (req, res) => res.sendStatus(200))
 
     // Serve client on all other routes, 404 will be handled by client
-    router.use(this.clientRouter.router)
+    app.use(this.clientRouter.router)
 
     this.server.listen(this.Port, this.Host, () => {
       if (this.Host) Logger.info(`Listening on http://${this.Host}:${this.Port}`)

server/SocketAuthority.js

@@ -68,12 +68,12 @@ class SocketAuthority {
   initialize(Server) {
     this.Server = Server
 
-    this.io = new SocketIO.Server(this.Server.server, {
+    this.io = (new SocketIO.Server(this.Server.server, {
       cors: {
         origin: '*',
         methods: ["GET", "POST"]
       }
-    })
+    })).of(global.RouterBasePath || "/")
     this.io.on('connection', (socket) => {
       this.clients[socket.id] = {
         id: socket.id,

server/routers/ClientRouter.js

@@ -1,7 +1,5 @@
 const express = require('express')
 const Path = require('path')
-const childProcess = require('child_process')
-const { createProxyMiddleware } = require('http-proxy-middleware');
 const Logger = require('../Logger')
 
 class ClientRouter {
@@ -15,40 +13,26 @@ class ClientRouter {
     this.router.disable('x-powered-by')
   }
 
-  init() {
-    const target = `http://localhost:${this.clientPort}${this.routerBasePath || '/'}`
-    this.router.use(createProxyMiddleware({ target, changeOrigin: true }));
-
-    Logger.info(`[Client] Proxying requests to client on port :${this.clientPort}`)
-  }
-
-  start() {
-    this.init()
-
+  async init () {
     const clientDir = Path.join(this.appRoot, '/client')
-    const clientPath = Path.join(clientDir, '/node_modules/@nuxt/cli/bin/nuxt-cli.js')
-    this.client = childProcess.fork(clientPath, ["start"], { cwd: clientDir, stdio: 'pipe' })
-
-    Logger.info(`[Client] Client started under port :${this.clientPort}`)
-
-    this.client.stdout.on('data', (data) => {
-      Logger.info('[Client]', data.toString().trim())
-    })
-
-    this.client.stderr.on('data', (data) => {
-      Logger.error('[Client]', data.toString().trim())
-    })
-
-    this.client.on('exit', () => {
-      Logger.info('[Client] Client exited unexpectedly, restarting...')
-      this.start()
-    })
+    const { loadNuxt } = require(Path.resolve(clientDir, 'node_modules/nuxt'))
+    this.client = await loadNuxt({ rootDir: clientDir, for: 'start' })
   }
 
-  stop() {
+  async start () {
+    Logger.info('[Client] Starting')
+    await this.init()
+
+    this.router.use(this.client.render)
+
+    this.client.hook('error', (err) => Logger.error('[Client]', err))
+    this.client.ready().then(() => Logger.info('[Client] Ready'))
+  }
+
+  async stop () {
     if (this.client) {
-      this.client.off('exit')
-      this.client.kill()
+      await this.client.close()
+      Logger.info('[Client] Stopped')
     } else {
       Logger.error('Client not running')
     }