Update devServer in webpack.config.js (opensearch-project#584)

Co-authored-by: Sergey Myssak <[email protected]> Signed-off-by: Andrey Myssak <[email protected]>
andreymyssak · May 21, 2023 · 029a8dd · 029a8dd
1 parent 525b766
commit 029a8dd
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 157 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "*.scss"
   ],
   "scripts": {
-    "start": "cross-env BABEL_MODULES=false webpack-dev-server --hot --config=src-docs/webpack.config.js",
+    "start": "cross-env BABEL_MODULES=false webpack serve --hot --config=src-docs/webpack.config.js",
     "test-docker": "node ./scripts/test-docker.js",
     "sync-docs": "node ./scripts/docs-sync.js",
     "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
@@ -30,7 +30,7 @@
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
     "test-a11y": "node ./scripts/a11y-testing",
     "test-staged": "yarn lint && node scripts/test-staged.js",
-    "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
+    "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack serve --config src-docs/webpack.config.js --port 9999",
     "yo-component": "yo ./generator-oui/app/component.js",
     "start-test-server-and-a11y-test": "cross-env WAIT_ON_TIMEOUT=600000 start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
     "yo-doc": "yo ./generator-oui/app/documentation.js",
@@ -162,7 +162,6 @@
     "cross-env": "^7.0.2",
     "css-loader": "^4.2.2",
     "cssnano": "^6.0.1",
-    "deasync": "^0.1.20",
     "dedent": "^0.7.0",
     "dts-generator": "^3.0.0",
     "enzyme": "^3.11.0",

diff --git a/src-docs/webpack.config.js b/src-docs/webpack.config.js
@@ -17,11 +17,10 @@ const babelConfig = require('./.babelrc.js');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 
 const getPort = require('get-port');
-const deasync = require('deasync');
 
-const { NODE_ENV, CI, WEBPACK_DEV_SERVER } = process.env;
+const { NODE_ENV, CI, WEBPACK_SERVE } = process.env;
 
-const isDevelopment = WEBPACK_DEV_SERVER === 'true' && CI == null;
+const isDevelopment = WEBPACK_SERVE === 'true' && CI == null;
 const isProduction = NODE_ENV === 'production';
 const isPuppeteer = NODE_ENV === 'puppeteer';
 
@@ -41,158 +40,133 @@ function employCache(loaders) {
   return loaders;
 }
 
-const webpackConfig = {
-  mode: isProduction ? 'production' : 'development',
+const webpackConfig = async () => {
+  const port = await getPort({
+    port: getPort.makeRange(8030, 8130),
+    host: '0.0.0.0',
+  });
 
-  devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
+  return {
+    mode: isProduction ? 'production' : 'development',
 
-  entry: {
-    bundle: './index.js',
-  },
+    devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
 
-  context: path.resolve(__dirname, 'src'),
+    entry: {
+      bundle: './index.js',
+    },
 
-  output: {
-    path: path.resolve(__dirname, '../docs'),
-    filename: `[name]${isProduction ? '.min' : ''}.js`,
-  },
+    context: path.resolve(__dirname, 'src'),
 
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json'],
-    fallback: {
-      fs: false,
-    },
-  },
-
-  resolveLoader: {
-    alias: {
-      'prop-loader': path.resolve(
-        __dirname,
-        '../scripts/loaders/prop-loader.js'
-      ),
+    output: {
+      path: path.resolve(__dirname, '../docs'),
+      filename: `[name]${isProduction ? '.min' : ''}.js`,
     },
-  },
 
-  module: {
-    rules: [
-      {
-        resourceQuery: /raw/,
-        type: 'asset/source',
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.json'],
+      fallback: {
+        fs: false,
       },
-      {
-        test: /\.(js|tsx?)$/,
-        use: employCache([
-          {
-            loader: 'babel-loader',
-            options: { babelrc: false, ...babelConfig },
-          },
-        ]),
-        exclude: [/node_modules/, /packages(\/|\\)react-datepicker/],
-      },
-      {
-        test: /\.scss$/,
-        use: employCache([
-          {
-            loader: 'style-loader',
-            options: { injectType: 'lazySingletonStyleTag' },
-          },
-          'css-loader',
-          'postcss-loader',
-          'sass-loader',
-        ]),
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/,
-        use: employCache(['style-loader', 'css-loader']),
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.(woff|woff2|ttf|eot|ico)(\?|$)/,
-        type: 'asset/resource',
+    },
+
+    resolveLoader: {
+      alias: {
+        'prop-loader': path.resolve(
+          __dirname,
+          '../scripts/loaders/prop-loader.js'
+        ),
       },
-      {
-        test: /\.(png|jp(e*)g|svg|gif)$/,
-        type: 'asset',
-        generator: {
-          filename: 'images/[contenthash]-[name].[ext]',
+    },
+
+    module: {
+      rules: [
+        {
+          resourceQuery: /raw/,
+          type: 'asset/source',
+        },
+        {
+          test: /\.(js|tsx?)$/,
+          use: employCache([
+            {
+              loader: 'babel-loader',
+              options: { babelrc: false, ...babelConfig },
+            },
+          ]),
+          exclude: [/node_modules/, /packages(\/|\\)react-datepicker/],
+        },
+        {
+          test: /\.scss$/,
+          use: employCache([
+            {
+              loader: 'style-loader',
+              options: { injectType: 'lazySingletonStyleTag' },
+            },
+            'css-loader',
+            'postcss-loader',
+            'sass-loader',
+          ]),
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.css$/,
+          use: employCache(['style-loader', 'css-loader']),
+          exclude: /node_modules/,
         },
-        parser: {
-          dataUrlCondition: {
-            maxSize: 8 * 1024,
+        {
+          test: /\.(woff|woff2|ttf|eot|ico)(\?|$)/,
+          type: 'asset/resource',
+        },
+        {
+          test: /\.(png|jp(e*)g|svg|gif)$/,
+          type: 'asset',
+          generator: {
+            filename: 'images/[contenthash]-[name].[ext]',
+          },
+          parser: {
+            dataUrlCondition: {
+              maxSize: 8 * 1024,
+            },
           },
         },
-      },
+      ],
+    },
+
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: 'index.html',
+        inject: 'body',
+        cache: true,
+        showErrors: true,
+      }),
+
+      new CircularDependencyPlugin({
+        exclude: /node_modules/,
+        failOnError: true,
+      }),
+
+      new NodePolyfillPlugin(),
+      // run TypeScript during webpack build
+      // new ForkTsCheckerWebpackPlugin({
+      //   typescript: { configFile: path.resolve(__dirname, '..', 'tsconfig.json') },
+      //   async: false, // makes errors more visible, but potentially less performant
+      // }),
     ],
-  },
-
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'index.html',
-      inject: 'body',
-      cache: true,
-      showErrors: true,
-    }),
-
-    new CircularDependencyPlugin({
-      exclude: /node_modules/,
-      failOnError: true,
-    }),
-
-    new NodePolyfillPlugin(),
-    // run TypeScript during webpack build
-    // new ForkTsCheckerWebpackPlugin({
-    //   typescript: { configFile: path.resolve(__dirname, '..', 'tsconfig.json') },
-    //   async: false, // makes errors more visible, but potentially less performant
-    // }),
-  ],
-
-  devServer: isDevelopment
-    ? {
-        contentBase: 'src-docs/build',
-        host: '0.0.0.0',
-        allowedHosts: ['*'],
-        port: getPortSync({
-          port: getPort.makeRange(8030, 8130),
+
+    devServer: isDevelopment
+      ? {
+          static: {
+            directory: path.resolve(__dirname, 'build'),
+            // prevent file watching while running on CI
+            // /app/ represents the entire docker environment
+            watch: isPuppeteer ? { ignored: '**/*' } : undefined,
+          },
           host: '0.0.0.0',
-        }),
-        disableHostCheck: true,
-        historyApiFallback: true,
-        // prevent file watching while running on CI
-        // /app/ represents the entire docker environment
-        watchOptions: isPuppeteer
-          ? {
-              ignored: '**/*',
-            }
-          : undefined,
-      }
-    : undefined,
+          port,
+          allowedHosts: 'all',
+          historyApiFallback: true,
+        }
+      : undefined,
+  };
 };
 
-// Inspired by `get-port-sync`, but propogates options
-function getPortSync(options) {
-  let isDone = false;
-  let freeport = null;
-  let error = null;
-
-  getPort(options)
-    .then((port) => {
-      isDone = true;
-      freeport = port;
-    })
-    .catch((err) => {
-      isDone = true;
-      error = err;
-    });
-
-  // wait until we're done'
-  deasync.loopWhile(() => !isDone);
-
-  if (error) {
-    throw error;
-  } else {
-    return freeport;
-  }
-}
-
 module.exports = webpackConfig;
diff --git a/yarn.lock b/yarn.lock
@@ -5654,14 +5654,6 @@ dateformat@^4.5.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.6.3.tgz#556fa6497e5217fedb78821424f8a1c22fa3f4b5"
   integrity sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==
 
-deasync@^0.1.20:
-  version "0.1.20"
-  resolved "https://registry.yarnpkg.com/deasync/-/deasync-0.1.20.tgz#546fd2660688a1eeed55edce2308c5cf7104f9da"
-  integrity sha512-E1GI7jMI57hL30OX6Ht/hfQU8DO4AuB9m72WFm4c38GNbUD4Q03//XZaOIHZiY+H1xUaomcot5yk2q/qIZQkGQ==
-  dependencies:
-    bindings "^1.5.0"
-    node-addon-api "^1.7.1"
-
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -11204,11 +11196,6 @@ node-abort-controller@^3.0.1:
   resolved "https://registry.yarnpkg.com/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548"
   integrity sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==
 
-node-addon-api@^1.7.1:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-1.7.1.tgz#cf813cd69bb8d9100f6bdca6755fc268f54ac492"
-  integrity sha512-2+DuKodWvwRTrCfKOeR24KIc5unKjOh8mz17NCzVnHWfjAdDqbfbjqh7gUT+BkXBRQM52+xCHciKWonJ3CbJMQ==
-
 node-emoji@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"