Adding --keep-public-path to dev-server to allow you to fully control the publicPath

Author: weaverryan

bin/encore.js

@@ -62,11 +62,14 @@ function showUsageInstructions() {
     console.log('Commands:');
     console.log(`    ${chalk.green('dev')}        : runs webpack for development`);
     console.log('       - Supports any webpack options (e.g. --watch)');
+    console.log();
     console.log(`    ${chalk.green('dev-server')} : runs webpack-dev-server`);
     console.log(`       - ${chalk.yellow('--host')} The hostname/ip address the webpack-dev-server will bind to`);
     console.log(`       - ${chalk.yellow('--port')} The port the webpack-dev-server will bind to`);
     console.log(`       - ${chalk.yellow('--hot')}  Enable HMR on webpack-dev-server`);
+    console.log(`       - ${chalk.yellow('--keep-public-path')} Do not change the public path (it is usually prefixed by the dev server URL)`);
     console.log('       - Supports any webpack-dev-server options');
+    console.log();
     console.log(`    ${chalk.green('production')} : runs webpack for production`);
     console.log('       - Supports any webpack options (e.g. --watch)');
     console.log();

lib/WebpackConfig.js

@@ -93,8 +93,8 @@ class WebpackConfig {
          * is simply used as the default manifestKeyPrefix.
          */
         if (publicPath.includes('://')) {
-            if (this.useDevServer()) {
-                throw new Error('You cannot pass an absolute URL to setPublicPath() and use the dev-server at the same time. Try using Encore.isProduction() to only configure your absolute publicPath for production.');
+            if (this.useDevServer() && false === this.runtimeConfig.devServerKeepPublicPath) {
+                throw new Error('You cannot pass an absolute URL to setPublicPath() and use the dev-server at the same time. This is because the public path is automatically set to point to the dev server. Try using Encore.isProduction() to only configure your absolute publicPath for production. Or, if you want to override this behavior, pass the --keep-public-path option to allow this.');
             }
         } else {
             if (publicPath.indexOf('/') !== 0) {
@@ -130,7 +130,7 @@ class WebpackConfig {
      */
     getRealPublicPath() {
         // if we're using webpack-dev-server, use it & add the publicPath
-        if (this.useDevServer()) {
+        if (this.useDevServer() && false === this.runtimeConfig.devServerKeepPublicPath) {
             // avoid 2 middle slashes
             return this.runtimeConfig.devServerUrl.replace(/\/$/,'') + this.publicPath;
         }

lib/config/RuntimeConfig.js

@@ -19,6 +19,7 @@ class RuntimeConfig {
         this.useDevServer = null;
         this.devServerUrl = null;
         this.devServerHttps = null;
+        this.devServerKeepPublicPath = false;
         this.useHotModuleReplacement = null;
 
         this.babelRcFileExists = null;

lib/config/parse-runtime.js

@@ -40,6 +40,7 @@ module.exports = function(argv, cwd) {
             runtimeConfig.useDevServer = true;
             runtimeConfig.devServerHttps = argv.https;
             runtimeConfig.useHotModuleReplacement = argv.hot || false;
+            runtimeConfig.devServerKeepPublicPath = argv.keepPublicPath || false;
 
             var host = argv.host ? argv.host : 'localhost';
             var port = argv.port ? argv.port : '8080';

test/WebpackConfig.js

@@ -150,7 +150,7 @@ describe('WebpackConfig object', () => {
             config.setPublicPath('http://coolcdn.com/public');
             config.setManifestKeyPrefix('/public/');
 
-            expect(config.getRealPublicPath()).to.equal('http://coolcdn.com/public');
+            expect(config.getRealPublicPath()).to.equal('http://coolcdn.com/public/');
         });
     });
 

test/config/parse-runtime.js

@@ -69,6 +69,7 @@ describe('parse-runtime', () => {
         expect(config.useDevServer).to.be.true;
         expect(config.devServerUrl).to.equal('http://localhost:8080/');
         expect(config.useHotModuleReplacement).to.be.false;
+        expect(config.devServerKeepPublicPath).to.be.false;
     });
 
     it('dev-server command with options', () => {
@@ -114,4 +115,12 @@ describe('parse-runtime', () => {
         expect(config.useDevServer).to.be.true;
         expect(config.useHotModuleReplacement).to.be.true;
     });
+
+    it('dev-server command --keep-public-path', () => {
+        const testDir = createTestDirectory();
+        const config = parseArgv(createArgv(['dev-server', '--keep-public-path']), testDir);
+
+        expect(config.useDevServer).to.be.true;
+        expect(config.devServerKeepPublicPath).to.be.true;
+    });
 });