Merge pull request #162 from seznam/ima-webpack-dev-server-refactor

Ima webpack dev server refactor
seznam · Feb 2, 2022 · 46d785d · 46d785d
2 parents 590050d + 049c1f7
commit 46d785d
Show file tree

Hide file tree

Showing 34 changed files with 841 additions and 340 deletions.
diff --git a/packages/cli/src/bin/ima.ts b/packages/cli/src/bin/ima.ts
@@ -4,6 +4,19 @@ import path from 'path';
 import chalk from 'chalk';
 import yargs from 'yargs';
 
+// Normalize NODE_ENV
+switch (process.env.NODE_ENV) {
+  case 'prod':
+    process.env.NODE_ENV = 'production';
+    break;
+
+  case 'dev':
+  case undefined:
+    process.env.NODE_ENV = 'development';
+    break;
+}
+
+// Init CLI
 yargs
   .scriptName(chalk.green.bold('ima'))
   .usage('Usage: $0 <command>')

diff --git a/packages/cli/src/dev-server/devServer.ts b/packages/cli/src/dev-server/devServer.ts
@@ -1,45 +1,38 @@
-import http from 'http';
 import path from 'path';
 
 import hotMiddleware from '@gatsbyjs/webpack-hot-middleware';
 import chalk from 'chalk';
-import express, { Express } from 'express';
+import express from 'express';
 import prettyMs from 'pretty-ms';
-import webpack from 'webpack';
+import { MultiCompiler } from 'webpack';
 import devMiddleware from 'webpack-dev-middleware';
 
-import { IMA_CLI_RUN_SERVER_MESSAGE } from '../lib/cli';
 import logger from '../lib/logger';
-import { createWebpackConfig } from '../webpack/utils';
 import { evalSourceMapMiddleware } from './evalSourceMapMiddleware';
 import { openEditorMiddleware } from './openEditorMiddleware';
 
-async function createDevServer(app: Express) {
-  const { config } = await createWebpackConfig(['client']);
-  const compiler = webpack(config);
-
-  // Override listen so we can react when server is ready
-  app.listen = function () {
-    const server = http.createServer(this);
-
-    // Inform cli that web server has started
-    /* eslint-disable */
-    // @ts-expect-error
-    return server.listen.apply(server, arguments).on('listening', () => {
-      /* eslint-enable */
-      process.send?.(IMA_CLI_RUN_SERVER_MESSAGE);
-    });
-  };
+async function createDevServer(
+  compiler: MultiCompiler,
+  hostname: string,
+  port: number
+) {
+  const app = express();
 
   let isBuilding = false;
   const isVerbose = process.argv.some(arg => arg.includes('--verbose=true'));
 
-  // Define dev middlewares
   app
+    .use((req, res, next) => {
+      // Allow cors
+      res.header('Access-Control-Allow-Origin', '*');
+
+      next();
+    })
     .use(
       devMiddleware(compiler, {
         index: false,
         publicPath: '/',
+        writeToDisk: true,
         ...(!isVerbose ? { stats: 'none' } : undefined),
         serverSideRender: true,
       })
@@ -60,20 +53,20 @@ async function createDevServer(app: Express) {
                   // Used to prevent multiple building messages after each other
                   isBuilding = false;
 
-                  logger.hmr(
+                  logger.update(
                     `Built ${chalk.bold(bundle)} ${chalk.gray(
                       '[' + prettyMs(parseInt(time, 10)) + ']'
                     )}`
                   );
                 } else if (!isBuilding) {
-                  logger.hmr('Building...');
+                  logger.update('Building...');
                   isBuilding = true;
                 }
               },
             }
           : undefined),
         path: '/__webpack_hmr',
-        heartbeat: 10 * 1000,
+        heartbeat: 5000,
       })
     )
     .use('/__get-internal-source', evalSourceMapMiddleware())
@@ -83,7 +76,8 @@ async function createDevServer(app: Express) {
       express.static(
         path.resolve(path.join(__dirname, '../../../error-overlay/dist/'))
       )
-    );
+    )
+    .listen(port, hostname);
 }
 
 export { createDevServer };
diff --git a/packages/cli/src/lib/cli.ts b/packages/cli/src/lib/cli.ts
@@ -3,8 +3,6 @@ import { Arguments, CommandBuilder } from 'yargs';
 import { CliArgs, HandlerFn, ImaCliCommand } from '../types';
 import { requireImaConfig } from '../webpack/utils';
 
-const IMA_CLI_RUN_SERVER_MESSAGE = 'ima-cli-run-server-message';
-
 /**
  * Initializes cli script handler function, which takes cli arguments,
  * parses them and defines defaults. Should be used to initialize any
@@ -17,10 +15,15 @@ function handlerFactory(handlerFn: HandlerFn) {
   return async (yargs: Arguments): Promise<void> => {
     const [command] = yargs._ || [];
 
+    // Force development env for dev
+    process.env.NODE_ENV =
+      command === 'dev' ? 'development' : process.env.NODE_ENV ?? 'production';
+
     return await handlerFn({
       ...yargs,
       rootDir: process.cwd(),
       command: command.toString(),
+      environment: process.env.NODE_ENV,
     } as unknown as CliArgs);
   };
 }
@@ -88,9 +91,4 @@ function sharedArgsFactory(command: ImaCliCommand): CommandBuilder {
   };
 }
 
-export {
-  IMA_CLI_RUN_SERVER_MESSAGE,
-  handlerFactory,
-  resolveCliPluginArgs,
-  sharedArgsFactory,
-};
+export { handlerFactory, resolveCliPluginArgs, sharedArgsFactory };
diff --git a/packages/cli/src/lib/compiler.ts b/packages/cli/src/lib/compiler.ts
@@ -140,8 +140,7 @@ async function runCompiler(
 async function watchCompiler(
   compiler: MultiCompiler,
   args: CliArgs,
-  imaConfig: ImaConfig,
-  watchOptions: Configuration['watchOptions'] = {}
+  imaConfig: ImaConfig
 ): Promise<MultiCompiler> {
   let elapsed: ReturnType<typeof time> | null = null;
   let firstStats: MultiStats | undefined | null;
@@ -161,7 +160,7 @@ async function watchCompiler(
   );
 
   return new Promise<MultiCompiler>((resolve, reject) => {
-    compiler.watch(watchOptions, (error, stats) => {
+    compiler.watch(imaConfig.watchOptions, (error, stats) => {
       // Print elapsed time for first run
       if (elapsed) {
         elapsed && logger.write(chalk.gray(` [${elapsed()}]`));

diff --git a/packages/cli/src/lib/logger.ts b/packages/cli/src/lib/logger.ts
@@ -29,6 +29,6 @@ export default {
   success: printFnFactory('success', chalk.bold.green),
   error: printFnFactory('error', chalk.bold.red),
   warn: printFnFactory('warn', chalk.bold.yellow),
-  hmr: printFnFactory('hmr', chalk.bold.magenta),
+  update: printFnFactory('update', chalk.bold.magenta),
   plugin: printFnFactory('plugin', chalk.bold.blue),
 };
diff --git a/packages/cli/src/scripts/build.ts b/packages/cli/src/scripts/build.ts
@@ -17,9 +17,6 @@ import { createWebpackConfig } from '../webpack/utils';
  * @returns {Promise<void>}
  */
 const build: HandlerFn = async args => {
-  // Set NODE_ENV to production if not defined
-  process.env.NODE_ENV = process.env.NODE_ENV ?? 'production';
-
   try {
     const { config, imaConfig } = await createWebpackConfig(
       ['client', 'server'],

diff --git a/packages/cli/src/scripts/dev.ts b/packages/cli/src/scripts/dev.ts
@@ -6,71 +6,66 @@ import nodemon from 'nodemon';
 import webpack from 'webpack';
 import { CommandBuilder } from 'yargs';
 
+import { createDevServer } from '..';
 import {
   handlerFactory,
-  IMA_CLI_RUN_SERVER_MESSAGE,
   resolveCliPluginArgs,
   sharedArgsFactory,
 } from '../lib/cli';
 import { watchCompiler, handleError } from '../lib/compiler';
 import logger from '../lib/logger';
 import { CliArgs, HandlerFn } from '../types';
-import { createWebpackConfig, resolveEnvironment } from '../webpack/utils';
-
-let nodemonInitialized = false;
-let serverHasStarted = false;
+import {
+  createDevServerConfig,
+  createWebpackConfig,
+  resolveEnvironment,
+} from '../webpack/utils';
 
 /**
  * Starts ima server with nodemon to watch for server-side changes
  * (all changes in server/ folder), to automatically restart application.
  */
 function startNodemon(args: CliArgs) {
-  if (!nodemonInitialized) {
-    nodemon({
-      script: path.join(args.rootDir, 'server/server.js'),
-      watch: [`${path.join(args.rootDir, 'server')}`],
-      args: [`--verbose=${args.verbose}`],
-      cwd: args.rootDir,
-    });
-
-    nodemon.on('start', () => {
-      logger.info(
-        `${serverHasStarted ? 'Restarting' : 'Starting'} application server${
-          !serverHasStarted && (args.forceSPA || args.forceSPAWithHMR)
-            ? ` in ${chalk.black.bgCyan(
-                args.forceSPAWithHMR ? 'SPA mode with HMR' : 'SPA mode'
-              )}`
-            : ''
-        }...`
-      );
-    });
-
-    nodemon.on('crash', error => {
-      logger.error('Application watcher unexpectedly crashed.');
-      logger.error(error);
-    });
-
-    nodemon.once('message', message => {
-      if (message === IMA_CLI_RUN_SERVER_MESSAGE) {
-        serverHasStarted = true;
-
-        if (args.open) {
-          const imaEnvironment = resolveEnvironment(args.rootDir);
-          const port = imaEnvironment?.$Server?.port ?? 3001;
-
-          try {
-            open(`http://localhost:${port}`);
-          } catch (error) {
-            logger.error(
-              `Could not open http://localhost:${port} inside a browser, ${error}`
-            );
-          }
-        }
+  let serverHasStarted = false;
+
+  nodemon({
+    script: path.join(args.rootDir, 'server/server.js'),
+    watch: [`${path.join(args.rootDir, 'server')}`],
+    args: [`--verbose=${args.verbose}`],
+    cwd: args.rootDir,
+  });
+
+  nodemon.on('start', () => {
+    logger.info(
+      `${serverHasStarted ? 'Restarting' : 'Starting'} application server${
+        !serverHasStarted && (args.forceSPA || args.forceSPAWithHMR)
+          ? ` in ${chalk.black.bgCyan(
+              args.forceSPAWithHMR ? 'SPA mode with HMR' : 'SPA mode'
+            )}`
+          : ''
+      }...`
+    );
+
+    if (args.open && !serverHasStarted) {
+      const imaEnvironment = resolveEnvironment(args.rootDir);
+      const port = imaEnvironment?.$Server?.port ?? 3001;
+      serverHasStarted = true;
+
+      try {
+        open(`http://localhost:${port}`);
+      } catch (error) {
+        logger.error(
+          `Could not open http://localhost:${port} inside a browser, ${error}`
+        );
       }
-    });
+    }
+  });
 
-    nodemonInitialized = true;
-  }
+  nodemon.on('crash', error => {
+    logger.error('Application watcher unexpectedly crashed.');
+    logger.error(error);
+    process.exit(1);
+  });
 }
 
 /**
@@ -81,9 +76,6 @@ function startNodemon(args: CliArgs) {
  * @returns {Promise<void>}
  */
 const dev: HandlerFn = async args => {
-  // Force NODE_ENV as development
-  process.env.NODE_ENV = 'development';
-
   // Set force SPA flag so server can react accordingly
   if (args.forceSPA || args.forceSPAWithHMR) {
     args.legacy = true; // SPA only supports es5 versions
@@ -101,6 +93,16 @@ const dev: HandlerFn = async args => {
     // Start watch compiler
     await watchCompiler(compiler, args, imaConfig);
 
+    /**
+     * Set public env variable which is used to load assets in the SSR error view correctly.
+     * CLI Args should always override the config values.
+     */
+    const devServerConfig = createDevServerConfig({ imaConfig, args });
+    process.env.IMA_CLI_DEV_SERVER_PUBLIC = devServerConfig.public;
+
+    // Create dev server for HMR
+    createDevServer(compiler, devServerConfig.hostname, devServerConfig.port);
+
     // Start nodemon and application server
     startNodemon(args);
   } catch (error) {
@@ -140,5 +142,17 @@ export const builder: CommandBuilder = {
     type: 'boolean',
     default: false,
   },
+  port: {
+    desc: 'Dev server port (overrides ima.config.js settings)',
+    type: 'number',
+  },
+  hostname: {
+    desc: 'Dev server hostname (overrides ima.config.js settings)',
+    type: 'string',
+  },
+  public: {
+    desc: 'Dev server public (overrides ima.config.js settings)',
+    type: 'string',
+  },
   ...resolveCliPluginArgs(CMD),
 };