feature #693 Add a way to configure devServer options (Kocal)

This PR was squashed before being merged into the master branch (closes #693).

Discussion
----------

Add a way to configure devServer options

Hi :)

This PR is a proposal for #692. It add a new method `Encore.configureDevServerOptions()` for [configuring the webpack dev-server](https://webpack.js.org/configuration/dev-server/).

Example:
```js
Encore
  // ...
  .configureDevServerOptions(options => {
    options.https = {
      key: '...',
      cert: '...',
    };
  })
```

I've installed [`chai-subet`](https://www.chaijs.com/plugins/chai-subset/) for asserting objects (it's more readable and easy to do), but I can remove it if it's not wanted. 👍

Commits
-------

6d2730e Add a way to configure devServer options

Author: weaverryan

index.js

@@ -652,6 +652,30 @@ class Encore {
         return this;
     }
 
+    /**
+     * Configure the devServer configuration.
+     *
+     * https://webpack.js.org/configuration/dev-server
+     *
+     * ```
+     * Encore.configureDevServerOptions(function(options) {
+     *     // change the configuration
+     *     options.https = {
+     *         key: '<your SSL cert key content>',
+     *         cert: '<your SSL cert content>',
+     *     };
+     * });
+     * ```
+     *
+     * @param {function} callback
+     * @returns {Encore}
+     */
+    configureDevServerOptions(callback) {
+        webpackConfig.configureDevServerOptions(callback);
+
+        return this;
+    }
+
     /**
      * Automatically make some variables available everywhere!
      *

lib/WebpackConfig.js

@@ -144,6 +144,7 @@ class WebpackConfig {
         this.cssLoaderConfigurationCallback = () => {};
         this.splitChunksConfigurationCallback = () => {};
         this.watchOptionsConfigurationCallback = () => {};
+        this.devServerOptionsConfigurationCallback = () => {};
         this.vueLoaderOptionsCallback = () => {};
         this.eslintLoaderOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
@@ -499,6 +500,14 @@ class WebpackConfig {
         this.watchOptionsConfigurationCallback = callback;
     }
 
+    configureDevServerOptions(callback) {
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 1 to configureDevServerOptions() must be a callback function.');
+        }
+
+        this.devServerOptionsConfigurationCallback = callback;
+    }
+
     createSharedEntry(name, file) {
         if (this.shouldSplitEntryChunks) {
             throw new Error('Using splitEntryChunks() and createSharedEntry() together is not supported. Use one of these strategies only to optimize your build.');

lib/config-generator.js

@@ -614,7 +614,7 @@ class ConfigGenerator {
     buildDevServerConfig() {
         const contentBase = pathUtil.getContentBase(this.webpackConfig);
 
-        return {
+        const devServerOptions = {
             contentBase: contentBase,
             // this doesn't appear to be necessary, but here in case
             publicPath: this.webpackConfig.getRealPublicPath(),
@@ -628,6 +628,11 @@ class ConfigGenerator {
             watchOptions: this.buildWatchOptionsConfig(),
             https: this.webpackConfig.useDevServerInHttps()
         };
+
+        return applyOptionsCallback(
+            this.webpackConfig.devServerOptionsConfigurationCallback,
+            devServerOptions
+        );
     }
 }
 

package.json

@@ -62,6 +62,7 @@
     "babel-eslint": "^10.0.1",
     "chai": "^3.5.0",
     "chai-fs": "^1.0.0",
+    "chai-subset": "^1.6.0",
     "core-js": "^3.0.0",
     "eslint": "^5.15.2",
     "eslint-loader": "^2.1.2",

test/config-generator.js

@@ -593,6 +593,31 @@ describe('The config-generator function', () => {
             expect(actualConfig.devServer.hot).to.be.true;
         });
 
+        it('devServer with custom options', () => {
+            const config = createConfig();
+            config.runtimeConfig.useDevServer = true;
+            config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
+            config.outputPath = isWindows ? 'C:\\tmp\\public' : '/tmp/public';
+            config.setPublicPath('/');
+            config.addEntry('main', './main');
+
+            config.configureDevServerOptions(options => {
+                options.https = {
+                    key: 'https.key',
+                    cert: 'https.cert',
+                };
+            });
+
+            const actualConfig = configGenerator(config);
+
+            expect(actualConfig.devServer).to.containSubset({
+                https: {
+                    key: 'https.key',
+                    cert: 'https.cert',
+                },
+            });
+        });
+
         it('devServer with custom watch options', () => {
             const config = createConfig();
             config.runtimeConfig.useDevServer = true;
@@ -607,6 +632,7 @@ describe('The config-generator function', () => {
             });
 
             const actualConfig = configGenerator(config);
+
             expect(actualConfig.watchOptions).to.deep.equals({
                 'ignored': /node_modules/,
                 'poll': 250,
@@ -616,6 +642,34 @@ describe('The config-generator function', () => {
                 'poll': 250,
             });
         });
+
+        it('devServer with custom options and watch options', () => {
+            const config = createConfig();
+            config.runtimeConfig.useDevServer = true;
+            config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
+            config.runtimeConfig.useHotModuleReplacement = true;
+            config.outputPath = isWindows ? 'C:\\tmp\\public' : '/tmp/public';
+            config.setPublicPath('/');
+            config.addEntry('main', './main');
+
+            config.configureWatchOptions(watchOptions => {
+                watchOptions.poll = 250;
+            });
+            config.configureDevServerOptions(options => {
+                // should take precedence over `configureWatchOptions()`
+                options.watchOptions.poll = 500;
+            });
+
+            const actualConfig = configGenerator(config);
+            expect(actualConfig.watchOptions).to.deep.equals({
+                'ignored': /node_modules/,
+                'poll': 250,
+            });
+            expect(actualConfig.devServer.watchOptions).to.deep.equals({
+                'ignored': /node_modules/,
+                'poll': 500,
+            });
+        });
     });
 
     describe('test for addPlugin config', () => {

test/functional.js

@@ -12,6 +12,7 @@
 const os = require('os');
 const chai = require('chai');
 chai.use(require('chai-fs'));
+chai.use(require('chai-subset'));
 const expect = chai.expect;
 const path = require('path');
 const testSetup = require('./helpers/setup');

yarn.lock

@@ -1757,6 +1757,11 @@ chai-fs@^1.0.0:
     bit-mask "0.0.2-alpha"
     readdir-enhanced "^1.4.0"
 
+chai-subset@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/chai-subset/-/chai-subset-1.6.0.tgz#a5d0ca14e329a79596ed70058b6646bd6988cfe9"
+  integrity sha1-pdDKFOMpp5WW7XAFi2ZGvWmIz+k=
+
 chai@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/chai/-/chai-3.5.0.tgz#4d02637b067fe958bdbfdd3a40ec56fef7373247"