Register hooks first, for both SSR and non-SSR

Author: ajones513

packages/react-scripts/scripts/start-ssr.js

@@ -31,35 +31,31 @@ const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
 verifyTypeScriptSetup();
 // @remove-on-eject-end
 
-const path = require('path');
 const fs = require('fs');
-const configFactory = require('../config/webpack.config.ssr');
 const { createCompiler } = require('react-dev-utils/WebpackDevServerUtils');
 const webpack = require('webpack');
 
+const configFactory = require('../config/webpack.config.ssr');
 const paths = require('../config/paths');
+
+const registerStatusFileHooks = require('./utils/registerStatusFileHooks');
+
 const config = configFactory('development');
 const appName = require(paths.appPackageJson).name;
 const useYarn = fs.existsSync(paths.yarnLockFile);
 
-const compiler = createCompiler(webpack, config, 'acorn-webapp', appName, useYarn);
+const compiler = createCompiler(webpack, config, appName, undefined, useYarn);
+
+registerStatusFileHooks(compiler);
 
 compiler.watch(
   {
     ignored: ['node_modules'],
   },
-  (err, stats) => {
+  err => {
     if (err) {
       console.log(err.message || err);
       process.exit(1);
     }
-  },
+  }
 );
-
-compiler.hooks.invalid.tap('invalid', () => {
-  fs.writeFileSync(path.join(paths.appBuildSsr, '.build-invalidated'), Date.now());
-});
-
-compiler.hooks.done.tap('done', () => {
-  fs.writeFileSync(path.join(paths.appBuildSsr, '.build-done'), Date.now());
-});

packages/react-scripts/scripts/start.js

@@ -31,6 +31,7 @@ const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
 verifyTypeScriptSetup();
 // @remove-on-eject-end
 
+const path = require('path');
 const fs = require('fs');
 const chalk = require('chalk');
 const webpack = require('webpack');
@@ -48,6 +49,8 @@ const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
 
+const registerStatusFileHooks = require('./utils/registerStatusFileHooks');
+
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
 
@@ -97,6 +100,9 @@ checkBrowsers(paths.appPath, isInteractive)
     const urls = prepareUrls(protocol, HOST, port);
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+
+    registerStatusFileHooks(compiler);
+
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
@@ -106,7 +112,7 @@ checkBrowsers(paths.appPath, isInteractive)
       urls.lanUrlForConfig
     );
 
-    serverConfig.writeToDisk = (filePath) => {
+    serverConfig.writeToDisk = filePath => {
       return /loadable-stats\.json/.test(filePath);
     };
 

packages/react-scripts/scripts/utils/registerStatusFileHooks.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const paths = require('../../config/paths');
+
+module.exports = function(compiler) {
+  compiler.hooks.invalid.tap('invalid', () => {
+    fs.writeFileSync(
+      path.join(paths.appBuildSsr, '.build-status'),
+      'IN_PROGRESS'
+    );
+  });
+  compiler.hooks.done.tap('done', () => {
+    fs.writeFileSync(path.join(paths.appBuildSsr, '.build-status'), 'DONE');
+  });
+};