We want to be able to use express/hapi/feather/etc using passport for auth and only load our react app after successful login. We also want ES6, live-reloading, and hot-loading for fast development.
A common solution is to run create-react-app on one port and node server.js on another. Then you add a proxy: http://localhost:3000 to the create-react-app package.json file and it allows your react app to talk to the express server. When you are ready to deploy to production, you generate static files and only need node server.js from them on. That works as long as you don't need the express/hapi/koa/server:
- to be the first point of entry
- to provide inital state (you can use componentDidMount() + AJAX to load inital state)
Another solution is to simply have your node server load webpack/babel as needed for development, but default to static files for production.
// we only want hot reloading in development
if (process.env.NODE_ENV !== 'production') {
webpackSetupGoesHere(app);
} else {
//Production needs physical files! (built via separate process)
app.use('/js', express.static(__dirname + '/public/dist/js'));
}
- https://github.com/verekia/js-stack-from-scratch/blob/master/tutorial/04-webpack-react-hmr.md#readme
- https://github.com/netpoetica/react-router-passport-express-demo-app
- https://github.com/Alex-ray/v2-universal-js-hmr-ssr-react-redux/blob/master/package.json
- https://www.akawebdesign.com/2016/04/08/hot-reloading-react-webpack-express/
- https://github.com/glenjamin/ultimate-hot-reloading-example
- https://github.com/nylas/nylas-mail/blob/master/packages/cloud-api/app.es6
- https://github.com/zeit/next.js
- https://github.com/kriasoft/react-starter-kit
- https://github.com/react-boilerplate/react-boilerplate
- https://github.com/Xeoncross/aqua-sql
- https://github.com/velopert/react-express-hmr-example
- https://github.com/madole/webpack-dev-middleware-boilerplate