Switch to nuxt server and apply base path

.dockerignore

@@ -3,6 +3,9 @@ node_modules
 npm-debug.log
 .git
 .gitignore
+.devcontainer/
+.github/
+.vscode/
 /config
 /audiobooks
 /audiobooks2
@@ -13,4 +16,5 @@ test/
 /client/.nuxt/
 /client/dist/
 /dist/
+/build/
 /deploy/

.github/workflows/integration-test.yml

@@ -13,7 +13,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: setup nade
+      - name: setup node
         uses: actions/setup-node@v3
         with:
           node-version: 16
@@ -27,7 +27,7 @@ jobs:
 
       - name: build client
         working-directory: client
-        run: npm run generate
+        run: npm run build
 
       - name: get server dependencies
         run: npm ci --only=production

Dockerfile

@@ -1,14 +1,19 @@
 ### STAGE 0: Build client ###
 FROM node:16-alpine AS build
 WORKDIR /client
-COPY /client /client
+
+COPY /client/package*.json /client/
 RUN npm ci && npm cache clean --force
-RUN npm run generate
+
+COPY /client /client
+RUN npm run build
 
 ### STAGE 1: Build server ###
 FROM sandreas/tone:v0.1.5 AS tone
 FROM node:16-alpine
 
+WORKDIR /app
+
 ENV NODE_ENV=production
 RUN apk update && \
     apk add --no-cache --update \
@@ -17,11 +22,17 @@ RUN apk update && \
     ffmpeg
 
 COPY --from=tone /usr/local/bin/tone /usr/local/bin/
-COPY --from=build /client/dist /client/dist
-COPY index.js package* /
-COPY server server
+COPY package* ./
+COPY --from=build /client/package*.json client/
 
-RUN npm ci --only=production
+RUN npm ci --omit=dev
+RUN cd client && npm ci --omit=dev && cd ..
+
+COPY index.js package* ./
+COPY server server
+COPY --from=build /client/nuxt.config.js* client/
+COPY --from=build /client/.nuxt client/.nuxt
+COPY --from=build /client/modules client/modules
 
 EXPOSE 80
 HEALTHCHECK \

client/assets/app.css

@@ -5,7 +5,7 @@
 @import './absicons.css';
 
 :root {
-  --bookshelf-texture-img: url(/textures/wood_default.jpg);
+  --bookshelf-texture-img: url(~static/textures/wood_default.jpg);
   --bookshelf-divider-bg: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
 }
 

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

@@ -0,0 +1,54 @@
+const Path = require('path')
+const { promises: { readFile, writeFile } } = require('fs')
+const { glob } = require('glob')
+
+/**
+ * Rewrite PWA manifest paths to include router base path
+ * @nuxtjs/pwa module does not support a dynamic router base path,
+ * so we have to rewrite the manifest paths manually
+ * 
+ * @see https://github.com/nuxt/nuxt/pull/8520
+ * @see https://github.com/nuxt-community/pwa-module/issues/435
+ */
+export default function rewritePwaManifest () {
+  this.nuxt.hook('ready', async ({ options }) => {
+    // Do not run on build, this is where the manifest is generated
+    if (options._build) return
+
+    const routerBasePath = options.router.base
+    const clientDir = Path.join(options.buildDir, 'dist/client')
+    let rewritten = false
+
+    // Find manifest file generated to the build directory
+    const manifestPaths = await glob('manifest.*.json', { cwd: clientDir })
+    if (manifestPaths.length === 0) {
+      console.warn(`[PWA] No manifest not found under ${clientDir}/manifest.*.json`)
+      return
+    }
+
+    // Rewrite manifest paths for all found manifest files
+    for (const manifestPath of manifestPaths) {
+      const manifestJson = await readFile(Path.join(clientDir, manifestPath), 'utf8')
+      const manifest = JSON.parse(manifestJson)
+
+      const currentBasePath = manifest.start_url.split('?')[0]
+
+      if (currentBasePath !== (routerBasePath || '/')) {
+        // Rewrite start_url and icons paths
+        manifest.start_url = `${routerBasePath}${manifest.start_url.slice(currentBasePath.length)}`
+        for (const icon of manifest.icons) {
+          const path = icon.src.startsWith('/') ? icon.src.slice(currentBasePath.length) : icon.src
+          icon.src = `${routerBasePath}${path}`
+        }
+
+        // Update manifest file
+        await writeFile(Path.join(clientDir, manifestPath), JSON.stringify(manifest), 'utf8')
+        rewritten = true
+      }
+    }
+
+    if (rewritten) {
+      console.info('[PWA] Manifest paths rewritten')
+    }
+  })
+}

client/nuxt.config.js

@@ -1,9 +1,9 @@
 const pkg = require('./package.json')
 
-module.exports = {
+module.exports = ({ command }) => ({
   // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
   ssr: false,
-  target: 'static',
+  target: 'server',
   dev: process.env.NODE_ENV !== 'production',
   env: {
     serverUrl: process.env.NODE_ENV === 'production' ? process.env.ROUTER_BASE_PATH || '' : 'http://localhost:3333',
@@ -26,26 +26,26 @@ module.exports = {
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: '' }
-    ],
-    script: [],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: (process.env.ROUTER_BASE_PATH || '') + '/favicon.ico' }
     ]
   },
 
   router: {
-    base: process.env.ROUTER_BASE_PATH || ''
+    // We must specify `./` during build to support dynamic router base paths (https://github.com/nuxt/nuxt/issues/10088)
+    base: command == 'build' ? './' : process.env.ROUTER_BASE_PATH || ''
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [
     '@/assets/app.css'
   ],
 
+  favicon: '/favicon.ico',
+
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
     '@/plugins/constants.js',
     '@/plugins/init.client.js',
+    '@/plugins/favicon.js',
     '@/plugins/axios.js',
     '@/plugins/toast.js',
     '@/plugins/utils.js',
@@ -67,13 +67,21 @@ module.exports = {
   modules: [
     'nuxt-socket-io',
     '@nuxtjs/axios',
-    '@nuxtjs/proxy'
+    '@nuxtjs/proxy',
+    '@/modules/rewritePwaManifest.js'
   ],
 
   proxy: {
-    '/dev/': { target: 'http://localhost:3333', pathRewrite: { '^/dev/': '' } },
-    '/ebook/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' },
-    '/s/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' + process.env : '/' },
+    [`${process.env.ROUTER_BASE_PATH || ''}/dev/`]: {
+      target: `http://localhost:3333${process.env.ROUTER_BASE_PATH || ''}`,
+      pathRewrite: { [`^${process.env.ROUTER_BASE_PATH || ''}/dev/`]: process.env.ROUTER_BASE_PATH || '' }
+    },
+    [`${process.env.ROUTER_BASE_PATH || ''}/ebook/`]: {
+      target: (process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '') + `${process.env.ROUTER_BASE_PATH || ''}/`
+    },
+    [`${process.env.ROUTER_BASE_PATH || ''}/s/`]: {
+      target: (process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '') + `${process.env.ROUTER_BASE_PATH || ''}/`
+    }
   },
 
   io: {
@@ -102,17 +110,18 @@ module.exports = {
       nativeUI: true
     },
     manifest: {
+      publicPath: `${(process.env.ROUTER_BASE_PATH || '')}_nuxt`,
       name: 'Audiobookshelf',
       short_name: 'Audiobookshelf',
       display: 'standalone',
       background_color: '#373838',
       icons: [
         {
-          src: (process.env.ROUTER_BASE_PATH || '') + '/icon.svg',
+          src: 'icon.svg',
           sizes: "any"
         },
         {
-          src: (process.env.ROUTER_BASE_PATH || '') + '/icon64.png',
+          src: 'icon64.png',
           type: "image/png",
           sizes: "64x64"
         }
@@ -153,4 +162,4 @@ module.exports = {
  * See: [Issue tracker](https://github.com/nuxt-community/tailwindcss-module/issues/480)
  */
   devServerHandlers: [],
-}
+})