This is a starter kit to kickstart your Sails.js & React.js app with Grunt Webpack and Grunt Babel.
git clone https://github.com/narayananramu/sails-react-webpack-starter.git
cd sails-react-webpack-starter
npm install
sails lift
open http://localhost:1337
- Save your React JSX code at react/source
- Grunt-Babel compiles JSX to JS and stores it at react/compiled
- Grunt-Webpack bundles index.js from react/compiled into main.js into assets/js/bundle
-
Install Sails
sudo npm -g install sails
-
Create new Sails project
sails new sails-react-webpack-starter
-
Change directory to
sails-react-webpack-starter
-
Install grunt-babel
npm install grunt-babel babel-preset-es2015 babel-preset-react --save
-
Edit
compileAssets.js syncAssets.js tasks/config/babel.js
to support jsx files -
Create File
.babelrc
in the project root{ "presets": ["es2015","react"] }
-
Install webpack-dev-server webpack grunt-webpack
npm install webpack-dev-server webpack grunt-webpack --save
-
Edit
compileAssets.js syncAssets.js tasks/config/webpack.js
to support bundling react source and libraries -
Create directories according to your configuration
-
Edit
watch.js
to watch your react source directory for changes -
Create your main JSX (say index.jsx) file and enjoy!