Build toolchain as a dependancy for react/redux application, with a strong emphasis put on DX (Developer eXperience)
Actual state of development for react apps leads to a tremendous amount of boilerplate code for initializing the tooling. Usually, we proceed by finding (or creating) a boilerplate project with approximatly the stack we need, fork it, and start working on it.
However, boilerplate have a major drawback. They can't be updated easily. So instead of a boilerplate, we choose to externalize all the toolchain and building config of a project as an npm dependancy.
Inspiration : https://github.com/bdefore/universal-redux & https://github.com/kriasoft/react-starter-kit
What's included in the menu
- React. What else ?
- Redux. The community consensus for managing application state
- CSS modules Namespace your css
- Server Side Rendering. SEO and mobile friendly, zero config needed.
- Hot Module Reload Everywhere. On server. On reducers. On CSS. On react app. No more
Ctrl+R
. (But without using react-HMR) - Error message on the browser. No need to switch to console anymore. Using redbox-react and webpack-hot-middleware
- ES-next. ES2015, stage-1 proposals and react. Look at our babelrc presets (browser and node)
- Webpack with a bunch of useful loaders preconfigured
First, initialize your project and install the peer dependencies with
npm init
npm i -S async-props react react-router react-router-redux redux react-redux react-helmet isomorphic-style-loader
npm i -S vitaminjs
Then, create the .vitaminrc
file at the root of your project.
It is a path to the module containing the main Route of your react app.
All the configuration specific to redux
The path to the module that exports an object of you app reducers.
vitamin will extend the object with the react-router-redux
reducer under the key routing
.That's why it can't be a function created with combineReducer
.
A path to a module that exports an array of redux middlewares.
It should look like that:
{
"routes": "./routes",
"redux": {
"reducers": "./reducers"
}
}
Create the routes.js
file:
import { Route } from 'react-router';
export default (
<Route path="/">
);
Create the reducers.js
file:
export default {};
And finally you can launch your app with
vitamin start --hot
Open http://localhost:3000.
- Prevent CSRF
- add webpack-hot-middleware instead of webpack-dev-server
- How to handle partial rendering vs the complete page ?
- Support global install & use local vitamin binary when launched globally (like grunt-cli)
- plugin authentication (?)
- Add a HtmlRootComponent
- Add a Error 500 component
- Add a Error 404 component
- Add default app explaning how to get started
- tests
- Add more doc
-
add eslint & flow static typecheck in webpack loaders (?)
- add logs handling
- Set package.json node version to 5.1.0
In your vitaminrc
:
{
"server": {
"layout": "__vitamin__/src/server/components/DivLayout"
}
}