Sails.js + React.js Examples

Inspired by the React.js tutorials, these examples shows ways to integrate Sails.js as the real time persistent backend model to a React.js frontend. Two examples are provided: a markdown chat application and the TodoMVC application. Both showcasing the real time capabilities for multiple clients.

References

• Sails Tutorial
• React Tutorial
• React Animation
• React TodoMVC
• RequireJS

Run Instructions

git clone https://github.com/mixxen/sails-react-example.git
cd sails-react-example
npm install
bower install
node app.js
open http://localhost:1337

Start from Scratch

1. Install Sails

   sudo npm -g install sails

2. Create new Sails project

   sails new sails-react-example --linker

3. Change directory to sails-react-example

4. Install grunt-react

   npm install grunt-react

5. Edit Gruntfile.js to support jsx files (see Gruntfile.js file for examples)

6. Pull these components from Bower

   • Bootstrap
   • jQuery
   • React
   • Showdown
   • Timeago
   • RequireJS

7. Edit Gruntfile.js to include RequireJS. RequireJS will handle loading of js libraries.

8. Create assets/linker/styles/styles.css for styles and animation css

9. Create Comment model and controller

   sails generate comment

10. Edit views/home/index.ejs and put <div class="container" id="container"></div> somewhere

11. Rename assets/linker/js/app.js to assets/linker/js/app.jsx and start coding. Be sure to call renderCompoenent somewhere and reference the div in previous step. Example:

React.renderComponent(
  <CommentBox url="/comment" data={message} />,
  document.getElementById('container')
);

Todo

• Add passport authentication