This repository will only be updated now for experimentation purposes, for a real boilerplate use the generator-iso-alt.

Isomorphic Alt boilerplate

This is a simple boilerplate for isomorphic apps with React + Alt.

It's a first implementation, so I'm sure I forget a lot of details and I know there's a lot to improve. I started this just to test if Alt was as simple as Fluxible to make isomorphic apps, turns out it worked (but not that simple).

Installing and Running

First you need to install the global dependencies

• Nodejs
• Gulp

Then, on the project folder run

npm install
gulp

And...it's done! Now just access localhost:3000 in your browser.

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.

How it 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, it's just the begin of a boilerplate!