feat(app): Allow forcing publicPath on dev mode too (for SPA and PWA only) #4962

Author: rstoenescu

app/lib/dev-server.js

@@ -236,8 +236,12 @@ module.exports = class DevServer {
 
     const serverCompilerWatcher = serverCompiler.watch({}, () => {})
 
+    const originalAfter = cfg.devServer.after
+
     // start building & launch server
     const server = new WebpackDevServer(clientCompiler, {
+      ...cfg.devServer,
+
       after: app => {
         if (cfg.ctx.mode.pwa) {
           app.use('/manifest.json', (req, res) => {
@@ -254,6 +258,8 @@ module.exports = class DevServer {
           maxAge: 0
         }))
 
+        originalAfter && originalAfter(app)
+
         SsrExtension.getModule().extendApp({
           app,
 
@@ -287,9 +293,7 @@ module.exports = class DevServer {
         })
 
         app.get('*', render)
-      },
-
-      ...cfg.devServer
+      }
     })
 
     readyPromise.then(() => {

app/lib/quasar-config.js

@@ -24,7 +24,7 @@ function encode (obj) {
 
 function formatPublicPath (path) {
   if (!path) {
-    return path
+    return path || ''
   }
 
   if (!path.endsWith('/')) {
@@ -477,14 +477,10 @@ class QuasarConfig {
     cfg.build.publicPath =
       (this.ctx.prod || cfg.build.forceDevPublicPath) && cfg.build.publicPath && ['spa', 'pwa'].includes(this.ctx.modeName)
         ? formatPublicPath(cfg.build.publicPath)
-        : (cfg.build.vueRouterMode !== 'hash' ? '/' : '')
+        : (cfg.build.vueRouterMode === 'hash' ? '' : '/')
 
     cfg.build.vueRouterBase = formatRouterBase(cfg.build.publicPath)
 
-    cfg.build.appBase = cfg.build.vueRouterMode === 'history'
-      ? cfg.build.publicPath
-      : ''
-
     cfg.sourceFiles = merge({
       rootComponent: 'src/App.vue',
       router: 'src/router/index',
@@ -539,6 +535,8 @@ class QuasarConfig {
     }
 
     if (this.ctx.dev) {
+      const originalBefore = cfg.devServer.before
+
       cfg.devServer = merge({
         publicPath: cfg.build.publicPath,
         hot: true,
@@ -551,26 +549,34 @@ class QuasarConfig {
         compress: true,
         open: true
       }, cfg.devServer, {
-        contentBase: [ appPaths.srcDir ]
+        contentBase: false,
+
+        before: app => {
+          if (!this.ctx.mode.ssr) {
+            const express = require('express')
+
+            app.use((cfg.build.publicPath || '/') + 'statics', express.static(appPaths.resolve.src('statics'), {
+              maxAge: 0
+            }))
+
+            if (this.ctx.mode.cordova) {
+              const folder = appPaths.resolve.cordova(`platforms/${this.ctx.targetName}/platform_www`)
+              app.use('/', express.static(folder, { maxAge: 0 }))
+            }
+          }
+
+          originalBefore && originalBefore(app)
+        }
       })
 
-      if (this.ctx.mode.ssr) {
-        cfg.devServer.contentBase = false
-      }
-      else if (this.ctx.mode.cordova || this.ctx.mode.electron) {
+      if (this.ctx.mode.cordova || this.ctx.mode.electron) {
         cfg.devServer.open = false
 
         if (this.ctx.mode.electron) {
           cfg.devServer.https = false
         }
       }
 
-      if (this.ctx.mode.cordova) {
-        cfg.devServer.contentBase.push(
-          appPaths.resolve.cordova(`platforms/${this.ctx.targetName}/platform_www`)
-        )
-      }
-
       if (cfg.devServer.open) {
         const isMinimalTerminal = require('./helpers/is-minimal-terminal')
         if (isMinimalTerminal) {
@@ -682,8 +688,12 @@ class QuasarConfig {
       const host = cfg.devServer.host === '0.0.0.0'
         ? 'localhost'
         : cfg.devServer.host
-      const urlPath = `${cfg.build.vueRouterMode === 'hash' ? (cfg.build.htmlFilename !== 'index.html' ? cfg.build.htmlFilename : '') : ''}`
-      cfg.build.APP_URL = `http${cfg.devServer.https ? 's' : ''}://${host}:${cfg.devServer.port}/${urlPath}`
+
+      const urlPath = cfg.build.vueRouterMode === 'hash'
+        ? (cfg.build.htmlFilename !== 'index.html' ? (cfg.build.publicPath ? '' : '/') + cfg.build.htmlFilename : '')
+        : ''
+
+      cfg.build.APP_URL = `http${cfg.devServer.https ? 's' : ''}://${host}:${cfg.devServer.port}${cfg.build.publicPath}${urlPath}`
     }
     else if (this.ctx.mode.cordova) {
       cfg.build.APP_URL = 'index.html'
@@ -706,13 +716,8 @@ class QuasarConfig {
       'process.env': cfg.build.env
     }
 
-    if (this.ctx.mode.electron) {
-      if (this.ctx.dev) {
-        cfg.build.env.__statics = `"${appPaths.resolve.src('statics').replace(/\\/g, '\\\\')}"`
-      }
-    }
-    else {
-      cfg.build.env.__statics = `"${((this.ctx.prod || cfg.build.forceDevPublicPath) && cfg.build.publicPath) ? cfg.build.publicPath : '/' }statics"`
+    if (this.ctx.mode.electron && this.ctx.dev) {
+      cfg.build.env.__statics = `"${appPaths.resolve.src('statics').replace(/\\/g, '\\\\')}"`
     }
 
     appFilesValidations(cfg)

app/lib/ssr/html-template.js

@@ -69,8 +69,8 @@ module.exports.getIndexHtml = function (template, cfg) {
 
   html = injectSsrInterpolation(html)
 
-  if (cfg.build.appBase) {
-    html = fillBaseTag(html, cfg.build.appBase)
+  if (cfg.build.publicPath) {
+    html = fillBaseTag(html, cfg.build.publicPath)
   }
 
   if (cfg.build.minify) {

app/lib/webpack/plugin.html-addons.js

@@ -30,9 +30,9 @@ module.exports.plugin = class HtmlAddonsPlugin {
 
   apply (compiler) {
     compiler.hooks.compilation.tap('webpack-plugin-html-addons', compilation => {
-      if (this.cfg.build.appBase) {
+      if (this.cfg.build.publicPath) {
         compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync('webpack-plugin-html-base-tag', (data, callback) => {
-          data.html = fillBaseTag(data.html, this.cfg.build.appBase)
+          data.html = fillBaseTag(data.html, this.cfg.build.publicPath)
           callback(null, data)
         })
       }