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.gitcd sails-react-examplenpm installbower installnode app.jsopen http://localhost:1337
Start from Scratch
-
Install Sails
sudo npm -g install sails
-
Create new Sails project
sails new sails-react-example --linker
-
Change directory to sails-react-example
-
Install grunt-react
npm install grunt-react
-
Edit Gruntfile.js to support jsx files (see Gruntfile.js file for examples)
-
Pull these components from Bower
- Bootstrap
- jQuery
- React
- Showdown
- Timeago
- RequireJS
-
Edit Gruntfile.js to include RequireJS. RequireJS will handle loading of js libraries.
-
Create assets/linker/styles/styles.css for styles and animation css
-
Create Comment model and controller
sails generate comment
-
Edit views/home/index.ejs and put
<div class="container" id="container"></div>
somewhere -
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;
Todo
- Add passport authentication