generator-kraken-react

Yeoman generator for creating web apps powered by kraken & react.
Gets you running with production ready web app in seconds.

Packed With

• gulp
• heroku
• jest
• kraken
• material-ui
• react
• react-engine
• react-router
• redux
• webpack

Installation

generator-kraken-react requires Node.js v4+ & npm v4+ to run. Install yeoman & generator-kraken-react by running

$ npm install -g yo generator-kraken-react

if the above command fails, try running it with sudo

Usage

To create a production ready web app

$ yo kraken-react

cd 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.

Bootstraped App

Taskify, is the bootstraped app that you get as a starter code when you use this generator.

Walkthrough of Bootstraped App

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.js

Basic 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/list
  

• public It contains all the front-end code written. The public/store/index.js contains redux store of the application. You don't have to explicitly connect the store to the application using react-redux It's automatically done for you.
  • public/actions/ contains the action generators
  • public/components/ contains the react components
  • public/reducers/ contains the reducers
  • public/routes/ contains the react-router routes
  • public/main.js contains the bootstraping code to connect & initialize various components of the application. You will rarely need to change or revisit this file