sails-generate-isoreact

A isomorphic react app generator for use with the Sails command-line interface.

Certain generators are installed by default in Sails, but they can be overridden. Other generators create entirely new things. Check the Sails docs for information on installing generator overrides / custom generators and information on building your own generators.

Isomorphic bootstrap App with react

install by default

• react,
• react-router, for routing app
• sails-react-store : wrap sails.socket.io with bluebrint method with 2 reactComponent (Item and CollectionItem)

dependencies : Browserify

$ npm install -g browserify

Installation

Generate your sails app

$ sails generate new myApp

$ cd myApp

$ npm install sails-generate-isoreact

Maybe, you need install grunt-browserify with sudo

Usage

On the command line

First install with :

$ sails generate isoreact

$ npm i --save sails-hook-babel grunt-browserify

maybe use sudo

then do

$ browserify -r react -r react-router -r sails-react-store > assets/js/dependencies/build.js

finally add this in your layout.ejs before your scripts

<script type="text/javascript"><%- locals.state||'' %></script>

Starting

see components's folder for starting

Example Simple controller

var React = require('react')
  , Router = require('react-router')
  , routes = require('../../components/routes.js');

module.exports = {
  home: function(req, res) {
    Router.run(routes, "home", function(Root){
        res.view("layout", {
          locals: {
            title: 'My home',
            description: 'my sweet home'
          },
          body: React.renderToString(<Root />)
        });
      });
    });
  },

...

Example with renderTo service

var routes = require('../../components/routes.js');

module.exports = {
  home: function(req, res) {
    renderTo(routes, res.view, '/', {title:'home'})
  },
  articles: function(req, res) {
    Post.find().exec(function(err, posts){
      renderTo(routes, res.view, '/articles', {title:'articles'}, {items:posts});
    });
  },

...

example routes

...

  '/': 'HomeController.home',

  '/articles': 'HomeController.articles'

...

Development

To get started quickly and see this generator in action, ...

Also see CONTRIBUTING.md for more information on overriding/enhancing existing generators.

Questions?

See FAQ.md.

More Resources

• Stackoverflow
• #sailsjs on Freenode (IRC channel)
• Twitter
• Professional/enterprise
• Tutorials

License

MIT © 2015 balderdashy & contributors

As for Sails? It's free and open-source under the MIT License.