Skip to content
This repository was archived by the owner on May 21, 2020. It is now read-only.

Commit 2ab48b3

Browse files
mrtnbrodermrtnbroder
committed
chore(webpack): hash styles, no jsx on server
1 parent 8f258f0 commit 2ab48b3

File tree

6 files changed

+41
-30
lines changed

6 files changed

+41
-30
lines changed

‎src/server/components/Html.jsx

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11

2-
import { appName, inlineName, isDev, outputPath, statsName, vendorName } from '../../../webpack/env'
3-
import { renderToStaticMarkup as renderStatic } from 'react-dom/server'
2+
import { appName, cssName, inlineName, isDev, outputPath, statsName, vendorName } from '../../../webpack/env'
43
import React, { PropTypes as PT } from 'react'
54
import fs from 'fs'
65

@@ -10,23 +9,23 @@ export const getScript = (name) => {
109
const file = fs.readFileSync(`${outputPath}/${statsName}.json`)
1110
const stats = JSON.parse(file)
1211

13-
return name === 'app' && !isDev
14-
? `/${stats.assetsByChunkName[name][0]}`
15-
: `/${stats.assetsByChunkName[name]}`
12+
return name === appName && !isDev
13+
? `/${stats.assetsByChunkName[appName][0]}`
14+
: name === cssName && !isDev
15+
? `/${stats.assetsByChunkName[appName][1]}`
16+
: `/${stats.assetsByChunkName[name]}`
1617
}
1718

18-
export const getWebpackJsonpInlineScript = () => {
19-
if (isDev) return false
20-
return fs.readFileSync(`${outputPath}/${inlineName}.js`)
21-
}
22-
23-
export const renderToStaticMarkup = (props) => `<!doctype html>${renderStatic(<Html {...props}/>)}`
19+
export const getWebpackJsonpInlineScript = () => isDev
20+
? false
21+
: fs.readFileSync(`${outputPath}/${inlineName}.js`)
2422

2523
const Html = ({
2624
app,
2725
content,
2826
initalState,
2927
inline,
28+
styles,
3029
vendor,
3130
}) => (
3231
<html
@@ -77,7 +76,7 @@ const Html = ({
7776
<meta content='/ms-icon-144x144.png' name='msapplication-TileImage'/>
7877
<meta content='#ffffff' name='theme-color'/>
7978

80-
{!isDev && <link href='/style.css' rel='stylesheet'/>}
79+
{!isDev && <link href={styles} rel='stylesheet'/>}
8180
</head>
8281
<body>
8382
<div id='app'>
@@ -96,14 +95,16 @@ Html.propTypes = {
9695
app: PT.string.isRequired,
9796
content: PT.string.isRequired,
9897
initalState: PT.object.isRequired,
98+
inline: isDev ? PT.bool : PT.string.isRequired,
99+
styles: isDev ? PT.bool : PT.string.isRequired,
99100
vendor: PT.string.isRequired,
100-
inline: isDev ? PT.bool : PT.string,
101101
}
102102

103103
Html.defaultProps = {
104104
app: getScript(appName),
105-
vendor: getScript(vendorName),
106105
inline: getWebpackJsonpInlineScript(),
106+
styles: getScript(cssName),
107+
vendor: getScript(vendorName),
107108
}
108109

109110
export default Html

‎src/server/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ const app = express()
1515
app.disable('x-powered-by')
1616

1717
// Compression
18-
if (!isDev) app.use(compression())
18+
if (isDev) {
19+
app.enable('trust proxy')
20+
} else {
21+
app.use(compression())
22+
}
1923

2024
// I. Static Assets
2125
m.staticMiddleware(app)

‎src/server/middlewares/viewMiddleware.js

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44
//
55

66
import { Provider } from 'react-redux'
7-
import { renderToStaticMarkup } from '../components/Html.jsx'
8-
import { renderToString } from 'react-dom/server'
9-
import { route as routes } from '../../Application'
7+
import { renderToStaticMarkup, renderToString } from 'react-dom/server'
108
import { RouterContext, match } from 'react-router'
9+
import { createElement } from 'react'
10+
11+
import { route as routes } from '../../Application'
1112
import configureStore from 'configureStore'
12-
import React from 'react'
13+
import Html from '../components/Html.jsx'
1314
import reducers from '../../shared/modules'
1415

1516
export default (app) => {
@@ -35,12 +36,15 @@ export default (app) => {
3536
function renderHtml(nextProps, store) {
3637
const initalState = store.getState()
3738
const provider = (
38-
<Provider store={store}>
39-
<RouterContext {...nextProps}/>
40-
</Provider>
39+
createElement(Provider, { store },
40+
createElement(RouterContext, nextProps)
41+
)
4142
)
4243
const content = renderToString(provider)
44+
const markup = renderToStaticMarkup(
45+
createElement(Html, { content, initalState })
46+
)
4347

44-
return renderToStaticMarkup({ content, initalState })
48+
return `<!doctype html>${markup}`
4549
}
4650
}

‎webpack/env.es6

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ export const signal = 'server is running at'
1818
* WEBPACK
1919
*/
2020

21-
// style.css
22-
export const cssName = 'style.css'
21+
// styles.css
22+
export const cssName = 'styles'
2323
// app.js
2424
export const appName = 'app'
2525
// vendor.js

‎webpack/env.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const signal = exports.signal = 'server is running at'
1818
* WEBPACK
1919
*/
2020

21-
// style.css
22-
const cssName = exports.cssName = 'style.css'
21+
// styles.css
22+
const cssName = exports.cssName = 'styles'
2323
// app.js
2424
const appName = exports.appName = 'app'
2525
// vendor.js

‎webpack/webpack.client.config.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11

2-
const { isDev, appName, inlineName, outputPath, statsName, cssName, vendorName } = require('./env')
2+
const { appName, cssName, inlineName, isDev, statsName, vendorName } = require('./env')
33
const { webpackConfig, styleLoader, cssLoader, postcssLoader } = require('./webpack.config')
44
const { StatsWriterPlugin } = require('webpack-stats-plugin')
55
const ExtractTextPlugin = require('extract-text-webpack-plugin')
66
const merge = require('lodash.merge')
77
const webpack = require('webpack')
88

99
const filename = isDev ? '[name].js' : '[name].[chunkhash].js'
10-
const extractCSS = new ExtractTextPlugin({ filename: cssName, allChunks: true })
10+
const extractCSS = new ExtractTextPlugin({
11+
filename: `${cssName}.[contenthash].css`,
12+
allChunks: true
13+
})
1114

1215
//
1316
// Client Config
@@ -21,7 +24,6 @@ const webpackClientConfig = merge({}, webpackConfig, {
2124
output: {
2225
chunkFilename: filename,
2326
filename,
24-
path: outputPath,
2527
},
2628
module: {
2729
rules: webpackConfig.module.rules.concat([

0 commit comments

Comments
 (0)