Enable build cache and HMR (#2656)

* Enable build cache and HMR

https://issues.redhat.com/browse/COST-3220

* Refactor default exports for HMR

* Temporarily disabled HMR

fec.config.js

@@ -1,3 +1,5 @@
+// Based on https://github.com/RedHatInsights/frontend-components/blob/master/packages/config/src/scripts/dev.webpack.config.js
+
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
@@ -36,7 +38,13 @@ module.exports = {
   proxyVerbose: true,
   stats,
   standalone: process.env.LOCAL_API_PORT ? true : false,
+  useCache: true,
   useProxy: process.env.LOCAL_API_PORT ? false : true,
+  /**
+   * Temporarily disabled HMR -- see https://issues.redhat.com/browse/COST-3224
+   *
+  ...(process.env.HMR && { _unstableHotReload: process.env.HMR === 'true' }),
+   */
   /**
    * Config for federated modules
    */

package.json

@@ -14,12 +14,13 @@
     "check:milestone": "npx npm-check-updates -t newest -f '/^(@patternfly|@redhat-cloud-services)/'",
     "check:milestone:update": "npx npm-check-updates -t newest -f '/^(@patternfly|@redhat-cloud-services)/' -u",
     "clean": "rimraf dist .cache",
-    "install:pkgs": "yarn clean && yarn install",
+    "install:pkgs": "yarn install",
     "lint": "yarn lint:ts",
     "lint:ts": "eslint src",
     "lint:ts:fix": "eslint src --fix",
     "patch:hosts": "fec patch-etc-hosts",
-    "start": "fec dev",
+    "postinstall": "rm -rf .cache",
+    "start": "HMR=true fec dev",
     "start:csc": "CLOUD_SERVICES_CONFIG_PORT=8889 npm start",
     "start:ephemeral": "EPHEMERAL_PORT=8000 npm start",
     "start:local:api": "LOCAL_API_PORT=8000 LOCAL_API_HOST=localhost KEYCLOAK_PORT=4020 npm start",

src/app.tsx

@@ -88,4 +88,9 @@ const mapStateToProps = createMapStateToProps<AppOwnProps, AppStateProps>((state
 
 const mapDispatchToProps: AppDispatchProps = { history };
 
-export default compose<React.ComponentType<AppOwnProps>>(withRouter, connect(mapStateToProps, mapDispatchToProps))(App);
+const ComposedApp = compose<React.ComponentType<AppOwnProps>>(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(App);
+
+export default ComposedApp;

src/appEntry.tsx

@@ -29,7 +29,7 @@ const store = configureStore({
   // },
 });
 
-export default () => {
+const AppEntry = () => {
   const basename = getBaseName(window.location.pathname);
   const locale = getLocale();
 
@@ -46,3 +46,5 @@ export default () => {
     </div>
   );
 };
+
+export default AppEntry;