Fix CSS Modules FOUC with production build (#296)

* Fix CSS Modules FOUC with production build The production build uses the `lib` folder for built assets. Because CSS Modules uses the file path to generate the unique hash for the class names, this causes an inconsistency between the client and server class names, which causes a Flash Of Unstyled Content (FOUC) in production mode. * set node_env=production on prod build
electrode-io · Apr 22, 2017 · 9c88e44 · 9c88e44
1 parent 1575492
commit 9c88e44
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract-style.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract-style.js
@@ -93,7 +93,7 @@ module.exports = function () {
       new CSSSplitPlugin({ size: 4000, imports: true, preserve: true }),
       new webpack.LoaderOptionsPlugin({
         options: {
-          context: Path.resolve(process.cwd(), "client"),
+          context: Path.resolve(process.cwd(), "src"),
           postcss: () => {
             return cssModuleSupport ? [atImport, cssnext({
               browsers: ["last 2 versions", "ie >= 9", "> 5%"]

diff --git a/packages/electrode-archetype-react-app/support/index.js b/packages/electrode-archetype-react-app/support/index.js
@@ -11,9 +11,10 @@ const logger = require("../lib/logger");
 
 const support = {
   cssModuleHook: (options) => {
+    const defaultRootDirPath = process.env.NODE_ENV === "production" ? "lib" : "src";
     options = options || {};
     options.generateScopedName = options.generateScopedName || "[hash:base64]";
-    options.rootDir = options.rootDir || Path.resolve(process.cwd(), "client");
+    options.rootDir = options.rootDir || Path.resolve(process.cwd(), defaultRootDirPath);
 
     require("css-modules-require-hook")(options);
   },

diff --git a/packages/generator-electrode/generators/app/templates/_package.json b/packages/generator-electrode/generators/app/templates/_package.json
@@ -23,7 +23,7 @@
     "start": "if test \"$NODE_ENV\" = \"production\"; then npm run prod; else gulp dev; fi",
     "test": "gulp check",
     "coverage": "gulp check",
-    "prod": "echo 'Starting standalone server in PROD mode'; node ./lib/server/",
+    "prod": "echo 'Starting standalone server in PROD mode'; NODE_ENV=production node ./lib/server/",
     "heroku-postbuild": "gulp build"
   },
   "dependencies": {