Improving SSR Support (#65)

* Adding react-loadable

* Updating the libs for react-loadable

* Updating webpack config

* Updating webpack

* Adding ssr addon

* Updating noderesolve

* Updating deps

* Updating loadable

* Updating ace

* webpack config updates

* Updating addon

* Adding loadable proxy

* Updating deps for loadable plugin

* Updating plugin location

* Updating deps

* Updates

Author: Schachte

lib/start.js

@@ -7,6 +7,9 @@ const {
   retrieveClientConfig,
   retrieveServerConfig,
 } = require('./webpack.config')
+const path = require('path')
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 module.exports = ({ args, getPackage }) => {
   const pkg = getPackage()
@@ -47,21 +50,30 @@ module.exports = ({ args, getPackage }) => {
   const webpackDevServer = new WebpackDevServer(clientCompiler, {
     before: app => {
       if (args.middleware) {
-        let clientBundle = null
-
-        clientCompiler.hooks.emit.tap('CompiledFilePlugin', compilation => {
-          clientBundle = Object.keys(compilation.assets).filter(name =>
-            name.match(/^bundle.[a-z0-9]+.\.js$/)
-          )[0]
-        })
-
         const server = retrieveServerConfig({
           ...configuration,
           main: args.middleware,
         })
 
-        app.use((req, res, next) => {
-          req.clientBundle = clientBundle
+        app.use(async (req, res, next) => {
+          const fs = clientCompiler.outputFileSystem
+          const jsonFile = path.join(
+            process.cwd(),
+            './target/webapp/react-loadable.json'
+          )
+
+          while (!fs.existsSync(jsonFile)) {
+            await sleep(100)
+          }
+
+          try {
+            const clientBundles = JSON.parse(fs.readFileSync(jsonFile, 'utf-8'))
+            req.clientBundles = clientBundles
+          } catch (e) {
+            console.error(e)
+            req.clientBundles = []
+          }
+
           next()
         })
 

lib/webpack.config.js

@@ -15,7 +15,7 @@ const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer')
 const getPackageWhitelist = require('./package-utils').getPackageWhitelist
 const getResolves = require('./package-utils').getResolves
 const getTemplatePath = require('./package-utils').getTemplatePath
-const nodeExternals = require('webpack-node-externals')
+const ReactLoadableSSRAddon = require('react-loadable-ssr-addon')
 
 const resolve = place => path.resolve(place)
 const nodeResolve = place => require.resolve(place)
@@ -46,7 +46,11 @@ const babelLoader = (plugins = []) => ({
       nodeResolve('babel-preset-stage-0'),
     ],
     cacheDirectory: true,
-    plugins: [nodeResolve('react-hot-loader/babel'), ...plugins],
+    plugins: [
+      nodeResolve('react-hot-loader/babel'),
+      nodeResolve('react-loadable/babel'),
+      ...plugins,
+    ],
   },
 })
 
@@ -399,6 +403,12 @@ const dev = (base, { main, packageJson }) => {
       new SimpleProgressWebpackPlugin({
         format: 'compact',
       }),
+      new ReactLoadableSSRAddon({
+        filename: path.join(
+          process.cwd(),
+          './target/webapp/react-loadable.json'
+        ),
+      }),
     ],
   })
 }
@@ -478,6 +488,12 @@ const prod = (base, { main, packageJson }) => {
         filename: 'index.html',
         template,
       }),
+      new ReactLoadableSSRAddon({
+        filename: path.join(
+          process.cwd(),
+          './target/webapp/react-loadable.json'
+        ),
+      }),
     ],
     module: {
       rules: [

package.json

@@ -70,6 +70,8 @@
     "react-dev-utils": "5.0.2",
     "react-docgen-typescript-loader": "^3.1.0",
     "react-hot-loader": "4.12.6",
+    "react-loadable": "^5.5.0",
+    "react-loadable-ssr-addon": "https://github.com/connexta/react-loadable-ssr-addon#8c8d2e52884250c0e82ebcb64d6a64544b393fae",
     "require-from-string": "^2.0.2",
     "rimraf": "2.6.2",
     "script-loader": "0.7.2",
@@ -90,15 +92,14 @@
     "webpack-bundle-analyzer": "3.3.2",
     "webpack-dev-server": "3.2.1",
     "webpack-merge": "4.1.2",
-    "webpack-node-externals": "^1.7.2",
     "whatwg-fetch": "2.0.4",
     "worker-loader": "1.1.1"
   },
   "devDependencies": {
     "@types/storybook__addon-info": "^4.1.2",
     "@types/storybook__react": "^4.0.2",
     "@types/webpack-env": "1.13.6",
-    "react-dom": "^15.1.0 || ^16.0.0",
-    "react": "^15.1.0 || ^16.0.0"
+    "react": "^15.1.0 || ^16.0.0",
+    "react-dom": "^15.1.0 || ^16.0.0"
   }
 }

react-loadable/index.js

@@ -0,0 +1 @@
+module.exports = require('react-loadable')

react-loadable/webpack.js

@@ -0,0 +1 @@
+exports.getBundles = require('react-loadable-ssr-addon').getBundles

yarn.lock

@@ -10343,7 +10343,7 @@ promise@^7.0.3, promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-[email protected], prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+[email protected], prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10777,6 +10777,17 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+"react-loadable-ssr-addon@https://github.com/connexta/react-loadable-ssr-addon#8c8d2e52884250c0e82ebcb64d6a64544b393fae":
+  version "0.2.0"
+  resolved "https://github.com/connexta/react-loadable-ssr-addon#8c8d2e52884250c0e82ebcb64d6a64544b393fae"
+
+react-loadable@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.5.0.tgz#582251679d3da86c32aae2c8e689c59f1196d8c4"
+  integrity sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==
+  dependencies:
+    prop-types "^15.5.0"
+
 react-popper-tooltip@^2.8.3:
   version "2.8.3"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.8.3.tgz#1c63e7473a96362bd93be6c94fa404470a265197"
@@ -13229,11 +13240,6 @@ [email protected]:
   dependencies:
     lodash "^4.17.5"
 
-webpack-node-externals@^1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz#6e1ee79ac67c070402ba700ef033a9b8d52ac4e3"
-  integrity sha512-ajerHZ+BJKeCLviLUUmnyd5B4RavLF76uv3cs6KNuO8W+HuQaEs0y0L7o40NQxdPy5w0pcv8Ew7yPUAQG0UdCg==
-
 webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"