Webpack 2 with Multipage Express web app - node.js

Question

we are migrating our web app from ASP.NET and jQuery to Node.js with Express and React. We are using the typical multipage application (MVC), and we are confortable with this architecture and we need it for some special cases (basically SEO, and we know that with react now you can improve the SEO).
We want to maintain our routes without using React Router, we are going to use Express MVC Router but we want to use WebPack 2 with React.
The first step was migrating the BackEnd (we are almost done), and the second part is migrate the frontend from jQuery to React (yes, React like UI Library, we don't want Redux and we can work fine with just Component State because our pages are not very complex, and we want to reuse components).
Like we are using MVC Express routes we need to use Code Spliting from WebPack 2 to generate multiple entries for each page (js files), and we want to integrate typical stuff for make more productive: live reload, production build js, etc.
We have one example working of WebPack for creating the Entry libraries, and vendors and common, but we don't know how to integrate with our server.js (Express app), and have a good flow...
Example WebPack config:
var path = require('path')
var webpack = require('webpack')
var config = {
entry: {
vendors: ['react', 'lodash'],
common: ['lodash'],
home: path.resolve(__dirname, './src/main'),
page1: path.resolve(__dirname, './src/page1'),
page2: path.resolve(__dirname, './src/page2'),
},
output: {
path: path.join(__dirname, 'js'),
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
devtool: 'source-map',
devServer: {
inline: true,
contentBase: './src',
port: 3000
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false
},
compress: {
warnings: false,
screw_ie8: true
}
}),
new webpack.optimize.CommonsChunkPlugin({
names: ["common", "vendors"],
minChunks: Infinity
})
]
}
if (process.env.NODE_ENV === 'production') {
config.output.path = path.join(__dirname, 'dist/')
/*
Note: by default, React will be in development mode
see https://facebook.github.io/react/downloads.html
*/
config.plugins.push(new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
}))
}
module.exports = config
My question is... Can we get this working with Express and live reload? Like we do with create-react-app? Any link or tutorial to explain how to work with Multipage applications and WebPack together?
Thanks!

Answer 1

I'm the author of quickstart-express-react. We're apparently facing similar challenges, so I've updated the repo to better illustrate your usage scenario.
The basic idea, if you're looking to build an MPA and need both "generic" reloading and react hot reloading during development, you can use browsersync programatically as a proxy, and - very importantly run webpack-dev-middleware & webpack-hot-middleware inside browsersync and not your website/application.
It took me a week of trial & error to build that scenario, hence the decision to open-source it on GitHub.
Other things to consider:
Be careful to use the latest webpack & loaders/plugins, i.e. webpack#^2.2.1 and react-hot-loader#^3.0.0-beta.6 at the moment, keep an eye on their repos and update if you're facing problems;
If you're coming from ASP.NET, you'll probably be interested in Vash template engine.
IMO, at the moment webpack and its entire loaders/plugins ecosystem is cutting-edge and evolving fast, and as you've seen, building a realistic workflow configuration is close to madness. But the benefits of having full reloading during development are tremendous.
Hopefully the madness will change, now that webpack#2 is finally out of beta.
Hope this helps, and thank you starring the repo :-)

Answer 2

A quick update on a potentially different approach - although I published the quickstart-express-react two months ago, I like to keep an open mind and I'm still researching other alternatives for a better developer experience. And I might have found one.
Since you wrote you've almost finished porting the backend, this is probably not what you're looking for right now, but for future projects make sure to check and keep an eye on next.js, especially if you're interested in building isomorphic/universal react apps. I think the guys at ZEIT are doing an extraordinary job of simplifying the entire development workflow, especially considering the current state of the webpack ecosystem.
I'm currently looking for a sane way of building universal React websites/apps with react-toolbox components, and next.js does look promising, especially for a single/independent developer or a small team not wanting to deal with the full complexity of setting up a webpack scenario from scratch.
They're also offering a fantastic cloud deployment solution, but it's worth mentioning that next.js is fully open-source (MIT license) and it can be used in dev/prod on any infrastructure.
Disclaimer: I am in now way affiliated with ZEIT. I was just thrilled when I came across next.js a few days ago... :-)