sails-react-example

0.1.0 • Public • Published

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i sails-react-example

Weekly Downloads

0

Version

0.1.0

License

MIT

Last publish

Collaborators

  • mixxen