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/

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/modules/rewritePwaManifest.js

@@ -0,0 +1,55 @@
+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) {
+          icon.src = currentBasePath.startsWith('.')
+            ? `${routerBasePath}${icon.src}` // Initially, the start_url is `./`
+            : `${routerBasePath}/${icon.src.slice(currentBasePath.length)}`
+        }
+
+        // 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,30 +26,27 @@ module.exports = {
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: '' }
-    ],
-    script: [
-      {
-        src: (process.env.ROUTER_BASE_PATH || '') + '/libs/sortable.js'
-      }
-    ],
-    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/sortable.js',
+    '@/plugins/favicon.js',
     '@/plugins/axios.js',
     '@/plugins/toast.js',
     '@/plugins/utils.js',
@@ -71,13 +68,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: {
@@ -106,17 +111,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"
         }
@@ -146,7 +152,7 @@ module.exports = {
     }
   },
   server: {
-    port: process.env.NODE_ENV === 'production' ? 80 : 3000,
+    port: process.env.CLIENT_PORT || 3000,
     host: '0.0.0.0'
   },
 
@@ -157,4 +163,4 @@ module.exports = {
  * See: [Issue tracker](https://github.com/nuxt-community/tailwindcss-module/issues/480)
  */
   devServerHandlers: [],
-}
+})