Add a random cache key to all .js urls in the build. (#578)

* Add a random cache key to all .js urls in the build. * Fix lint issues.
storybookjs · Oct 27, 2016 · 24d978f · 24d978f
1 parent d0fd010
commit 24d978f
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 14 deletions.
diff --git a/dist/server/build.js b/dist/server/build.js
@@ -43,6 +43,10 @@ var _iframe2 = _interopRequireDefault(_iframe);
 
 var _utils = require('./utils');
 
+var _uuid = require('uuid');
+
+var _uuid2 = _interopRequireDefault(_uuid);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'production';
@@ -91,11 +95,12 @@ if (_commander2.default.staticDir) {
   });
 }
 
+var cacheKey = _uuid2.default.v4();
 // Write both the storybook UI and IFRAME HTML files to destination path.
 var headHtml = (0, _utils.getHeadHtml)(configDir);
 var publicPath = config.output.publicPath;
-_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'index.html'), (0, _index2.default)(publicPath));
-_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'iframe.html'), (0, _iframe2.default)(headHtml, publicPath));
+_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'index.html'), (0, _index2.default)(publicPath, cacheKey));
+_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'iframe.html'), (0, _iframe2.default)(headHtml, publicPath, cacheKey));
 
 // compile all resources with webpack and write them to the disk.
 logger.log('Building storybook ...');

diff --git a/dist/server/iframe.html.js b/dist/server/iframe.html.js
@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.default = function (headHtml, publicPath) {
-  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <script>\n          if (window.parent !== window) {\n            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n          }\n        </script>\n        <title>React Storybook</title>\n        ' + headHtml + '\n      </head>\n      <body>\n        <div id="root"></div>\n        <div id="error-display"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'static/preview.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
+exports.default = function (headHtml, publicPath, cacheKey) {
+  var previewUrl = cacheKey ? 'static/preview.bundle.js?' + cacheKey : 'static/preview.bundle.js';
+  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <script>\n          if (window.parent !== window) {\n            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;\n          }\n        </script>\n        <title>React Storybook</title>\n        ' + headHtml + '\n      </head>\n      <body>\n        <div id="root"></div>\n        <div id="error-display"></div>\n        <script src="' + _url2.default.resolve(publicPath, previewUrl) + '"></script>\n      </body>\n    </html>\n  ';
 };
 
 var _url = require('url');

diff --git a/dist/server/index.html.js b/dist/server/index.html.js
@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.default = function (publicPath) {
-  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <title>React Storybook</title>\n        <style>\n          /*\n            When resizing panels, the drag event breaks if the cursor\n            moves over the iframe. Add the \'dragging\' class to the body\n            at drag start and remove it when the drag ends.\n           */\n          .dragging iframe {\n            pointer-events: none;\n          }\n\n          /* Styling the fuzzy search box placeholders */\n          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox::-moz-placeholder { /* Firefox 19+ */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox:focus{\n            border-color: #EEE !important;\n          }\n\n          .btn:hover{\n            background-color: #eee\n          }\n        </style>\n      </head>\n      <body style="margin: 0;">\n        <div id="root"></div>\n        <script src="' + _url2.default.resolve(publicPath, 'static/manager.bundle.js') + '"></script>\n      </body>\n    </html>\n  ';
+exports.default = function (publicPath, cacheKey) {
+  var managerUrl = cacheKey ? 'static/manager.bundle.js?' + cacheKey : 'static/manager.bundle.js';
+  return '\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <meta charset="utf-8">\n        <meta name="viewport" content="width=device-width, initial-scale=1">\n        <title>React Storybook</title>\n        <style>\n          /*\n            When resizing panels, the drag event breaks if the cursor\n            moves over the iframe. Add the \'dragging\' class to the body\n            at drag start and remove it when the drag ends.\n           */\n          .dragging iframe {\n            pointer-events: none;\n          }\n\n          /* Styling the fuzzy search box placeholders */\n          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox::-moz-placeholder { /* Firefox 19+ */\n            color: #ddd;\n            font-size: 16px;\n          }\n\n          .searchBox:focus{\n            border-color: #EEE !important;\n          }\n\n          .btn:hover{\n            background-color: #eee\n          }\n        </style>\n      </head>\n      <body style="margin: 0;">\n        <div id="root"></div>\n        <script src="' + _url2.default.resolve(publicPath, managerUrl) + '"></script>\n      </body>\n    </html>\n  ';
 };
 
 var _url = require('url');

diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "shelljs": "^0.7.4",
     "style-loader": "0.13.1",
     "url-loader": "^0.5.7",
-    "uuid": "^2.0.2",
+    "uuid": "^2.0.3",
     "webpack": "^1.13.1",
     "webpack-dev-middleware": "^1.6.0",
     "webpack-hot-middleware": "^2.10.0"

diff --git a/src/server/build.js b/src/server/build.js
@@ -5,6 +5,7 @@ import program from 'commander';
 import path from 'path';
 import fs from 'fs';
 import shelljs from 'shelljs';
+import uuid from 'uuid';
 import packageJson from '../../package.json';
 import getBaseConfig from './config/webpack.config.prod';
 import loadConfig from './config';
@@ -69,11 +70,12 @@ if (program.staticDir) {
   });
 }
 
+const cacheKey = uuid.v4();
 // Write both the storybook UI and IFRAME HTML files to destination path.
 const headHtml = getHeadHtml(configDir);
 const publicPath = config.output.publicPath;
-fs.writeFileSync(path.resolve(outputDir, 'index.html'), getIndexHtml(publicPath));
-fs.writeFileSync(path.resolve(outputDir, 'iframe.html'), getIframeHtml(headHtml, publicPath));
+fs.writeFileSync(path.resolve(outputDir, 'index.html'), getIndexHtml(publicPath, cacheKey));
+fs.writeFileSync(path.resolve(outputDir, 'iframe.html'), getIframeHtml(headHtml, publicPath, cacheKey));
 
 // compile all resources with webpack and write them to the disk.
 logger.log('Building storybook ...');

diff --git a/src/server/iframe.html.js b/src/server/iframe.html.js
@@ -1,6 +1,7 @@
 import url from 'url';
 
-export default function (headHtml, publicPath) {
+export default function (headHtml, publicPath, cacheKey) {
+  const previewUrl = cacheKey ? `static/preview.bundle.js?${cacheKey}` : 'static/preview.bundle.js';
   return `
     <!DOCTYPE html>
     <html>
@@ -18,7 +19,7 @@ export default function (headHtml, publicPath) {
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="${url.resolve(publicPath, 'static/preview.bundle.js')}"></script>
+        <script src="${url.resolve(publicPath, previewUrl)}"></script>
       </body>
     </html>
   `;

diff --git a/src/server/index.html.js b/src/server/index.html.js
@@ -1,6 +1,7 @@
 import url from 'url';
 
-export default function (publicPath) {
+export default function (publicPath, cacheKey) {
+  const managerUrl = cacheKey ? `static/manager.bundle.js?${cacheKey}` : 'static/manager.bundle.js';
   return `
     <!DOCTYPE html>
     <html>
@@ -40,7 +41,7 @@ export default function (publicPath) {
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
-        <script src="${url.resolve(publicPath, 'static/manager.bundle.js')}"></script>
+        <script src="${url.resolve(publicPath, managerUrl)}"></script>
       </body>
     </html>
   `;

diff --git a/yarn.lock b/yarn.lock
@@ -5110,7 +5110,7 @@ utils-merge@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
 
-uuid@^2.0.1, uuid@^2.0.2:
+uuid, uuid@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"