Yeoman generator for creating web apps powered by kraken & react.
Gets you running with production ready web app in seconds.
generator-kraken-react requires Node.js v4+ & npm v4+ to run. Install yeoman & generator-kraken-react by running
$ npm install -g yo generator-kraken-reactif the above command fails, try running it with
sudo
To create a production ready web app
$ yo kraken-reactcd to the newly created project directory & run npm run dev to start development.
Heroku Deployment
This requires heroku-cli to be installed on your system.
cd to the newly created project directory & run heroku create && heroku config:set NPM_CONFIG_PRODUCTION=false && git push heroku <your_branch>:master to deploy on heroku.
Once deployed you can run heroku open to open your app in your default web browser.
You will need a heroku account to deploy, if you don't have go ahead to heroku and get a free acount.
Taskify, is the bootstraped app that you get as a starter code when you use this generator.
App Structure
├── Procfile
├── README.md
├── config
├── gulpfile.js
├── index.js
├── locales
├── package.json
├── public
│ ├── actions
│ │ ├── tasks.js
│ │ └── types.js
│ ├── components
│ │ ├── AddTask.js
│ │ ├── Header.js
│ │ ├── Layout.js
│ │ ├── Task.js
│ │ ├── TasksList.js
│ │ └── Todo.js
│ ├── main.js
│ ├── reducers
│ │ ├── index.js
│ │ └── tasks.js
│ ├── routes
│ │ └── index.js
│ └── store
│ └── index.js
├── src
│ ├── controllers
│ │ ├── index.js
│ │ └── tasks.js
│ └── models
│ └── task.js
├── test
└── webpack.config.jsBasic Usage
src
It contains all the server side code(node, express & kraken). Routes & route handlers are defined in controllers. The path at which a route is mounted is decided by the directory structure as follows.
src/controllers dir is recursively scanned to find files that match the controller-spec API. With this API, the directory structure dictates the paths at which handlers will be mounted.
For example:
controllers
|-user
|-create.js
|-list.js// create.js
//This is the controller-spec API
//A module exporting a function accepting router as it's argument
module.exports = function (router) {
router.post('/', function (req, res) {
res.send('ok');
});
};Routes are now:
/user/create
/user/listreact-redux It's automatically done for you.
react-router routes