BREAKING CHANGES: create static option and remove replaced options (#2670)

Author: knagaitsev

bin/cli-flags.js

@@ -20,12 +20,6 @@ module.exports = {
       defaultValue: true,
       describe: 'Enables/Disables live reloading on changing files',
     },
-    {
-      name: 'serveIndex',
-      type: Boolean,
-      describe: 'Enables/Disables serveIndex middleware',
-      defaultValue: true,
-    },
     {
       name: 'profile',
       type: Boolean,
@@ -85,16 +79,11 @@ module.exports = {
       describe: 'HTTP/2, must be used with HTTPS',
     },
     {
-      name: 'content-base',
+      name: 'static',
       type: String,
-      describe: 'A directory or URL to serve HTML content from.',
-      group: RESPONSE_GROUP,
-    },
-    {
-      name: 'watch-content-base',
-      type: Boolean,
-      describe: 'Enable live-reloading of the content-base.',
+      describe: 'A directory to serve static content from.',
       group: RESPONSE_GROUP,
+      multiple: true,
     },
     {
       name: 'history-api-fallback',

bin/options.js

@@ -17,11 +17,6 @@ const options = {
     describe: 'Enables/Disables live reloading on changing files',
     default: true,
   },
-  serveIndex: {
-    type: 'boolean',
-    describe: 'Enables/Disables serveIndex middleware',
-    default: true,
-  },
   profile: {
     type: 'boolean',
     describe: 'Print compilation profile data for progress steps',
@@ -75,14 +70,9 @@ const options = {
     group: SSL_GROUP,
     describe: 'HTTP/2, must be used with HTTPS',
   },
-  'content-base': {
+  static: {
     type: 'string',
-    describe: 'A directory or URL to serve HTML content from.',
-    group: RESPONSE_GROUP,
-  },
-  'watch-content-base': {
-    type: 'boolean',
-    describe: 'Enable live-reloading of the content-base.',
+    describe: 'A directory to serve static content from.',
     group: RESPONSE_GROUP,
   },
   'history-api-fallback': {

lib/Server.js

@@ -18,7 +18,6 @@ const webpackDevMiddleware = require('webpack-dev-middleware');
 const getFilenameFromUrl = require('webpack-dev-middleware/dist/utils/getFilenameFromUrl')
   .default;
 const validateOptions = require('schema-utils');
-const isAbsoluteUrl = require('is-absolute-url');
 const normalizeOptions = require('./utils/normalizeOptions');
 const updateCompiler = require('./utils/updateCompiler');
 const getCertificate = require('./utils/getCertificate');
@@ -304,112 +303,43 @@ class Server {
   }
 
   setupStaticFeature() {
-    const contentBase = this.options.contentBase;
-    const contentBasePublicPath = this.options.contentBasePublicPath;
-
-    if (Array.isArray(contentBase)) {
-      contentBase.forEach((item, index) => {
-        let publicPath = contentBasePublicPath;
-
-        if (
-          Array.isArray(contentBasePublicPath) &&
-          contentBasePublicPath[index]
-        ) {
-          publicPath = contentBasePublicPath[index] || contentBasePublicPath[0];
-        }
-
-        this.app.use(publicPath, express.static(item));
-      });
-    } else if (isAbsoluteUrl(String(contentBase))) {
-      this.logger.warn(
-        'Using a URL as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.'
-      );
-
-      this.logger.warn(
-        'proxy: {\n\t"*": "<your current contentBase configuration>"\n}'
-      );
-
-      // Redirect every request to contentBase
-      this.app.get('*', (req, res) => {
-        res.writeHead(302, {
-          Location: contentBase + req.path + (req._parsedUrl.search || ''),
-        });
-
-        res.end();
-      });
-    } else if (typeof contentBase === 'number') {
-      this.logger.warn(
-        'Using a number as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.'
-      );
-
-      this.logger.warn(
-        'proxy: {\n\t"*": "//localhost:<your current contentBase configuration>"\n}'
-      );
-
-      // Redirect every request to the port contentBase
-      this.app.get('*', (req, res) => {
-        res.writeHead(302, {
-          Location: `//localhost:${contentBase}${req.path}${
-            req._parsedUrl.search || ''
-          }`,
-        });
-
-        res.end();
+    this.options.static.forEach((staticOption) => {
+      staticOption.publicPath.forEach((publicPath) => {
+        this.app.use(
+          publicPath,
+          express.static(staticOption.directory, staticOption.staticOptions)
+        );
       });
-    } else {
-      // route content request
-      this.app.use(
-        contentBasePublicPath,
-        express.static(contentBase, this.options.staticOptions)
-      );
-    }
+    });
   }
 
-  setupServeIndexFeature() {
-    const contentBase = this.options.contentBase;
-    const contentBasePublicPath = this.options.contentBasePublicPath;
-
-    if (Array.isArray(contentBase)) {
-      contentBase.forEach((item) => {
-        this.app.use(contentBasePublicPath, (req, res, next) => {
-          // serve-index doesn't fallthrough non-get/head request to next middleware
-          if (req.method !== 'GET' && req.method !== 'HEAD') {
-            return next();
-          }
+  setupStaticServeIndexFeature() {
+    this.options.static.forEach((staticOption) => {
+      staticOption.publicPath.forEach((publicPath) => {
+        if (staticOption.serveIndex) {
+          this.app.use(publicPath, (req, res, next) => {
+            // serve-index doesn't fallthrough non-get/head request to next middleware
+            if (req.method !== 'GET' && req.method !== 'HEAD') {
+              return next();
+            }
 
-          serveIndex(item, { icons: true })(req, res, next);
-        });
-      });
-    } else if (
-      typeof contentBase !== 'number' &&
-      !isAbsoluteUrl(String(contentBase))
-    ) {
-      this.app.use(contentBasePublicPath, (req, res, next) => {
-        // serve-index doesn't fallthrough non-get/head request to next middleware
-        if (req.method !== 'GET' && req.method !== 'HEAD') {
-          return next();
+            serveIndex(staticOption.directory, staticOption.serveIndex)(
+              req,
+              res,
+              next
+            );
+          });
         }
-
-        serveIndex(contentBase, { icons: true })(req, res, next);
       });
-    }
+    });
   }
 
-  setupWatchStaticFeature() {
-    const contentBase = this.options.contentBase;
-
-    if (isAbsoluteUrl(String(contentBase)) || typeof contentBase === 'number') {
-      throw new Error('Watching remote files is not supported.');
-    } else if (Array.isArray(contentBase)) {
-      contentBase.forEach((item) => {
-        if (isAbsoluteUrl(String(item)) || typeof item === 'number') {
-          throw new Error('Watching remote files is not supported.');
-        }
-        this._watch(item);
-      });
-    } else {
-      this._watch(contentBase);
-    }
+  setupStaticWatchFeature() {
+    this.options.static.forEach((staticOption) => {
+      if (staticOption.watch) {
+        this.watchFiles(staticOption.directory, staticOption.watch);
+      }
+    });
   }
 
   setupOnBeforeSetupMiddlewareFeature() {
@@ -449,17 +379,14 @@ class Server {
           this.setupHistoryApiFallbackFeature();
         }
       },
-      // Todo rename to `static` in future major release
-      contentBaseFiles: () => {
+      static: () => {
         this.setupStaticFeature();
       },
-      // Todo rename to `serveIndex` in future major release
-      contentBaseIndex: () => {
-        this.setupServeIndexFeature();
+      staticServeIndex: () => {
+        this.setupStaticServeIndexFeature();
       },
-      // Todo rename to `watchStatic` in future major release
-      watchContentBase: () => {
-        this.setupWatchStaticFeature();
+      staticWatch: () => {
+        this.setupStaticWatchFeature();
       },
       onBeforeSetupMiddleware: () => {
         if (typeof this.options.onBeforeSetupMiddleware === 'function') {
@@ -501,24 +428,20 @@ class Server {
       runnableFeatures.push('proxy', 'middleware');
     }
 
-    if (this.options.contentBase !== false) {
-      runnableFeatures.push('contentBaseFiles');
+    if (this.options.static) {
+      runnableFeatures.push('static');
     }
 
     if (this.options.historyApiFallback) {
       runnableFeatures.push('historyApiFallback', 'middleware');
 
-      if (this.options.contentBase !== false) {
-        runnableFeatures.push('contentBaseFiles');
+      if (this.options.static) {
+        runnableFeatures.push('static');
       }
     }
 
-    if (this.options.contentBase && this.options.serveIndex) {
-      runnableFeatures.push('contentBaseIndex');
-    }
-
-    if (this.options.watchContentBase) {
-      runnableFeatures.push('watchContentBase');
+    if (this.options.static) {
+      runnableFeatures.push('staticServeIndex', 'staticWatch');
     }
 
     runnableFeatures.push('magicHtml');
@@ -903,31 +826,31 @@ class Server {
     }
   }
 
-  _watch(watchPath) {
+  watchFiles(watchPath, watchOptions) {
     // duplicate the same massaging of options that watchpack performs
     // https://github.com/webpack/watchpack/blob/master/lib/DirectoryWatcher.js#L49
     // this isn't an elegant solution, but we'll improve it in the future
     // eslint-disable-next-line no-undefined
-    const usePolling = this.options.watchOptions.poll ? true : undefined;
+    const usePolling = watchOptions.poll ? true : undefined;
     const interval =
-      typeof this.options.watchOptions.poll === 'number'
-        ? this.options.watchOptions.poll
+      typeof watchOptions.poll === 'number'
+        ? watchOptions.poll
         : // eslint-disable-next-line no-undefined
           undefined;
 
-    const watchOptions = {
+    const finalWatchOptions = {
       ignoreInitial: true,
       persistent: true,
       followSymlinks: false,
       atomic: false,
       alwaysStat: true,
       ignorePermissionErrors: true,
-      ignored: this.options.watchOptions.ignored,
+      ignored: watchOptions.ignored,
       usePolling,
       interval,
     };
 
-    const watcher = chokidar.watch(watchPath, watchOptions);
+    const watcher = chokidar.watch(watchPath, finalWatchOptions);
     // disabling refreshing on changing the content
     if (this.options.liveReload) {
       watcher.on('change', () => {