├── .editorconfig ├── .gitattributes ├── .gitignore ├── .jshintrc ├── .travis.yml ├── .yo-rc.json ├── README.md ├── bin ├── build └── watch ├── generators └── app │ ├── index.babel.js │ ├── index.js │ └── templates │ ├── README.md │ ├── _babelrc │ ├── _editorconfig │ ├── _eslintrc │ ├── _gitignore │ ├── _npmrc │ ├── _package.json │ ├── css │ └── app.css │ ├── index.html │ ├── js │ ├── actions │ │ ├── .gitkeep │ │ └── HomeActions.js │ ├── components │ │ ├── .gitkeep │ │ └── Home.js │ ├── constants │ │ └── ActionTypes.js │ ├── containers │ │ └── App.js │ ├── index.js │ ├── reducers │ │ ├── Sample.js │ │ └── index.js │ ├── store │ │ └── configureStore.js │ └── utils │ │ └── devTools.js │ ├── server.js │ ├── webpack.config.js │ └── webpack.production.js ├── package.json └── test └── test-app.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .npmrc 3 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "esnext": true, 4 | "bitwise": true, 5 | "camelcase": true, 6 | "curly": true, 7 | "eqeqeq": true, 8 | "immed": true, 9 | "indent": 2, 10 | "latedef": true, 11 | "newcap": true, 12 | "noarg": true, 13 | "quotmark": "single", 14 | "undef": true, 15 | "unused": true, 16 | "strict": true 17 | } 18 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - 'iojs' 5 | - '0.12' 6 | - '0.10' 7 | -------------------------------------------------------------------------------- /.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "generator-generator": { 3 | "structure": "nested" 4 | } 5 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsolete: use [Create React App](https://github.com/facebook/create-react-app) / [Redux starter kit](https://github.com/reduxjs/redux-starter-kit) 2 | 3 | ## Redux and Redux-devtools CLI 4 | 5 | > CLI for Redux: next-gen functional Flux/React with devtools. This is intended to be the successor to my existing [generator-flux](https://github.com/banderson/generator-flux-react) that was based on vanilla FB flux. 6 | 7 | 8 | ## Getting Started 9 | 10 | ### What is [Redux](https://github.com/gaearon/redux)? 11 | 12 | It's ["Atomic Flux with hot reloading"](http://youtube.com/watch?v=xsSnOQynTHs), a next-generation take on the [Flux pattern](http://facebook.github.io/flux/) with a few core [philosophical design differences](https://github.com/gaearon/redux#philosophy--design-goals), including: 13 | 14 | > * Preserves the benefits of Flux, but adds other nice properties thanks to its functional nature. 15 | > * Prevents some of the anti-patterns common in Flux code. 16 | > * Works great in universal (aka "isomorphic") apps because it doesn't use singletons and the data can be rehydrated. 17 | ... 18 | 19 | 20 | ### Features included in this Generator: 21 | - [x] Redux functional application architecture 22 | - [x] [Redux-DevTools](https://github.com/gaearon/redux-devtools) configured and enabled when in dev mode 23 | - [x] [WebPack](http://webpack.github.io/) for build pipeline and dev server awesomeness 24 | - [x] [Babel](https://babeljs.io/) transpiler so you can use [bleeding edge language features](https://babeljs.io/docs/usage/experimental/) 25 | - [x] PostCSS preprocessor with autoprefixer support 26 | 27 | #### Coming soon: 28 | - [ ] React-router 29 | - [ ] Choice of UI Framework (Material UI, Elemental UI, React-Bootstrap?) 30 | - [ ] Storage options: `localStorage` and Firebase/Parse to start 31 | - [ ] Test scaffolding for actions, stores, and react components 32 | 33 | ### Prerequisites 34 | 35 | You must have [Node.js w/NPM](http://nodejs.org/) installed. I recommend installing via [homebrew](http://brew.sh/), but you should be able to use the [pre-built installers](http://nodejs.org/download/) if you prefer. 36 | 37 | Also, `generator-redux` is a [Yeoman](http://yeoman.io/) generator. If you do not have Yeoman installed, first run: 38 | 39 | ```bash 40 | $ npm install -g yo 41 | ``` 42 | 43 | ### Installing the generator 44 | 45 | To install generator-redux from npm, run: 46 | 47 | ```bash 48 | $ npm install -g generator-redux 49 | ``` 50 | 51 | Finally, initiate the generator: 52 | 53 | ```bash 54 | $ yo redux 55 | ``` 56 | 57 | 58 | ### Configuration Options 59 | 60 | During install-time, you will be prompted to enter some information to help create the project structure and `package.json` file: 61 | 62 | * __Application name__ (_string_): A human-readable name for your project, i.e. "My Redux Application" 63 | * __Application Description__ (_string_): Describe your application in one sentence, to be used in `package.json` and the generated `README.md` 64 | * __Port__ (number): choose a port to run your development server on (defaults to :**3000**) 65 | 66 | 67 | ### Running your scaffolded project 68 | 69 | The generated project includes a hot-reloading static server. To start the server, run: 70 | 71 | ```bash 72 | $ npm start 73 | ``` 74 | 75 | To run the server with the dev-tools enabled, run: 76 | 77 | ```bash 78 | $ DEBUG=true npm start 79 | ``` 80 | 81 | To build for production, run: 82 | 83 | ```bash 84 | $ npm run build 85 | ``` 86 | 87 | 88 | ## License 89 | 90 | MIT 91 | -------------------------------------------------------------------------------- /bin/build: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | BABEL=./node_modules/babel/bin/babel.js 4 | DIR=generators/app 5 | INPUT=index.babel.js 6 | OUTPUT=index.js 7 | OPTS= 8 | 9 | $BABEL $OPTS $DIR/$INPUT -o $DIR/$OUTPUT 10 | -------------------------------------------------------------------------------- /bin/watch: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | BABEL=./node_modules/babel/bin/babel.js 4 | DIR=generators/app 5 | INPUT=index.babel.js 6 | OUTPUT=index.js 7 | OPTS=--watch 8 | 9 | $BABEL $OPTS $DIR/$INPUT -o $DIR/$OUTPUT 10 | -------------------------------------------------------------------------------- /generators/app/index.babel.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import slug from 'slug'; 3 | import os from 'os'; 4 | import chalk from 'chalk'; 5 | import yosay from 'yosay'; 6 | import {Promise} from 'es6-promise'; 7 | import 'isomorphic-fetch'; 8 | import {Base} from 'yeoman-generator'; 9 | 10 | function getPackageVersions(prop, packages) { 11 | const done = this.async(); 12 | return Promise 13 | .all(packages.map(pkg => { 14 | return new Promise(resolve => { 15 | if (Array.isArray(pkg)) { 16 | const [name, version] = pkg; 17 | return resolve([name, `^${version}`]); 18 | } 19 | fetch(`//registry.npmjs.org/${pkg}/latest`) 20 | .then(response => response.json()) 21 | .then(({version}) => resolve([pkg, `^${version}`])) 22 | .catch(() => resolve([pkg, '*'])); 23 | }); 24 | })) 25 | .then(deps => { 26 | this.props[prop] = deps.reduce((memo, curr) => { 27 | const [pkg, version] = curr; 28 | if (pkg && version) { 29 | memo[pkg] = version; 30 | } 31 | return memo; 32 | }, {}); 33 | done(); 34 | }).catch(e => { 35 | console.log('Something went wrong trying to install required modules. Try manually running `npm install` again.'); 36 | }); 37 | } 38 | 39 | function copy(src, dest) { 40 | this.fs.copyTpl( 41 | this.templatePath(src), 42 | this.destinationPath(dest), 43 | this.props 44 | ); 45 | } 46 | 47 | export default Base.extend({ 48 | initializing() { 49 | this.copy = copy.bind(this); 50 | this.getPackageVersions = getPackageVersions.bind(this); 51 | }, 52 | 53 | prompting() { 54 | const done = this.async(); 55 | 56 | // Have Yeoman greet the user. 57 | this.log(yosay( 58 | `Welcome to the pioneering ${chalk.red('Redux')} generator!` 59 | )); 60 | 61 | const prompts = [ 62 | { 63 | type: 'string', 64 | name: 'name', 65 | message: "What's the name of your application?", 66 | default: this.destinationPath().split(path.sep).pop() 67 | }, 68 | { 69 | type: 'string', 70 | name: 'description', 71 | message: 'Describe your application in one sentence:', 72 | default: '...' 73 | }, 74 | { 75 | type: 'string', 76 | name: 'port', 77 | message: 'Which port would you like to run on?', 78 | default: '3000' 79 | }, 80 | { 81 | type: 'list', 82 | name: 'install', 83 | message: 'Install dependencies?', 84 | choices: [ 85 | {name: 'Yes', value: true}, 86 | {name: 'No', value: false} 87 | ], 88 | default: true 89 | } 90 | ]; 91 | 92 | this.prompt(prompts, (props = {}) => { 93 | this.props = { 94 | ...props, 95 | slug: slug(props.name).toLowerCase() 96 | }; 97 | done(); 98 | }); 99 | }, 100 | 101 | configuring: { 102 | os() { 103 | this.props.start = os.platform === 'win32' 104 | ? 'set DEBUG=true | node server.js' 105 | : 'DEBUG=true node server.js'; 106 | }, 107 | 108 | deps() { 109 | this.getPackageVersions( 110 | 'deps', 111 | [ 112 | ['babel-core', '6.3.15'], 113 | 'es6-promise', 114 | 'whatwg-fetch', 115 | 'lodash', 116 | ['react', '0.14.0'], 117 | ['react-dom', '0.14.0'], 118 | ['redux', '3.0.4'], 119 | ['react-redux', '4.0.0'], 120 | ['redux-devtools', '2.1.5'], 121 | ['redux-thunk', '1.0.0'] 122 | ] 123 | ); 124 | }, 125 | 126 | devDeps() { 127 | this.getPackageVersions( 128 | 'devDeps', 129 | [ 130 | ['babel-core', '6.3.15'], 131 | ['babel-eslint', '5.0.0-beta4'], 132 | ['babel-loader', '6.2.0'], 133 | ['babel-preset-es2015', '6.3.13'], 134 | ['babel-preset-react', '6.3.13'], 135 | ['babel-preset-react-hmre', '1.0.0'], 136 | ['babel-preset-stage-0', '6.3.13'], 137 | ['cross-env', '1.0.6'], 138 | 'css-loader', 139 | 'cssnext-loader', 140 | ['eslint', '1.10.3'], 141 | ['eslint-plugin-babel', '3.0.0'], 142 | ['eslint-plugin-react', '3.11.3'], 143 | ['eventsource-polyfill', '0.9.6'], 144 | 'express', 145 | 'extract-text-webpack-plugin', 146 | 'path', 147 | 'style-loader', 148 | ['webpack', '1.0.0'], 149 | 'webpack-dev-middleware', 150 | 'webpack-hot-middleware' 151 | ] 152 | ); 153 | } 154 | }, 155 | 156 | writing: { 157 | app() { 158 | this.copy('_package.json', 'package.json'); 159 | this.copy('_npmrc', '.npmrc'); 160 | this.copy('_gitignore', '.gitignore'); 161 | this.copy('_editorconfig', '.editorconfig'); 162 | this.copy('_eslintrc', '.eslintrc'); 163 | this.copy('_babelrc', '.babelrc'); 164 | this.copy('README.md', 'README.md'); 165 | this.copy('webpack.config.js', 'webpack.config.js'); 166 | this.copy('webpack.production.js', 'webpack.production.js'); 167 | this.copy('server.js', 'server.js'); 168 | this.copy('index.html', 'index.html'); 169 | this.copy('js/index.js', 'js/index.js'); 170 | this.directory('css', 'css'); 171 | this.directory('js/actions', 'js/actions'); 172 | this.directory('js/components', 'js/components'); 173 | this.directory('js/constants', 'js/constants'); 174 | this.directory('js/containers', 'js/containers'); 175 | this.directory('js/store', 'js/store'); 176 | this.directory('js/data', 'js/data'); 177 | this.directory('js/reducers', 'js/reducers'); 178 | this.directory('js/utils', 'js/utils'); 179 | }, 180 | }, 181 | 182 | install() { 183 | if (this.props.install) { 184 | this.installDependencies({ 185 | npm: true, 186 | bower: false 187 | }); 188 | } 189 | } 190 | 191 | }); 192 | -------------------------------------------------------------------------------- /generators/app/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { 4 | value: true 5 | }); 6 | 7 | var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })(); 8 | 9 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12 | 13 | var _path = require('path'); 14 | 15 | var _path2 = _interopRequireDefault(_path); 16 | 17 | var _slug = require('slug'); 18 | 19 | var _slug2 = _interopRequireDefault(_slug); 20 | 21 | var _os2 = require('os'); 22 | 23 | var _os3 = _interopRequireDefault(_os2); 24 | 25 | var _chalk = require('chalk'); 26 | 27 | var _chalk2 = _interopRequireDefault(_chalk); 28 | 29 | var _yosay = require('yosay'); 30 | 31 | var _yosay2 = _interopRequireDefault(_yosay); 32 | 33 | var _es6Promise = require('es6-promise'); 34 | 35 | require('isomorphic-fetch'); 36 | 37 | var _yeomanGenerator = require('yeoman-generator'); 38 | 39 | function getPackageVersions(prop, packages) { 40 | var _this = this; 41 | 42 | var done = this.async(); 43 | return _es6Promise.Promise.all(packages.map(function (pkg) { 44 | return new _es6Promise.Promise(function (resolve) { 45 | if (Array.isArray(pkg)) { 46 | var _pkg = _slicedToArray(pkg, 2); 47 | 48 | var _name = _pkg[0]; 49 | var version = _pkg[1]; 50 | 51 | return resolve([_name, '^' + version]); 52 | } 53 | fetch('//registry.npmjs.org/' + pkg + '/latest').then(function (response) { 54 | return response.json(); 55 | }).then(function (_ref) { 56 | var version = _ref.version; 57 | return resolve([pkg, '^' + version]); 58 | })['catch'](function () { 59 | return resolve([pkg, '*']); 60 | }); 61 | }); 62 | })).then(function (deps) { 63 | _this.props[prop] = deps.reduce(function (memo, curr) { 64 | var _curr = _slicedToArray(curr, 2); 65 | 66 | var pkg = _curr[0]; 67 | var version = _curr[1]; 68 | 69 | if (pkg && version) { 70 | memo[pkg] = version; 71 | } 72 | return memo; 73 | }, {}); 74 | done(); 75 | })['catch'](function (e) { 76 | console.log('Something went wrong trying to install required modules. Try manually running `npm install` again.'); 77 | }); 78 | } 79 | 80 | function copy(src, dest) { 81 | this.fs.copyTpl(this.templatePath(src), this.destinationPath(dest), this.props); 82 | } 83 | 84 | exports['default'] = _yeomanGenerator.Base.extend({ 85 | initializing: function initializing() { 86 | this.copy = copy.bind(this); 87 | this.getPackageVersions = getPackageVersions.bind(this); 88 | }, 89 | 90 | prompting: function prompting() { 91 | var _this2 = this; 92 | 93 | var done = this.async(); 94 | 95 | // Have Yeoman greet the user. 96 | this.log((0, _yosay2['default'])('Welcome to the pioneering ' + _chalk2['default'].red('Redux') + ' generator!')); 97 | 98 | var prompts = [{ 99 | type: 'string', 100 | name: 'name', 101 | message: "What's the name of your application?", 102 | 'default': this.destinationPath().split(_path2['default'].sep).pop() 103 | }, { 104 | type: 'string', 105 | name: 'description', 106 | message: 'Describe your application in one sentence:', 107 | 'default': '...' 108 | }, { 109 | type: 'string', 110 | name: 'port', 111 | message: 'Which port would you like to run on?', 112 | 'default': '3000' 113 | }, { 114 | type: 'list', 115 | name: 'install', 116 | message: 'Install dependencies?', 117 | choices: [{ name: 'Yes', value: true }, { name: 'No', value: false }], 118 | 'default': true 119 | }]; 120 | 121 | this.prompt(prompts, function () { 122 | var props = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; 123 | 124 | _this2.props = _extends({}, props, { 125 | slug: (0, _slug2['default'])(props.name).toLowerCase() 126 | }); 127 | done(); 128 | }); 129 | }, 130 | 131 | configuring: { 132 | os: function os() { 133 | this.props.start = _os3['default'].platform === 'win32' ? 'set DEBUG=true | node server.js' : 'DEBUG=true node server.js'; 134 | }, 135 | 136 | deps: function deps() { 137 | this.getPackageVersions('deps', [['babel-core', '6.3.15'], 'es6-promise', 'whatwg-fetch', 'lodash', ['react', '0.14.0'], ['react-dom', '0.14.0'], ['redux', '3.0.4'], ['react-redux', '4.0.0'], ['redux-devtools', '2.1.5'], ['redux-thunk', '1.0.0']]); 138 | }, 139 | 140 | devDeps: function devDeps() { 141 | this.getPackageVersions('devDeps', [['babel-core', '6.3.15'], ['babel-eslint', '5.0.0-beta4'], ['babel-loader', '6.2.0'], ['babel-preset-es2015', '6.3.13'], ['babel-preset-react', '6.3.13'], ['babel-preset-react-hmre', '1.0.0'], ['babel-preset-stage-0', '6.3.13'], ['cross-env', '1.0.6'], 'css-loader', 'cssnext-loader', ['eslint', '1.10.3'], ['eslint-plugin-babel', '3.0.0'], ['eslint-plugin-react', '3.11.3'], ['eventsource-polyfill', '0.9.6'], 'express', 'extract-text-webpack-plugin', 'path', 'style-loader', ['webpack', '1.0.0'], 'webpack-dev-middleware', 'webpack-hot-middleware']); 142 | } 143 | }, 144 | 145 | writing: { 146 | app: function app() { 147 | this.copy('_package.json', 'package.json'); 148 | this.copy('_npmrc', '.npmrc'); 149 | this.copy('_gitignore', '.gitignore'); 150 | this.copy('_editorconfig', '.editorconfig'); 151 | this.copy('_eslintrc', '.eslintrc'); 152 | this.copy('_babelrc', '.babelrc'); 153 | this.copy('README.md', 'README.md'); 154 | this.copy('webpack.config.js', 'webpack.config.js'); 155 | this.copy('webpack.production.js', 'webpack.production.js'); 156 | this.copy('server.js', 'server.js'); 157 | this.copy('index.html', 'index.html'); 158 | this.copy('js/index.js', 'js/index.js'); 159 | this.directory('css', 'css'); 160 | this.directory('js/actions', 'js/actions'); 161 | this.directory('js/components', 'js/components'); 162 | this.directory('js/constants', 'js/constants'); 163 | this.directory('js/containers', 'js/containers'); 164 | this.directory('js/store', 'js/store'); 165 | this.directory('js/data', 'js/data'); 166 | this.directory('js/reducers', 'js/reducers'); 167 | this.directory('js/utils', 'js/utils'); 168 | } 169 | }, 170 | 171 | install: function install() { 172 | if (this.props.install) { 173 | this.installDependencies({ 174 | npm: true, 175 | bower: false 176 | }); 177 | } 178 | } 179 | 180 | }); 181 | module.exports = exports['default']; 182 | -------------------------------------------------------------------------------- /generators/app/templates/README.md: -------------------------------------------------------------------------------- 1 | 2 | # <%= name %> (<%= slug %>) 3 | 4 | > <%= description %> 5 | 6 | ## Running your project 7 | 8 | The generated project includes a development server on port `<%= port %>`, which will rebuild the app whenever you change application code. To start the server (with the dev-tools enabled), run: 9 | 10 | ```bash 11 | $ npm start 12 | ``` 13 | 14 | To run the server with the dev-tools disabled, run: 15 | 16 | ```bash 17 | $ DEBUG=false npm start 18 | ``` 19 | 20 | To build for production, this command will output optimized production code: 21 | 22 | ```bash 23 | $ npm run build 24 | ``` 25 | -------------------------------------------------------------------------------- /generators/app/templates/_babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015", "stage-0"], 3 | "env": { 4 | "development": { 5 | "presets": ["react-hmre"] 6 | }, 7 | "test": { 8 | "presets": ["react-hmre"] 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /generators/app/templates/_editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /generators/app/templates/_eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "jsx": true, 4 | "modules": true 5 | }, 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "babel-eslint", 11 | "rules": { 12 | "quotes": [2, "single"], 13 | "strict": [2, "never"], 14 | "babel/generator-star-spacing": 1, 15 | "babel/new-cap": 1, 16 | "babel/object-shorthand": 1, 17 | "babel/arrow-parens": 1, 18 | "babel/no-await-in-loop": 1, 19 | "react/jsx-uses-react": 2, 20 | "react/jsx-uses-vars": 2, 21 | "react/react-in-jsx-scope": 2 22 | }, 23 | "plugins": [ 24 | "babel", 25 | "react" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /generators/app/templates/_gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/** 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /generators/app/templates/_npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org 2 | -------------------------------------------------------------------------------- /generators/app/templates/_package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= slug %>", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "start": "<%= start %>", 6 | "build": "webpack -p --config webpack.production.js", 7 | "build-dev": "webpack -p" 8 | }, 9 | "dependencies": <%- JSON.stringify(deps, null, 2).replace(/\n/g, "\n ") %>, 10 | "devDependencies": <%- JSON.stringify(devDeps, null, 2).replace(/\n/g, "\n ") %> 11 | } 12 | -------------------------------------------------------------------------------- /generators/app/templates/css/app.css: -------------------------------------------------------------------------------- 1 | .text { 2 | font-size: 2rem; 3 | line-height: 1.5; 4 | color: #FF0000; 5 | } 6 | -------------------------------------------------------------------------------- /generators/app/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Redux/React App 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /generators/app/templates/js/actions/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/banderson/generator-redux/679149dde89985378d2c94fb48b45217bb23711b/generators/app/templates/js/actions/.gitkeep -------------------------------------------------------------------------------- /generators/app/templates/js/actions/HomeActions.js: -------------------------------------------------------------------------------- 1 | import {TITLE_CHANGED} from '../constants/ActionTypes'; 2 | 3 | export function changeTitle(text) { 4 | return { 5 | type: TITLE_CHANGED, 6 | text 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /generators/app/templates/js/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/banderson/generator-redux/679149dde89985378d2c94fb48b45217bb23711b/generators/app/templates/js/components/.gitkeep -------------------------------------------------------------------------------- /generators/app/templates/js/components/Home.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {connect} from 'react-redux'; 3 | import {bindActionCreators} from 'redux'; 4 | import * as HomeActions from '../actions/HomeActions'; 5 | import styles from '../../css/app.css'; 6 | 7 | class Home extends Component { 8 | render() { 9 | const {title, dispatch} = this.props; 10 | const actions = bindActionCreators(HomeActions, dispatch); 11 | return ( 12 |
13 |

Welcome {title}!

14 | 17 |
18 | ); 19 | } 20 | } 21 | 22 | export default connect(state => state.Sample)(Home) 23 | -------------------------------------------------------------------------------- /generators/app/templates/js/constants/ActionTypes.js: -------------------------------------------------------------------------------- 1 | export const DATA_FETCHED = 'DATA_FETCHED'; 2 | export const DATA_SUCCEEDED = 'DATA_SUCCEEDED'; 3 | export const DATA_FAILED = 'DATA_FAILED'; 4 | export const TITLE_CHANGED = 'TITLE_CHANGED'; 5 | -------------------------------------------------------------------------------- /generators/app/templates/js/containers/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Provider} from 'react-redux'; 3 | import configureStore from '../store/configureStore'; 4 | import Home from '../components/Home'; 5 | import {renderDevTools} from '../utils/devTools'; 6 | 7 | const store = configureStore(); 8 | 9 | export default React.createClass({ 10 | render() { 11 | return ( 12 |
13 | 14 | {/* is your app entry point */} 15 | 16 | 17 | 18 | 19 | {/* only renders when running in DEV mode */ 20 | renderDevTools(store) 21 | } 22 |
23 | ); 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /generators/app/templates/js/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './containers/App'; 4 | 5 | ReactDOM.render(, document.getElementById('main')); 6 | -------------------------------------------------------------------------------- /generators/app/templates/js/reducers/Sample.js: -------------------------------------------------------------------------------- 1 | import * as ActionTypes from '../constants/ActionTypes'; 2 | 3 | let defaultState = { 4 | title: 'Home' 5 | }; 6 | 7 | export default function(state = defaultState, action) { 8 | switch (action.type) { 9 | case ActionTypes.TITLE_CHANGED: 10 | return {...state, title: action.text}; 11 | default: 12 | return state; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /generators/app/templates/js/reducers/index.js: -------------------------------------------------------------------------------- 1 | export {default as Sample} from './Sample'; 2 | -------------------------------------------------------------------------------- /generators/app/templates/js/store/configureStore.js: -------------------------------------------------------------------------------- 1 | import {createStore, applyMiddleware, combineReducers, compose} from 'redux'; 2 | import thunkMiddleware from 'redux-thunk'; 3 | import {devTools, persistState} from 'redux-devtools'; 4 | import * as reducers from '../reducers/index'; 5 | 6 | let createStoreWithMiddleware; 7 | 8 | // Configure the dev tools when in DEV mode 9 | if (__DEV__) { 10 | createStoreWithMiddleware = compose( 11 | applyMiddleware(thunkMiddleware), 12 | devTools(), 13 | persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)) 14 | )(createStore); 15 | } else { 16 | createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore); 17 | } 18 | 19 | const rootReducer = combineReducers(reducers); 20 | 21 | export default function configureStore(initialState) { 22 | return createStoreWithMiddleware(rootReducer, initialState); 23 | } 24 | -------------------------------------------------------------------------------- /generators/app/templates/js/utils/devTools.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export function renderDevTools(store) { 4 | if (__DEV__) { 5 | let {DevTools, DebugPanel, LogMonitor} = require('redux-devtools/lib/react'); 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | 13 | return null; 14 | } 15 | -------------------------------------------------------------------------------- /generators/app/templates/server.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var express = require('express'); 4 | var config = require('./webpack.config'); 5 | 6 | var app = express(); 7 | var compiler = webpack(config); 8 | 9 | app.use(require('webpack-dev-middleware')(compiler, { 10 | noInfo: true, 11 | publicPath: config.output.publicPath, 12 | historyApiFallback: true 13 | })); 14 | 15 | app.use(require('webpack-hot-middleware')(compiler)); 16 | 17 | app.get('*', function(req, res) { 18 | res.sendFile(path.join(__dirname, 'index.html')); 19 | }); 20 | 21 | app.listen(<%= port %>, 'localhost', function (err, result) { 22 | if (err) { 23 | console.log(err); 24 | } 25 | 26 | console.log('Listening at localhost:<%= port %>'); 27 | }); 28 | -------------------------------------------------------------------------------- /generators/app/templates/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | 5 | var devFlagPlugin = new webpack.DefinePlugin({ 6 | __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')) 7 | }); 8 | 9 | module.exports = { 10 | devtool: 'cheap-module-eval-source-map', 11 | entry: [ 12 | 'eventsource-polyfill', 13 | 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', 14 | './js/index.js' 15 | ], 16 | output: { 17 | path: path.join(__dirname, 'dist'), 18 | publicPath: '/static/', 19 | filename: 'bundle.js', 20 | hot: true 21 | }, 22 | plugins: [ 23 | new webpack.optimize.OccurenceOrderPlugin(), 24 | new webpack.HotModuleReplacementPlugin(), 25 | new webpack.NoErrorsPlugin(), 26 | devFlagPlugin, 27 | new ExtractTextPlugin('app.css') 28 | ], 29 | module: { 30 | loaders: [ 31 | { test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }, 32 | { test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader?module!cssnext-loader') } 33 | ] 34 | }, 35 | resolve: { 36 | extensions: ['', '.js', '.json'] 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /generators/app/templates/webpack.production.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | 5 | var devFlagPlugin = new webpack.DefinePlugin({ 6 | __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')) 7 | }); 8 | 9 | module.exports = { 10 | entry: [ 11 | './js/index.js' 12 | ], 13 | output: { 14 | path: path.join(__dirname, 'dist'), 15 | publicPath: '/static/', 16 | filename: 'bundle.js', 17 | }, 18 | plugins: [ 19 | new webpack.NoErrorsPlugin(), 20 | devFlagPlugin, 21 | new ExtractTextPlugin('app.css') 22 | ], 23 | module: { 24 | loaders: [ 25 | { test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }, 26 | { test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader?module!cssnext-loader') } 27 | ] 28 | }, 29 | resolve: { 30 | extensions: ['', '.js', '.json'] 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "generator-redux", 3 | "version": "0.4.1", 4 | "description": "CLI for Redux: next-gen functional Flux/React with devtools", 5 | "license": "MIT", 6 | "main": "app/index.js", 7 | "repository": "banderson/generator-redux", 8 | "author": { 9 | "name": "Ben Anderson", 10 | "email": "banderson87@gmail.com", 11 | "url": "https://github.com/banderson" 12 | }, 13 | "scripts": { 14 | "build": "./bin/build", 15 | "watch": "./bin/watch", 16 | "test": "mocha" 17 | }, 18 | "files": [ 19 | "generators" 20 | ], 21 | "keywords": [ 22 | "redux", 23 | "react", 24 | "flux", 25 | "reducers", 26 | "webpack", 27 | "yeoman", 28 | "yeoman-generator" 29 | ], 30 | "dependencies": { 31 | "chalk": "^1.1.1", 32 | "es6-promise": "^3.0.2", 33 | "isomorphic-fetch": "^2.1.1", 34 | "slug": "^0.9.1", 35 | "yeoman-generator": "^0.20.3", 36 | "yosay": "^1.0.5" 37 | }, 38 | "devDependencies": { 39 | "babel": "^5.8.23", 40 | "mocha": "^2.3.3" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /test/test-app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var path = require('path'); 4 | var assert = require('yeoman-generator').assert; 5 | var helpers = require('yeoman-generator').test; 6 | var os = require('os'); 7 | 8 | describe('redux:app', function () { 9 | before(function (done) { 10 | helpers.run(path.join(__dirname, '../generators/app')) 11 | .withOptions({ skipInstall: true }) 12 | .withPrompts({ someOption: true }) 13 | .on('end', done); 14 | }); 15 | 16 | it('creates files', function () { 17 | assert.file([ 18 | 'bower.json', 19 | 'package.json', 20 | '.editorconfig', 21 | 'index.html' 22 | ]); 23 | }); 24 | 25 | it('create proper configStore file', function() { 26 | var store = './js/store/configureStore.js'; 27 | assert.file(store); 28 | assert.fileContent(store, "import {createStore, applyMiddleware, combineReducers, compose} from 'redux';"); 29 | assert.fileContent(store, "if (__DEV__) {"); 30 | assert.fileContent(store, "createStoreWithMiddleware = compose("); 31 | assert.fileContent(store, "applyMiddleware(thunkMiddleware),"); 32 | assert.fileContent(store, "devTools()"); 33 | assert.fileContent(store, "persistState(window.location.href.match(/[?&]debug_session=([^&]+)\\b/))"); 34 | assert.fileContent(store, ")(createStore);"); 35 | }); 36 | }); 37 | --------------------------------------------------------------------------------