Skip to content

Commit 24d978f

Browse files
arunodaarunoda
authored
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.
1 parent d0fd010 commit 24d978f

8 files changed

Lines changed: 25 additions & 14 deletions

File tree

‎dist/server/build.js‎

100644100755
Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ var _iframe2 = _interopRequireDefault(_iframe);
4343

4444
var _utils = require('./utils');
4545

46+
var _uuid = require('uuid');
47+
48+
var _uuid2 = _interopRequireDefault(_uuid);
49+
4650
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
4751

4852
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
@@ -91,11 +95,12 @@ if (_commander2.default.staticDir) {
9195
});
9296
}
9397

98+
var cacheKey = _uuid2.default.v4();
9499
// Write both the storybook UI and IFRAME HTML files to destination path.
95100
var headHtml = (0, _utils.getHeadHtml)(configDir);
96101
var publicPath = config.output.publicPath;
97-
_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'index.html'), (0, _index2.default)(publicPath));
98-
_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'iframe.html'), (0, _iframe2.default)(headHtml, publicPath));
102+
_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'index.html'), (0, _index2.default)(publicPath, cacheKey));
103+
_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'iframe.html'), (0, _iframe2.default)(headHtml, publicPath, cacheKey));
99104

100105
// compile all resources with webpack and write them to the disk.
101106
logger.log('Building storybook ...');

‎dist/server/iframe.html.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
44
value: true
55
});
66

7-
exports.default = function (headHtml, publicPath) {
8-
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 ';
7+
exports.default = function (headHtml, publicPath, cacheKey) {
8+
var previewUrl = cacheKey ? 'static/preview.bundle.js?' + cacheKey : 'static/preview.bundle.js';
9+
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 ';
910
};
1011

1112
var _url = require('url');

‎dist/server/index.html.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ Object.defineProperty(exports, "__esModule", {
44
value: true
55
});
66

7-
exports.default = function (publicPath) {
8-
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 ';
7+
exports.default = function (publicPath, cacheKey) {
8+
var managerUrl = cacheKey ? 'static/manager.bundle.js?' + cacheKey : 'static/manager.bundle.js';
9+
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 ';
910
};
1011

1112
var _url = require('url');

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"shelljs": "^0.7.4",
5858
"style-loader": "0.13.1",
5959
"url-loader": "^0.5.7",
60-
"uuid": "^2.0.2",
60+
"uuid": "^2.0.3",
6161
"webpack": "^1.13.1",
6262
"webpack-dev-middleware": "^1.6.0",
6363
"webpack-hot-middleware": "^2.10.0"

‎src/server/build.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import program from 'commander';
55
import path from 'path';
66
import fs from 'fs';
77
import shelljs from 'shelljs';
8+
import uuid from 'uuid';
89
import packageJson from '../../package.json';
910
import getBaseConfig from './config/webpack.config.prod';
1011
import loadConfig from './config';
@@ -69,11 +70,12 @@ if (program.staticDir) {
6970
});
7071
}
7172

73+
const cacheKey = uuid.v4();
7274
// Write both the storybook UI and IFRAME HTML files to destination path.
7375
const headHtml = getHeadHtml(configDir);
7476
const publicPath = config.output.publicPath;
75-
fs.writeFileSync(path.resolve(outputDir, 'index.html'), getIndexHtml(publicPath));
76-
fs.writeFileSync(path.resolve(outputDir, 'iframe.html'), getIframeHtml(headHtml, publicPath));
77+
fs.writeFileSync(path.resolve(outputDir, 'index.html'), getIndexHtml(publicPath, cacheKey));
78+
fs.writeFileSync(path.resolve(outputDir, 'iframe.html'), getIframeHtml(headHtml, publicPath, cacheKey));
7779

7880
// compile all resources with webpack and write them to the disk.
7981
logger.log('Building storybook ...');

‎src/server/iframe.html.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import url from 'url';
22

3-
export default function (headHtml, publicPath) {
3+
export default function (headHtml, publicPath, cacheKey) {
4+
const previewUrl = cacheKey ? `static/preview.bundle.js?${cacheKey}` : 'static/preview.bundle.js';
45
return `
56
<!DOCTYPE html>
67
<html>
@@ -18,7 +19,7 @@ export default function (headHtml, publicPath) {
1819
<body>
1920
<div id="root"></div>
2021
<div id="error-display"></div>
21-
<script src="${url.resolve(publicPath, 'static/preview.bundle.js')}"></script>
22+
<script src="${url.resolve(publicPath, previewUrl)}"></script>
2223
</body>
2324
</html>
2425
`;

‎src/server/index.html.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import url from 'url';
22

3-
export default function (publicPath) {
3+
export default function (publicPath, cacheKey) {
4+
const managerUrl = cacheKey ? `static/manager.bundle.js?${cacheKey}` : 'static/manager.bundle.js';
45
return `
56
<!DOCTYPE html>
67
<html>
@@ -40,7 +41,7 @@ export default function (publicPath) {
4041
</head>
4142
<body style="margin: 0;">
4243
<div id="root"></div>
43-
<script src="${url.resolve(publicPath, 'static/manager.bundle.js')}"></script>
44+
<script src="${url.resolve(publicPath, managerUrl)}"></script>
4445
</body>
4546
</html>
4647
`;

‎yarn.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5110,7 +5110,7 @@ utils-merge@1.0.0:
51105110
version "1.0.0"
51115111
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
51125112

5113-
uuid@^2.0.1, uuid@^2.0.2:
5113+
uuid, uuid@^2.0.1:
51145114
version "2.0.3"
51155115
resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
51165116

0 commit comments

Comments
 (0)