Change request handling order, improve dev server error handling

Author: joernb

config/webpackDevServer.ssr.config.js

@@ -19,45 +19,53 @@ module.exports = function(proxy, allowedHost) {
         throw new Error("Webpack compiler with name 'ssr' not found.");
       }
 
-      // stores current request handler, changes after every compilation
-      let ssrHandler;
+      // stores current request handler, changes after every compilation, initially handles pending handler change
+      let ssrHandler = (request, response, next) => {
+        installHandler = handler => {
+          installHandler = handler => ssrHandler = handler;
+          ssrHandler = handler;
+          ssrHandler(request, response, next);
+        };
+      };
+      let installHandler = handler => ssrHandler = handler;
 
       // fetch ssr handler after every compilation
-      multiCompiler.hooks.done.tap('webpackDevServer.ssr', () => {
+      multiCompiler.hooks.done.tap('webpackDevServer.ssr', multiCompilerStats => {
         // make errors inside hook visible
         try {
-          // fetch ssr entry point file name
-          const filename = path.resolve(paths.appBuild, "..", "dist", "ssr.js");
-          // read code from in memory fs
-          const code = compiler.outputFileSystem.readFileSync(filename).toString();
-          // compile code to node module
-          const exports = requireFromString(code, filename);
-
-          if (exports.devServerHandler) {
-            // install dev server handler
-            ssrHandler = exports.devServerHandler(compiler);
-          } else if (exports.default) {
-            // install production handler
-            ssrHandler = exports.default;
-          } else {
-            // no handler found
-            throw new Error("SSR entry point does not export a handler.");
+          const compilerStats = multiCompilerStats.stats.filter(stats => stats.compilation.name === 'ssr')[0];
+
+          if (compilerStats.compilation.errors.length === 0) {
+            // fetch ssr entry point file name
+            const filename = path.resolve(paths.appBuild, "..", "dist", "ssr.js");
+            // read code from in memory fs
+            const code = compiler.outputFileSystem.readFileSync(filename).toString();
+            // compile code to node module
+            const exports = requireFromString(code, filename);
+
+            if (exports.devServerHandler) {
+              // install dev server handler
+              installHandler(exports.devServerHandler(compiler));
+            } else if (exports.default) {
+              // install production handler
+              installHandler(exports.default);
+            } else {
+              // no handler found
+              throw new Error("SSR entry point does not export a handler.");
+            }
           }
         } catch (error) {
           console.error(error);
+          // install error handler
+          installHandler((request, response, next) => {
+            // response.send("ERROR HANDLER: " + error.toString());
+            next(error);
+          });
         }
       });
 
       // install request handler in webpack dev server
-      app.use((request, response, next) => {
-        // forward to handler if it exists
-        if (ssrHandler) {
-          ssrHandler(request, response, next);
-        } else {
-          // skip to dev middleware
-          next();
-        }
-      });
+      app.use((request, response, next) => ssrHandler(request, response, next));
     }
   };
 };

template-typescript/src/index.ssr.tsx

@@ -22,17 +22,11 @@ let readFileSync: (filename: string) => Buffer = fs.readFileSync;
 
 const router = express.Router();
 
-// serve static files from build/ dir
-router.use(express.static(
-  'build',
-  {
-    // do not send index.html for '/'
-    index: false
-  }
-));
+// define ssr path pattern, exclude file and hmr requests
+const ssrRegex = /^\/(?!static|favicon\.ico|.*hot-update\.js).*/;
 
 // do server-side rendering
-router.use((request: express.Request, response: express.Response, next: express.NextFunction) => {
+router.use(ssrRegex, (request: express.Request, response: express.Response, next: express.NextFunction) => {
   const template = readFileSync('build/index.html')
     .toString()
     .replace(/%PUBLIC_URL%/g, process.env.PUBLIC_URL || '');
@@ -48,6 +42,15 @@ router.use((request: express.Request, response: express.Response, next: express.
   });
 });
 
+// serve static files from build/ dir
+router.use(express.static(
+  'build',
+  {
+    // do not send index.html for '/'
+    index: false
+  }
+));
+
 /**
  * Export a request handler. This can be plugged into an express instance or deployed as a serverless function.
  * An express router itself implements the request handler interface (composite design pattern).
@@ -70,12 +73,8 @@ export const devServerHandler = (compiler: any) => {
       )
     );
 
-  // wrap the production router to handle some requests in another way
+  // ignore in-memory file requests, will be handled by the webpack dev middleware
   const devServerRouter = express.Router();
-
-  // skip all requests to static files, the webpack dev middleware will handle them
-  const notAStaticFile = /^\/(?!static|favicon\.ico).*/;
-  devServerRouter.use(notAStaticFile, router);
-
+  devServerRouter.use(ssrRegex, router);
   return devServerRouter;
 };

template/src/index.ssr.js

@@ -22,17 +22,11 @@ let readFileSync = fs.readFileSync;
 
 const router = express.Router();
 
-// serve static files from build/ dir
-router.use(express.static(
-  'build',
-  {
-    // do not send index.html for '/'
-    index: false
-  }
-));
+// define ssr path pattern, exclude file and hmr requests
+const ssrRegex = /^\/(?!static|favicon\.ico|.*hot-update\.js).*/;
 
 // do server-side rendering
-router.use((request, response, next) => {
+router.use(ssrRegex, (request, response, next) => {
   const template = readFileSync('build/index.html')
     .toString()
     .replace(/%PUBLIC_URL%/g, process.env.PUBLIC_URL || '');
@@ -48,6 +42,15 @@ router.use((request, response, next) => {
   });
 });
 
+// serve static files from build/ dir
+router.use(express.static(
+  'build',
+  {
+    // do not send index.html for '/'
+    index: false
+  }
+));
+
 /**
  * Export a request handler. This can be plugged into an express instance or deployed as a serverless function.
  * An express router itself implements the request handler interface (composite design pattern).
@@ -70,12 +73,8 @@ export const devServerHandler = compiler => {
       )
     );
 
-  // wrap the production router to handle some requests in another way
+  // ignore in-memory file requests, will be handled by the webpack dev middleware
   const devServerRouter = express.Router();
-
-  // skip all requests to static files, the webpack dev middleware will handle them
-  const notAStaticFile = /^\/(?!static|favicon\.ico).*/;
-  devServerRouter.use(notAStaticFile, router);
-
+  devServerRouter.use(ssrRegex, router);
   return devServerRouter;
 };