generator-iso-alt

generator-iso-alt

Generate a isomorphic flux app using React and Alt.

This generator originated from the isomorphic-alt-boilerplate.

Installation

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

Usage

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!

Libs

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.

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 app/server.js.

Routing

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.

Links

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 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.

Contributing

Feel free to send issues and pull requests!