This Yeoman generator scaffolds an isomorpic ReactJS and KeystoneJS project.
The goal of this project is to follow ReactJS best practice to saffold well performing isomorpic web app that is easy to get started with and extend.
To do this I've combined
Also important: webpack-dev-server, webpack hot module replacement, SASS, autoprefixer, gulp, normalize (the sass version)
You will need:
- Node.js >= 0.10.x
- MongoDB >= 2.4.x
- Yeoman
If you don't have Node or MongoDB intalled, you can follow the instructions of the keystone generator
yo react-keystone will scaffold a new project for you.
gulp dev will start the webpack-dev-server which hosts the style and js of the front-end app (with hot-module-replacement)
node keystone.js will start the backend server
npm start will run gulp dev and node --harmony keystone.js at the same time, but this makes it difficult to see logs
npm build or gulp webpack will build your front-end app and styles into dist/ minified
The frontend app initialises in the browser through client.jsx, which renders app.jsx.
The backend wraps html.jsx around the rendered app.jsx, and attaches the initial state in a script-tag. This is what allows it to be isomorphic.
Webpack builds extracts the styles based on require('./component.scss') calls in the component chain of client.jsx. This means that you should write styles that can be loaded out of order. I built it based on Ben Smithett's blog post Smarter CSS builds with Webpack.
Note: This is a generator I set up for myself to allow me to scaffold new projects quickly, I want to keep developing it as I figure out better ways of doing things. Feel free to contribute.
Here's a list of improvements I'm going to implement:
- run eslint through gulp before triggering webpack. useful: Dan Abramov's Lint Like It's 2015
- This is the first time I've used webpack to build by stylesheets, so improvements must exist.
- License
This needs to be worked out properly..