feat(middleware): expose the memory filesystem (response.locals.fs) (#337)

ferdinando-ferreira · michael-ciniawsky · commit f9a138e9e39d · 2018-09-07T12:56:12.000+02:00
diff --git a/README.md b/README.md
@@ -309,7 +309,7 @@ In order to develop an app using server-side rendering, we need access to the
 generated with each build.
 
 With server-side rendering enabled, `webpack-dev-middleware` sets the `stat` to
-`res.locals.webpackStats` before invoking the next middleware, allowing a
+`res.locals.webpackStats` and the memory filesystem to `res.locals.fs` before invoking the next middleware, allowing a
 developer to render the page body and manage the response to clients.
 
 _Note: Requests for bundle files will still be handled by
@@ -337,17 +337,21 @@ app.use(middleware(compiler, { serverSideRender: true }))
 // The following middleware would not be invoked until the latest build is finished.
 app.use((req, res) => {
   const assetsByChunkName = res.locals.webpackStats.toJson().assetsByChunkName
+  const fs = res.locals.fs
+  const outputPath = res.locals.webpackStats.toJson().outputPath
 
   // then use `assetsByChunkName` for server-sider rendering
   // For example, if you have only one main chunk:
   res.send(`
 <html>
   <head>
     <title>My App</title>
+    <style>
 		${normalizeAssets(assetsByChunkName.main)
 			  .filter(path => path.endsWith('.css'))
-			  .map(path => `<link rel="stylesheet" href="${path}" />`)
+			  .map(path => fs.readFileSync(outputPath + '/' + path))
 			  .join('\n')}
+    </style>
   </head>
   <body>
     <div id="root"></div>
diff --git a/lib/middleware.js b/lib/middleware.js
@@ -19,6 +19,7 @@ module.exports = function wrapper(context) {
       return new Promise(((resolve) => {
         ready(context, () => {
           res.locals.webpackStats = context.webpackStats;
+          res.locals.fs = context.fs;
           resolve(next());
         }, req);
       }));
diff --git a/test/tests/server.js b/test/tests/server.js
@@ -339,6 +339,7 @@ describe('Server', () => {
       request(app).get('/foo/bar')
         .expect(200, () => {
           assert(locals.webpackStats);
+          assert(locals.fs);
           done();
         });
     });
