Skip to content

Commit 900124e

Browse files
birdofpreyrubirdofpreyru
committed
Update of assets naming patterns
1 parent 9faeeca commit 900124e

File tree

7 files changed

+46
-47
lines changed

7 files changed

+46
-47
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
# Topcoder React Utils Changelog
22

3+
### v0.3.6
4+
- Updated names pattern for static assets.
5+
36
### v0.3.5
4-
- `cdnPublicPath` option added to the standard Webpack config for apps to support
5-
assets loading via CDN.
7+
- ~~`cdnPublicPath` option added to the standard Webpack config for apps to support
8+
assets loading via CDN.~~ *Removed as not useful.*
69

710
### v0.3.4
811
- Small fixes in the client / server setup.

‎__tests__/server/__snapshots__/renderer.jsx.snap‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`Base rendering of HTML template 1`] = `
77
88
99
<link
10-
href=\\"/test/public/path/main.css\\"
10+
href=\\"/test/public/path/main-1511941200000.css\\"
1111
rel=\\"stylesheet\\"
1212
/>
1313
@@ -25,12 +25,12 @@ exports[`Base rendering of HTML template 1`] = `
2525
window.INJ=\\"MDEyMzQ1Njc4OTAxMjM0NTY3ODkwMTIzNDU2Nzg5MDGF1OkTQprU3+cINSXQietFqgqagolJ5j9NlQutv03F1TZonSyrmykHqLzmKxXS0DK59BGs6WiptmyS+pXhsvdE\\"
2626
</script>
2727
<script
28-
src=\\"/test/public/path/polyfills.js\\"
28+
src=\\"/test/public/path/polyfills-1511941200000.js\\"
2929
type=\\"application/javascript\\"
3030
></script>
3131
3232
<script
33-
src=\\"/test/public/path/main.js\\"
33+
src=\\"/test/public/path/main-1511941200000.js\\"
3434
type=\\"application/javascript\\"
3535
></script>
3636
</body>
@@ -44,7 +44,7 @@ exports[`Config overriding for injection 1`] = `
4444
4545
4646
<link
47-
href=\\"/test/public/path/main.css\\"
47+
href=\\"/test/public/path/main-1511941200000.css\\"
4848
rel=\\"stylesheet\\"
4949
/>
5050
@@ -62,12 +62,12 @@ exports[`Config overriding for injection 1`] = `
6262
window.INJ=\\"MDEyMzQ1Njc4OTAxMjM0NTY3ODkwMTIzNDU2Nzg5MDGF1OkTQprU3+cINSXQietFqgqagolJ5j9NlQutv03F1V2aMuxzUDYDD7cyzqAGNMV/1JiJaq6hJDBBPyP0kOQPqRTHIpwZ3UR8U81Nr3rcN1VwLiH9Tq8uEbe/Wfy3thG6aD9S+CX0jMMtbOYD9Pjt\\"
6363
</script>
6464
<script
65-
src=\\"/test/public/path/polyfills.js\\"
65+
src=\\"/test/public/path/polyfills-1511941200000.js\\"
6666
type=\\"application/javascript\\"
6767
></script>
6868
6969
<script
70-
src=\\"/test/public/path/main.js\\"
70+
src=\\"/test/public/path/main-1511941200000.js\\"
7171
type=\\"application/javascript\\"
7272
></script>
7373
</body>
@@ -81,7 +81,7 @@ exports[`Hemlet integration works 1`] = `
8181
<title data-react-helmet=\\"true\\">Test Page Title</title>
8282
<meta data-react-helmet=\\"true\\" property=\\"description\\" content=\\"Test Page Description\\"/>
8383
<link
84-
href=\\"/test/public/path/main.css\\"
84+
href=\\"/test/public/path/main-1511941200000.css\\"
8585
rel=\\"stylesheet\\"
8686
/>
8787
@@ -99,12 +99,12 @@ exports[`Hemlet integration works 1`] = `
9999
window.INJ=\\"MDEyMzQ1Njc4OTAxMjM0NTY3ODkwMTIzNDU2Nzg5MDGF1OkTQprU3+cINSXQietFqgqagolJ5j9NlQutv03F1TZonSyrmykHqLzmKxXS0DK59BGs6WiptmyS+pXhsvdE\\"
100100
</script>
101101
<script
102-
src=\\"/test/public/path/polyfills.js\\"
102+
src=\\"/test/public/path/polyfills-1511941200000.js\\"
103103
type=\\"application/javascript\\"
104104
></script>
105105
106106
<script
107-
src=\\"/test/public/path/main.js\\"
107+
src=\\"/test/public/path/main-1511941200000.js\\"
108108
type=\\"application/javascript\\"
109109
></script>
110110
</body>
@@ -118,7 +118,7 @@ exports[`Injection of additional JS scripts 1`] = `
118118
119119
120120
<link
121-
href=\\"/test/public/path/main.css\\"
121+
href=\\"/test/public/path/main-1511941200000.css\\"
122122
rel=\\"stylesheet\\"
123123
/>
124124
@@ -136,12 +136,12 @@ exports[`Injection of additional JS scripts 1`] = `
136136
window.INJ=\\"MDEyMzQ1Njc4OTAxMjM0NTY3ODkwMTIzNDU2Nzg5MDGF1OkTQprU3+cINSXQietFqgqagolJ5j9NlQutv03F1TZonSyrmykHqLzmKxXS0DK59BGs6WiptmyS+pXhsvdE\\"
137137
</script>
138138
<script
139-
src=\\"/test/public/path/polyfills.js\\"
139+
src=\\"/test/public/path/polyfills-1511941200000.js\\"
140140
type=\\"application/javascript\\"
141141
></script>
142142
<script>Dummy JS Sript</script><script>Another Dummy JS Script</script>
143143
<script
144-
src=\\"/test/public/path/main.js\\"
144+
src=\\"/test/public/path/main-1511941200000.js\\"
145145
type=\\"application/javascript\\"
146146
></script>
147147
</body>
@@ -155,10 +155,10 @@ exports[`Server-side rendering (SSR); injection of CSS chunks & Redux state 1`]
155155
<title data-react-helmet=\\"true\\"></title>
156156
157157
<link
158-
href=\\"/test/public/path/main.css\\"
158+
href=\\"/test/public/path/main-1511941200000.css\\"
159159
rel=\\"stylesheet\\"
160160
/>
161-
<link data-chunk=\\"test-chunk-a\\" href=\\"/test-chunk-a.css\\" rel=\\"stylesheet\\" /><link data-chunk=\\"test-chunk-b\\" href=\\"/test-chunk-b.css\\" rel=\\"stylesheet\\" />
161+
<link data-chunk=\\"test-chunk-a\\" href=\\"/test/public/path/test-chunk-a-1511941200000.css\\" rel=\\"stylesheet\\" /><link data-chunk=\\"test-chunk-b\\" href=\\"/test/public/path/test-chunk-b-1511941200000.css\\" rel=\\"stylesheet\\" />
162162
<link rel=\\"shortcut icon\\" href=\\"/favicon.ico\\" />
163163
<meta charset=\\"utf-8\\" />
164164
<meta
@@ -173,12 +173,12 @@ exports[`Server-side rendering (SSR); injection of CSS chunks & Redux state 1`]
173173
window.INJ=\\"MDEyMzQ1Njc4OTAxMjM0NTY3ODkwMTIzNDU2Nzg5MDGF1OkTQprU3+cINSXQietFqgqagolJ5j9NlQutv03F1TZonSyrmykHqLzmKxXS0DLPyBqGDNu0Yb+sEvg3s2Nv7ZYfzgAL5LpxryHNGWLiWYlCFgBW1NkdubXDUzuNfddcSwOHmA68IbAvuQnY81RZWKcs/M+w/CFPnw0PiVYASg==\\"
174174
</script>
175175
<script
176-
src=\\"/test/public/path/polyfills.js\\"
176+
src=\\"/test/public/path/polyfills-1511941200000.js\\"
177177
type=\\"application/javascript\\"
178178
></script>
179179
180180
<script
181-
src=\\"/test/public/path/main.js\\"
181+
src=\\"/test/public/path/main-1511941200000.js\\"
182182
type=\\"application/javascript\\"
183183
></script>
184184
</body>
@@ -193,7 +193,7 @@ exports[`Setting of response HTTP status the server-side rendering 1`] = `
193193
<title data-react-helmet=\\"true\\"></title>
194194
195195
<link
196-
href=\\"/test/public/path/main.css\\"
196+
href=\\"/test/public/path/main-1511941200000.css\\"
197197
rel=\\"stylesheet\\"
198198
/>
199199
@@ -211,12 +211,12 @@ exports[`Setting of response HTTP status the server-side rendering 1`] = `
211211
window.INJ=\\"MDEyMzQ1Njc4OTAxMjM0NTY3ODkwMTIzNDU2Nzg5MDGF1OkTQprU3+cINSXQietFqgqagolJ5j9NlQutv03F1TZonSyrmykHqLzmKxXS0DK59BGs6WiptmyS+pXhsvdE\\"
212212
</script>
213213
<script
214-
src=\\"/test/public/path/polyfills.js\\"
214+
src=\\"/test/public/path/polyfills-1511941200000.js\\"
215215
type=\\"application/javascript\\"
216216
></script>
217217
218218
<script
219-
src=\\"/test/public/path/main.js\\"
219+
src=\\"/test/public/path/main-1511941200000.js\\"
220220
type=\\"application/javascript\\"
221221
></script>
222222
</body>

‎config/webpack/app-base.js‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,6 @@ const webpack = require('webpack');
2525
*
2626
* @param {String} ops.babelEnv BABEL_ENV to use for Babel during the build.
2727
*
28-
* @param {String} ops.cdnPublicPath Optional. If provided, it will be used in
29-
* the frontend bundle instead of publicPath, to direct all asset request to
30-
* CDN. The publicPath still will be used by the server as the path to serve
31-
* the assets for CDN requests.
32-
*
3328
* @param {String} ops.context Base URL for resolution of relative
3429
* config paths.
3530
*
@@ -55,9 +50,10 @@ const webpack = require('webpack');
5550
module.exports = function configFactory(ops) {
5651
const o = _.defaults(_.clone(ops), {
5752
cssLocalIdent: '[hash:base64:6]',
53+
publicPath: '',
5854
});
5955

60-
const publicPath = o.cdnPublicPath || o.publicPath || '';
56+
const now = moment();
6157

6258
let buildInfo;
6359
const buildInfoUrl = path.resolve(o.context, '.build-info');
@@ -75,7 +71,7 @@ module.exports = function configFactory(ops) {
7571
mode: ops.babelEnv,
7672

7773
/* Build timestamp. */
78-
timestamp: moment.utc().toISOString(),
74+
timestamp: now.utc().toISOString(),
7975
};
8076
fs.writeFileSync(buildInfoUrl, JSON.stringify(buildInfo));
8177
}
@@ -92,6 +88,7 @@ module.exports = function configFactory(ops) {
9288
'nodelist-foreach-polyfill',
9389
'topcoder-react-utils/dist/client/init',
9490
]);
91+
9592
return {
9693
context: o.context,
9794
entry,
@@ -100,14 +97,14 @@ module.exports = function configFactory(ops) {
10097
fs: 'empty',
10198
},
10299
output: {
103-
chunkFilename: '[name].js',
104-
filename: '[name].js',
100+
chunkFilename: `[name]-${now.valueOf()}.js`,
101+
filename: `[name]-${now.valueOf()}.js`,
105102
path: path.resolve(__dirname, o.context, 'build'),
106-
publicPath: `${publicPath}/`,
103+
publicPath: `${o.publicPath}/`,
107104
},
108105
plugins: [
109106
new ExtractCssChunks({
110-
filename: '[name].css',
107+
filename: `[name]-${now.valueOf()}.css`,
111108
}),
112109
new webpack.DefinePlugin({
113110
BUILD_INFO: JSON.stringify(buildInfo),
@@ -135,7 +132,7 @@ module.exports = function configFactory(ops) {
135132
loader: 'file-loader',
136133
options: {
137134
outputPath: '/fonts/',
138-
publicPath: `${publicPath}/fonts`,
135+
publicPath: `${o.publicPath}/fonts`,
139136
},
140137
}, {
141138
/* Loads JS and JSX moudles, and inlines SVG assets. */
@@ -153,7 +150,7 @@ module.exports = function configFactory(ops) {
153150
loader: 'file-loader',
154151
options: {
155152
outputPath: '/images/',
156-
publicPath: `${publicPath}/images`,
153+
publicPath: `${o.publicPath}/images`,
157154
},
158155
}, {
159156
/* Loads SCSS stylesheets. */

‎docs/webpack-config.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,6 @@ mutation of the config object.
3737
- Config factory handles the following fields in the options object:
3838
- **`babelEnv`** &mdash; *String* &mdash; Babel environment to use for
3939
the Babel compilation step;
40-
- **`cdnPublicPath`** &mdash; *String* &mdash; Optional. If provided,
41-
it will be used in the frontend bundle instead of `publicPath`, to direct
42-
all asset request to CDN. The `publicPath` still will be used by the server
43-
as the path to serve the assets for CDN requests;
4440
- **`context`** &mdash; *String* &mdash; Base URL for the resolution of
4541
relative config paths;
4642
- **`cssLocalIdent`** &mdash; *String* &mdash; Optional. The template for

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,5 +111,5 @@
111111
"prepublishOnly": "npm run build",
112112
"test": "npm run lint && npm run jest"
113113
},
114-
"version": "0.3.5"
114+
"version": "0.3.6"
115115
}

‎src/server/renderer.jsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import _ from 'lodash';
66
import config from 'config';
77
import forge from 'node-forge';
88
import fs from 'fs';
9+
import moment from 'moment';
910
import path from 'path';
1011
import React from 'react';
1112
import ReactDOM from 'react-dom/server';
@@ -128,22 +129,24 @@ export default function factory(webpackConfig, options) {
128129
cipher.finish();
129130
const INJ = forge.util.encode64(`${iv}${cipher.output.data}`);
130131

132+
/* It is supposed to end with '/' symbol as path separator. */
133+
const { publicPath } = webpackConfig.output;
134+
135+
const timestamp = moment(buildInfo.timestamp).valueOf();
136+
131137
if (context.status) res.status(context.status);
132138
const styles = context.chunks.map(chunk => (
133-
`<link data-chunk="${chunk}" href="/${chunk}.css" rel="stylesheet" />`
139+
`<link data-chunk="${chunk}" href="${publicPath}${chunk}-${timestamp}.css" rel="stylesheet" />`
134140
)).join('');
135141

136-
/* It is supposed to end with '/' symbol as path separator. */
137-
const { publicPath } = webpackConfig.output;
138-
139142
res.send((
140143
`<!DOCTYPE html>
141144
<html>
142145
<head>
143146
${helmet ? helmet.title.toString() : ''}
144147
${helmet ? helmet.meta.toString() : ''}
145148
<link
146-
href="${publicPath}main.css"
149+
href="${publicPath}main-${timestamp}.css"
147150
rel="stylesheet"
148151
/>
149152
${styles}
@@ -161,12 +164,12 @@ export default function factory(webpackConfig, options) {
161164
window.INJ="${INJ}"
162165
</script>
163166
<script
164-
src="${publicPath}polyfills.js"
167+
src="${publicPath}polyfills-${timestamp}.js"
165168
type="application/javascript"
166169
></script>
167170
${extraScripts ? extraScripts.join('') : ''}
168171
<script
169-
src="${publicPath}main.js"
172+
src="${publicPath}main-${timestamp}.js"
170173
type="application/javascript"
171174
></script>
172175
</body>

0 commit comments

Comments
 (0)