generator-iso-alt

    0.0.3 • Public • Published

    generator-iso-alt Build Status

    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!

    Install

    npm i generator-iso-alt

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • talyssonoc