This generator originated from the isomorphic-alt-boilerplate.
You must have yo installed globally, if you don't, run:
$ sudo npm install -g yo
Then install the generator:
$ sudo npm install -g generator-iso-alt
Create a folder to your app, enter it, and then run:
$ 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;
- Webpack, for ES6 modules on the browser;
- PureCSS, to show that it already comes with SASS integration.
How the generated code works
Stores and actions
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
All your routes are defined on
app/router.js. For each route you must specify at least 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
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.
Accessing stores and actions from components
If you want to listen to a store or call a action from a component, you must specify the context types for receiving the
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!