Using React on this blog

This 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 and webpack.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.