fix(dev-server): start server w/out dev websocket, suppress startup logs config

Author: adamdbradley

src/cli/task-serve.ts

@@ -6,6 +6,8 @@ import exit from 'exit';
 export async function taskServe(process: NodeJS.Process, config: d.Config, flags: d.ConfigFlags) {
   const { Compiler } = require('../compiler/index.js');
 
+  config.suppressLogs = true;
+
   const compiler: d.Compiler = new Compiler(config);
   if (!compiler.isValid) {
     exit(1);
@@ -15,6 +17,7 @@ export async function taskServe(process: NodeJS.Process, config: d.Config, flags
   config.devServer.openBrowser = flags.open;
   config.devServer.hotReplacement = false;
   config.devServer.initialLoadUrl = '/';
+  config.devServer.websocket = false;
   config.maxConcurrentWorkers = 1;
 
   config.devServer.root = process.cwd();

src/compiler/compiler.ts

@@ -27,29 +27,31 @@ export class Compiler implements d.Compiler {
         startupMsg += `💎`;
       }
 
-      config.logger.info(config.logger.cyan(startupMsg));
-
-      if (config.sys.semver.prerelease(config.sys.compiler.version)) {
-        config.logger.warn(config.sys.color.yellow(`This is a prerelease build, undocumented changes might happen at any time. Technical support is not available for prereleases, but any assistance testing is appreciated.`));
-      }
-      if (config.devMode && config.buildEs5) {
-        config.logger.warn(`Generating ES5 during development is a very task expensive, initial and incremental builds will be much slower. Drop the '--es5' flag and use a modern browser for development.
-        If you need ESM output, use the '--esm' flag instead.`);
-      }
-      if (config.devMode && !config.enableCache) {
-        config.logger.warn(`Disabling cache during development will slow down incremental builds.`);
-
+      if (config.suppressLogs !== true) {
+        config.logger.info(config.logger.cyan(startupMsg));
+
+        if (config.sys.semver.prerelease(config.sys.compiler.version)) {
+          config.logger.warn(config.sys.color.yellow(`This is a prerelease build, undocumented changes might happen at any time. Technical support is not available for prereleases, but any assistance testing is appreciated.`));
+        }
+        if (config.devMode && config.buildEs5) {
+          config.logger.warn(`Generating ES5 during development is a very task expensive, initial and incremental builds will be much slower. Drop the '--es5' flag and use a modern browser for development.
+          If you need ESM output, use the '--esm' flag instead.`);
+        }
+        if (config.devMode && !config.enableCache) {
+          config.logger.warn(`Disabling cache during development will slow down incremental builds.`);
+
+        }
+        config.logger.debug(`${details.platform}, ${details.cpuModel}, cpus: ${details.cpus}`);
+        config.logger.debug(`${details.runtime} ${details.runtimeVersion}`);
+
+        config.logger.debug(`compiler runtime: ${config.sys.compiler.runtime}`);
+        config.logger.debug(`compiler build: __BUILDID__`);
+
+        const workerOpts = config.sys.initWorkers(config.maxConcurrentWorkers, config.maxConcurrentTasksPerWorker);
+        config.logger.debug(`compiler workers: ${workerOpts.maxConcurrentWorkers}, tasks per worker: ${workerOpts.maxConcurrentTasksPerWorker}`);
+
+        config.logger.debug(`minifyJs: ${config.minifyJs}, minifyCss: ${config.minifyCss}, buildEs5: ${config.buildEs5}`);
       }
-      config.logger.debug(`${details.platform}, ${details.cpuModel}, cpus: ${details.cpus}`);
-      config.logger.debug(`${details.runtime} ${details.runtimeVersion}`);
-
-      config.logger.debug(`compiler runtime: ${config.sys.compiler.runtime}`);
-      config.logger.debug(`compiler build: __BUILDID__`);
-
-      const workerOpts = config.sys.initWorkers(config.maxConcurrentWorkers, config.maxConcurrentTasksPerWorker);
-      config.logger.debug(`compiler workers: ${workerOpts.maxConcurrentWorkers}, tasks per worker: ${workerOpts.maxConcurrentTasksPerWorker}`);
-
-      config.logger.debug(`minifyJs: ${config.minifyJs}, minifyCss: ${config.minifyCss}, buildEs5: ${config.buildEs5}`);
 
       this.ctx = getCompilerCtx(config);
 

src/compiler/config/validate-dev-server.ts

@@ -24,6 +24,7 @@ export function validateDevServer(config: d.Config) {
   setBooleanConfig(config.devServer, 'gzip', null, true);
   setBooleanConfig(config.devServer, 'hotReplacement', null, true);
   setBooleanConfig(config.devServer, 'openBrowser', null, true);
+  setBooleanConfig(config.devServer, 'websocket', null, true);
 
   validateProtocol(config.devServer);
 

src/declarations/config.ts

@@ -152,6 +152,7 @@ export interface Config extends StencilConfig {
   fsNamespace?: string;
   logLevel?: 'error'|'warn'|'info'|'debug'|string;
   rootDir?: string;
+  suppressLogs?: boolean;
   _isValidated?: boolean;
   _isTesting?: boolean;
 }

src/declarations/dev-server.ts

@@ -23,6 +23,7 @@ export interface DevServerConfig {
   port?: number;
   protocol?: 'http' | 'https';
   root?: string;
+  websocket?: boolean;
 }
 
 

src/dev-server/request-handler.ts

@@ -26,7 +26,7 @@ export function createRequestHandler(devServerConfig: d.DevServerConfig, fs: d.F
         return serve404Content(res, `404 File Not Found, base url: ${devServerConfig.baseUrl}`);
       }
 
-      if (isDevClient(req.pathname)) {
+      if (isDevClient(req.pathname) && devServerConfig.websocket) {
         return serveDevClient(devServerConfig, fs, req, res);
       }
 

src/dev-server/serve-file.ts

@@ -15,7 +15,7 @@ export async function serveFile(devServerConfig: d.DevServerConfig, fs: d.FileSy
       // easy text file, use the internal cache
       let content = await fs.readFile(req.filePath);
 
-      if (util.isHtmlFile(req.filePath) && !util.isDevServerClient(req.pathname)) {
+      if (devServerConfig.websocket && util.isHtmlFile(req.filePath) && !util.isDevServerClient(req.pathname)) {
         // auto inject our dev server script
         content += getDevServerClientScript(devServerConfig, req);
 

src/dev-server/start-server-worker.ts

@@ -15,8 +15,10 @@ export async function startDevServerWorker(process: NodeJS.Process, devServerCon
     // create the http server listening for and responding to requests from the browser
     let httpServer = await createHttpServer(devServerConfig, fs, destroys);
 
-    // upgrade web socket requests the server receives
-    createWebSocket(process, httpServer, destroys);
+    if (devServerConfig.websocket) {
+      // upgrade web socket requests the server receives
+      createWebSocket(process, httpServer, destroys);
+    }
 
     // start listening!
     httpServer.listen(devServerConfig.port, devServerConfig.address);
@@ -30,7 +32,7 @@ export async function startDevServerWorker(process: NodeJS.Process, devServerCon
       }
     });
 
-    function closeServer() {
+    const closeServer = () => {
       // probably recived a SIGINT message from the parent cli process
       // let's do our best to gracefully close everything down first
       destroys.forEach(destroy => {
@@ -45,7 +47,7 @@ export async function startDevServerWorker(process: NodeJS.Process, devServerCon
       }, 5000).unref();
 
       process.removeAllListeners('message');
-    }
+    };
 
     process.once('SIGINT', closeServer);