Generator for isomorphic flux apps with React and Alt
npm install generator-iso-altGenerate a isomorphic flux app using React and Alt.
This generator originated from the isomorphic-alt-boilerplate.
You must have yo installed globally, if you don't, run:
``sh`
$ sudo npm install -g yo
Then install the generator:
`sh`
$ sudo npm install -g generator-iso-alt
Create a folder to your app, enter it, and then run:
`sh`
$ yo iso-alt
It will ask you the name of your app, and then generate it for you!
The libs used here was:
- Express, for the server;
- React, for the views;
- Fetchr, for data fetching, instead of Alt's sources. Fetchr was really easier and prettier;
- Routr, for routing. I find it simpler and with less _magic_ than React Router;
- Serialize Javascript, for serialize the app state and send it to the browser, it was simpler than Iso, the package recommended by Alt;
- Webpack, for ES6 modules on the browser;
- PureCSS, to show that it already comes with SASS integration.
You must declare all your stores and action classes in the app/FluxApp.js constructor, since it does not uses singletons, and each request that begins on server side instantiates the app again (e.g. before it enters in the SPA mode on the browser). You can see this at app/server.js.
All your routes are defined on app/router.js. For each route you must specify at least a path, a method and a component. If you also specify the name of a action class, this class must have a load action, that returns a Promise and that will be called when the route is requested (even in the browser). See the navigate action at app/actions/ApplicationActions.js.
To use links inside the app, you must use the app/components/Link instead of a <a/>, since this component will call the navigate action when clicked.
If you want to listen to a store or call a action from a component, you must specify the context types for receiving the getStore and getActions on the context of the component. There's a app/lib/contextTypes.js that already has the needed context types, you can just import and assign it, check app/components/pages/About.js` for a example.
Feel free to send issues and pull requests!