Using React on this blog
27 Aug 2015This is a post mostly generated using react and ES6.
Webpack builds the source automatically on file changes and then jekyll serves it. I start these processes using: foreman start --formation="webpack_watch=1,webpack_server=1,jekyll=1"
. For convenience, I bound this to npm start
in the package.json
.
To speed up testing while updating react classes, I set up react-hot-reload.
This allows real-time updates to the react classes, without a reload!
Things I had to do to get this work:
- Added
react-hot
to the js loaders: - Change
output.publicPath
to my webpack-dev-server host and port: - Add plugins:
webpack.HotModuleReplacementPlugin
andwebpack.NoErrorsPlugin
- Set up webpack config
devServer
for serving, particularly adding headers for'Access-Control-Allow-Origin': '*'
- Remove react from webpack externals and load it as a node module
- Add flag to javascript include to switch between serving from
webpack-dev-server
during development to the final build location - Serve the javascript files from the webpack-dev-server
publicPath
- Then run
webpack-dev-server --config webpack.hot.config.js
The changes in the webpack.hot.config.js
are shown in full below:
{
//... webpack config
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel-loader'],
include: path.join(__dirname, 'src')
}
]
},
output: {
path: path.join(__dirname, "public", "js"),
filename: '[name].hot.js',
publicPath: 'http://localhost:8080/'
},
devServer: {
publicPath: 'http://localhost:8080/',
contentBase: "./src",
hot: true,
inline: true,
headers: { 'Access-Control-Allow-Origin': '*' }
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
}
Finally, this last paragraph’s text was generated by jekyll and not react, to demonstrate they can mix seamlessly.