bodyno/react-starter-kit

Start your first React App. By using React, Redux, and React-Router.

废弃警告

这个项目起始于Redux生态的开始，目的是提供一个手脚架让前端们快速上手和开始。之后，工具和最佳实践被不断的革新。为了获得最新的体验，我推荐你使用类似于create-react-app这种可以支持React核心和Redux的脚手架。

当然还是欢迎你继续使用这个项目如果你觉得这个项目更适合你。如果你是个追求新生态的人，我还是强烈推荐你使用其它更新更频繁的项目。

谢谢大家在过去这些年为这个项目的贡献。Thanks everyone.

React Starter Kit

React开发中最好用的脚手架。

这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于webpack已经提供代码热加载，使用sass预处理css，单元测试，代码覆盖率报告，代码分割等等更多。

这个项目最主要的目的是尽可能果断的保留。目的不是要你一定按照这个结构去完成你的项目，谐在使前端开发更健壮，更简单还有最重要的是更快乐。你可以获得以下的所有特性！

最后，如果没有大家的贡献，这个项目是不可能如此健壮的。

所有相关库已准备好，随时等待调用。

特性

• react
• redux
• react-router
• webpack
• babel
• express
• karma
• eslint

需求配置

• node ^4.5.0
• npm ^3.0.0

开始

确认好你的环境配置，然后就可以开始以下步骤。

$ git clone https://github.com/bodyno/react-starter-kit.git
$ cd react-starter-kit
$ npm install                   # Install project dependencies
$ npm start                     # Compile and launch

如果一切顺利，你会看到如下:

开发过程中，你用得最多的会是npm start，但是这里还有很多其它的处理：

npm run <script>	解释
start	服务启动在3000端口，代码热替换开启。
compile	编译程序到dist目录下（默认目录~/dist）。
dev	与npm start相同, 但是启动nodemon守护进程。
dev:no-debug	与npm run dev 但是禁用devtool（开发工具）。
test	开启Karma测试并生成覆盖率报告。
test:dev	开启Karma测试并监听改变随时重新测试，但是生成覆盖率报告。
deploy	启动代码检查，测试，如果成功，编译到dist目录下。
deploy:dev	与deploy相同，但是NODE_ENV值为"development"。
deploy:prod	与deploy相同，但是NODE_ENV值为"production"。
lint	检查所有.js文件是否规范。
lint:fix	检查所有.js文件是否规范并修复它们。 更多

程序目录

这个项目的结构使用的是 fractal(不规则碎片形：适合大型项目)*，方法的分组主要是依照特性而不是文件类型。注意，这个目录结构只是一个指引，并不一定要按这个来。这种结构谐在让程序更容易扩展，想了解更多请点击这里。

.
├── bin                      # 启动脚本
├── blueprints               # redux-cli的蓝图
├── build                    # 所有打包配置项
│   └── webpack              # webpack的指定环境配置文件
├── config                   # 项目配置文件
├── server                   # Express 程序 (使用 webpack 中间件)
│   └── main.js              # 服务端程序入口文件
├── src                      # 程序源文件
│   ├── main.js              # 程序启动和渲染
│   ├── components           # 全局可复用的表现组件(Presentational Components)
│   ├── containers           # 全局可复用的容器组件
│   ├── layouts              # 主页结构
│   ├── static               # 静态文件(不要到处imported源文件)
│   ├── styles               # 程序样式
│   ├── store                # Redux指定块
│   │   ├── createStore.js   # 创建和使用redux store
│   │   └── reducers.js      # Reducer注册和注入
│   └── routes               # 主路由和异步分割点
│       ├── index.js         # 用store启动主程序路由
│       ├── Root.js          # 为上下文providers包住组件
│       └── Home             # 不规则路由
│           ├── index.js     # 路由定义和代码异步分割
│           ├── assets       # 组件引入的静态资源
│           ├── components   # 直观React组件
│           ├── container    # 连接actions和store
│           ├── modules      # reducers/constants/actions的集合
│           └── routes **    # 不规则子路由(** 可选择的)
└── tests                    # 单元测试

样式

所有的css和sass都支持会被预处理。只要被引入，都会经过PostCSS压缩，加前缀。在生产环境下会提取到一个css文件下。

服务端

这个项目的服务端使用Koa。需要注意的是，只有一个目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware（代码热替换）。使用自定义的Koa程序替换webpack-dev-server，让它更容易实现universal 渲染和为了不使这个包过于庞大。

打包优化

Babel被配置babel-plugin-transform-runtime可以让代码更优化。另外，在生产环境，我们使用react-optimize来优化React代码。

在生产环境下，webpack会导出一个css文件并压缩Javascript，并把js模块优化到最好的性能。

静态部署

如果你正在使用nginx处理程序，确保所有的路由都直接指向 ~/dist/index.html 文件，然后让react-router处理剩下的事。如果你不是很确定应该怎么做，文档在这里。Express在脚手架中用于扩展服务和代理API，或者其它你想要做的事，这完全取决于你。

谢谢大家

如果没有大家的贡献，这个项目是不可能诞生的， 感谢所有为这个项目做出贡献的人。

This program is inspired by davezuko

• Justin Greenberg - For all of your PR's, getting us to Babel 6, and constant work improving our patterns.
• Roman Pearah - For your bug reports, help in triaging issues, and PR contributions.
• Spencer Dixin - For your creation of redux-cli.
• Jonas Matser - For your help in triaging issues and unending support in our Gitter channel.

Thanks you guys all the time.

react-starter-kit's Issues

有没有考虑加入gulp 或者grunt

有没有考虑加入gulp 或者grunt

推荐取消sass，换成其他的

因为node-sass实在是太恶心了。node版本升级后各种问题。fuck！！！

npm run deploy:prod 报错

npm start/npm run compile 都正常，npm run deploy:prod 报错
是我还需要配置什么吗？

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\kerry\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'deploy:prod' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predeploy:prod', 'deploy:prod', 'postdeploy:prod' ]
5 info lifecycle [email protected]predeploy:prod: [email protected]
6 silly lifecycle [email protected]predeploy:prod: no script for predeploy:prod, continuing
7 info lifecycle [email protected]deploy:prod: [email protected]
8 verbose lifecycle [email protected]deploy:prod: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]deploy:prod: PATH: C:\Users\kerry\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;E:\11_react\react-starter-kit-cn\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn;C:\Program Files\Microsoft SQL Server\120\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\ManagementStudio;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn;C:\Users\kerry.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm;C:\Program Files (x86)\VisualSVN\bin;C:\Program Files (x86)\CodeSmith\v6.5;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Microsoft\Web Platform Installer;C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0;C:\Program Files\Microsoft SQL Server\110\Tools\Binn;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn;C:\Program Files\Microsoft SQL Server\110\DTS\Binn;C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files\dotnet;C:\Users\kerry\AppData\Roaming\npm
10 verbose lifecycle [email protected]deploy:prod: CWD: E:\11_react\react-starter-kit-cn
11 silly lifecycle [email protected]deploy:prod: Args: [ '/d /s /c', 'better-npm-run deploy:prod' ]
12 silly lifecycle [email protected]deploy:prod: Returned: code: 1 signal: null
13 info lifecycle [email protected]~deploy:prod: Failed to exec deploy:prod script
14 verbose stack Error: [email protected] deploy:prod: better-npm-run deploy:prod
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Users\kerry\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at EventEmitter.emit (events.js:172:7)
14 verbose stack at ChildProcess. (C:\Users\kerry\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at ChildProcess.emit (events.js:172:7)
14 verbose stack at maybeClose (internal/child_process.js:827:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd E:\11_react\react-starter-kit-cn
17 error Windows_NT 10.0.10586
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Users\kerry\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "deploy:prod"
19 error node v4.4.7
20 error npm v3.10.8
21 error code ELIFECYCLE
22 error [email protected] deploy:prod: better-npm-run deploy:prod
22 error Exit status 1
23 error Failed at the [email protected] deploy:prod script 'better-npm-run deploy:prod'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the react-starter-kit package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error better-npm-run deploy:prod
23 error You can get information on how to open an issue for this project with:
23 error npm bugs react-starter-kit
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls react-starter-kit
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

报以下错误，发现node_modules\node-sass\vendor 不存在

npm install不再报错了，但是执行 npm start报以下错误，求助，谢谢！

`> npm start

[email protected] start C:\cy\npm\react-starter-kit-master\react-starter-kit-master
better-npm-run start

running better-npm-run in C:\cy\npm\react-starter-kit-master\react-starter-kit-master
Executing script: start

to be executed: "babel-node bin/server"
app:config Creating default configuration. +0ms
app:config Looking for environment overrides for NODE_ENV "development". +46ms
app:config Found overrides, applying to default configuration. +20ms
app:webpack:config Create configuration. +2s
app:webpack:config Enable plugins for live development (HMR, NoErrors). +7ms
app:server:webpack-dev Enable webpack dev middleware. +733ms
app:server:webpack-hmr Enable Webpack Hot Module Replacement (HMR). +85ms
app:bin:server Server is now running at http://localhost:3000. +11ms
webpack built bb9ea20edf50c434d669 in 5950ms
Hash: bb9ea20edf50c434d669
Version: webpack 1.13.1
Time: 5950ms
Asset Size Chunks Chunk Names
vendor.bb9ea20edf50c434d669.js 392 kB 6 vendor
f59f4511d84f12ab97492b43febf6636.jpg 39.6 kB
1.counter.bb9ea20edf50c434d669.js 29.8 kB 1 counter
2.zen.bb9ea20edf50c434d669.js 36.7 kB 2 zen
3.elapse.bb9ea20edf50c434d669.js 4.7 kB 3 elapse
4.form.bb9ea20edf50c434d669.js 30.4 kB 4 form
5.route.bb9ea20edf50c434d669.js 4.22 kB 5 route
app.bb9ea20edf50c434d669.js 1.01 MB 0 app
app.bb9ea20edf50c434d669.js.map 1.22 MB 0 app
1.counter.bb9ea20edf50c434d669.js.map 35.8 kB 1 counter
2.zen.bb9ea20edf50c434d669.js.map 44.4 kB 2 zen
3.elapse.bb9ea20edf50c434d669.js.map 4.01 kB 3 elapse
4.form.bb9ea20edf50c434d669.js.map 36 kB 4 form
5.route.bb9ea20edf50c434d669.js.map 3.13 kB 5 route
vendor.bb9ea20edf50c434d669.js.map 471 kB 6 vendor

ERROR in ENOENT: no such file or directory, scandir 'C:\cy\npm\react-starter-kit-master\react-starter-kit-master\node_modules\node-sass\vendor'
@ ./src/layouts/CoreLayout/CoreLayout.scss 4:14-284 13:2-17:4 14:20-290

ERROR in ENOENT: no such file or directory, scandir 'C:\cy\npm\react-starter-kit-master\react-starter-kit-master\node_modules\node-sass\vendor'
@ ./src/styles/core.scss 4:14-269 13:2-17:4 14:20-275

ERROR in ENOENT: no such file or directory, scandir 'C:\cy\npm\react-starter-kit-master\react-starter-kit-master\node_modules\node-sass\vendor'
@ ./src/routes/Home/components/HomeView.scss 4:14-291 13:2-17:4 14:20-297

ERROR in ENOENT: no such file or directory, scandir 'C:\cy\npm\react-starter-kit-master\react-starter-kit-master\node_modules\node-sass\vendor'
@ ./src/routes/Form/components/Form.scss 4:14-287 13:2-17:4 14:20-293

ERROR in ENOENT: no such file or directory, scandir 'C:\cy\npm\react-starter-kit-master\react-starter-kit-master\node_modules\node-sass\vendor'
@ ./src/routes/Zen/components/Zen.scss 4:14-286 13:2-17:4 14:20-292

ERROR in ENOENT: no such file or directory, scandir 'C:\cy\npm\react-starter-kit-master\react-starter-kit-master\node_modules\node-sass\vendor'
@ ./src/components/Header/Header.scss 4:14-280 13:2-17:4 14:20-286

ERROR in ENOENT: no such file or directory, scandir 'C:\cy\npm\react-starter-kit-master\react-starter-kit-master\node_modules\node-sass\vendor'
@ ./src/components/Counter/Counter.scss 4:14-281 13:2-17:4 14:20-287
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 553 kB 0
webpack: bundle is now VALID.`

问个全局Components的问题

Hi,

在CoreLayout里有我加入了Header和Sidebar两个component。我的问题是，在现在的代码结构中，是不是把Header的Container功能加在全局的containers文件夹下呢？那如何把Header的Container加载呢？

import React from 'react'
import Header from '../../components/Header'
import Sidebar from '../../components/Sidebar'
import './CoreLayout.scss'
import '../../styles/core.scss'

export const CoreLayout = ({ children }) => (

{children}

)

CoreLayout.propTypes = {
children: React.PropTypes.element.isRequired
}

export default CoreLayout

Thanks,
James.

Npm install Error

When i run npm install, It occurs error as below

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' pee

rDependencies requirements!

如何deploy到一个子目录

项目地址：https://www.99bill.com/seashell/webapp/2016-marketing-system/

请问如何部署到该目录下，打包后的js和css文件只能在根目录访问。

npm start 的时候不能监听3000端口而报错

webpack-compiler Cannot find module 'babel-core'

拉取项目之后,第一次 npm run compile 会报babel-core未安装的问题,你的package.json中没有加入babel-core的配置.报错如下:

to be executed: node bin/compile
app:config Creating default configuration. +0ms
app:config Looking for environment overrides for NODE_ENV "development". +3ms
app:config Found overrides, applying to default configuration. +2ms
app:webpack:config Creating configuration. +527ms
app:webpack:config Enable plugins for live development (HMR, NoErrors). +1ms
app:bin:compile Starting compiler. +67ms
app:build:webpack-compiler Webpack compile completed. +1s
app:build:webpack-compiler Hash: 5de5a013b9b8bb5b3621
Version: webpack 1.13.2
Time: 1070ms
Asset Size Chunks Chunk Names
app.5de5a013b9b8bb5b3621.js 80.4 kB 0 app
vendor.5de5a013b9b8bb5b3621.js 386 kB 1 vendor
app.5de5a013b9b8bb5b3621.js.map 88.6 kB 0 app
vendor.5de5a013b9b8bb5b3621.js.map 462 kB 1 vendor

ERROR in Cannot find module 'babel-core'
@ multi app
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 573 kB 0 +2ms
app:build:webpack-compiler Webpack compiler encountered errors. +0ms
app:build:webpack-compiler Cannot find module 'babel-core'

请教一个Webpack CSS

Hi,

我在src/styles/_base.scss中引用了此其它的css, 比如

@import 'components.min.css';
@import 'plugins.min.css';
@import 'layout.min.css';
@import 'theme.css';
@import 'custom.css';

但是，这引起css引入了一些image的图片，而我的image是不全的，会引起以下的错误：

ERROR in .//css-loader?sourceMap&-minimize!./src/styles/layout.min.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../img/icon-color.png in /Users/projects/react/kejibd/tl_web_ui/src/styles
@ .//css-loader?sourceMap&-minimize!./src/styles/layout.min.css 6:57774-57806 6:60292-60324

ERROR in .//css-loader?sourceMap&-minimize!./src/styles/layout.min.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../img/icon-color-close.png in /Users/projects/react/kejibd/tl_web_ui/src/styles
@ .//css-loader?sourceMap&-minimize!./src/styles/layout.min.css 6:58016-58054

请问如何才能忽略这种错误？

Thanks,
james.

给RouteIndex加action

我如何用符合规范（component,containers,modules）的方式去链接indexRoute：Home，添加其他的事件

dist下的index.html文件不能直接打开吗

打开index.html文件会报错，提示是文件找不到；执行npm start后，打开文件会提示SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///F:/404' cannot be created in a document with origin 'null' and URL 'file:///F:/library/react-starter-kit/dist/index.html'.

下方有注明

bootstrap.js csss jquery

bootstrap.js csss jquery

请教一下，关于redux的使用的小问题

我一直对redux的理解不够，请教一个很菜的问题，一直苦于没人帮助。
开始一直按照你这样的封层封装，没有什么问题，但是我现在有这样的需求：
同一个路由下面，有两个需要结合redux的组件，
。

我想把Tools组件放在CardManagement下面，怎么做？我按照实例那样，已经把Tools的reducer这些封装好了，我直接引入的container到CardManagement组件下面
。

使用 <Tools/>这样的格式放在组件里面，reducer并不能用，该怎么做呢？需要injectReducer吗？那样的话，怎么传store？作为参数？，还是说这样的做法根本就不对？想错了？

npm run compile 错误

ERROR in ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-sta
rter-kit\node_modules\node-sass\vendor'
@ ./src/layouts/CoreLayout/CoreLayout.scss 4:14-284 13:2-17:4 14:20-290

ERROR in ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-sta
rter-kit\node_modules\node-sass\vendor'
@ ./src/styles/core.scss 4:14-269 13:2-17:4 14:20-275

ERROR in ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-sta
rter-kit\node_modules\node-sass\vendor'
@ ./src/routes/Home/components/HomeView.scss 4:14-291 13:2-17:4 14:20-297

ERROR in ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-sta
rter-kit\node_modules\node-sass\vendor'
@ ./src/routes/PageNotFound/components/PageNotFound.scss 4:14-295 13:2-17:4 14:
20-301

ERROR in ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-sta
rter-kit\node_modules\node-sass\vendor'
@ ./src/routes/Form/components/Form.scss 4:14-287 13:2-17:4 14:20-293

ERROR in ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-sta
rter-kit\node_modules\node-sass\vendor'
@ ./src/routes/Zen/components/Zen.scss 4:14-286 13:2-17:4 14:20-292

ERROR in ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-sta
rter-kit\node_modules\node-sass\vendor'
@ ./src/components/Header/Header.scss 4:14-280 13:2-17:4 14:20-286

ERROR in ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-sta
rter-kit\node_modules\node-sass\vendor'
@ ./src/components/Counter/Counter.scss 4:14-281 13:2-17:4 14:20-287
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 553 kB 0 +6ms
app:build:webpack-compiler Webpack compiler encountered errors. +103ms
app:build:webpack-compiler ENOENT: no such file or directory, scandir 'D:\work
space\nwjs\react-starter-kit\node_modules\node-sass\vendor'
@ ./src/layouts/CoreLayout/CoreLayout.scss 4:14-284 13:2-17:4 14:20-290
ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-starter-kit
node_modules\node-sass\vendor'
@ ./src/styles/core.scss 4:14-269 13:2-17:4 14:20-275
ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-starter-kit
node_modules\node-sass\vendor'
@ ./src/routes/Home/components/HomeView.scss 4:14-291 13:2-17:4 14:20-297
ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-starter-kit
node_modules\node-sass\vendor'
@ ./src/routes/PageNotFound/components/PageNotFound.scss 4:14-295 13:2-17:4 14:
20-301
ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-starter-kit
node_modules\node-sass\vendor'
@ ./src/routes/Form/components/Form.scss 4:14-287 13:2-17:4 14:20-293
ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-starter-kit
node_modules\node-sass\vendor'
@ ./src/routes/Zen/components/Zen.scss 4:14-286 13:2-17:4 14:20-292
ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-starter-kit
node_modules\node-sass\vendor'
@ ./src/components/Header/Header.scss 4:14-280 13:2-17:4 14:20-286
ENOENT: no such file or directory, scandir 'D:\workspace\nwjs\react-starter-kit
node_modules\node-sass\vendor'
@ ./src/components/Counter/Counter.scss 4:14-281 13:2-17:4 14:20-287 +2ms
app:bin:compile Compiler encountered an error. +13ms Error: Webpack compiler e
ncountered errors
at webpack-compiler.js:24:23
at Compiler. (D:\workspace\nwjs\react-starter-kit\node_modules\we
bpack\lib\Compiler.js:181:13)
at D:\workspace\nwjs\react-starter-kit\node_modules\webpack\lib\Compiler.js:
403:12
at Compiler.next (D:\workspace\nwjs\react-starter-kit\node_modules\tapable\l
ib\Tapable.js:67:11)
at Compiler. (D:\workspace\nwjs\react-starter-kit\node_modules\we
bpack\lib\CachePlugin.js:40:4)
at Compiler.applyPluginsAsync (D:\workspace\nwjs\react-starter-kit\node_modu
les\tapable\lib\Tapable.js:71:13)
at Compiler. (D:\workspace\nwjs\react-starter-kit\node_modules\we
bpack\lib\Compiler.js:400:9)
at Compilation. (D:\workspace\nwjs\react-starter-kit\node_modules
\webpack\lib\Compilation.js:577:13)
at Compilation.applyPluginsAsync (D:\workspace\nwjs\react-starter-kit\node_m
odules\tapable\lib\Tapable.js:60:69)
at Compilation. (D:\workspace\nwjs\react-starter-kit\node_modules
\webpack\lib\Compilation.js:572:10)
at Compilation.applyPluginsAsync (D:\workspace\nwjs\react-starter-kit\node_m
odules\tapable\lib\Tapable.js:60:69)
at Compilation. (D:\workspace\nwjs\react-starter-kit\node_modules
\webpack\lib\Compilation.js:567:9)
at Compilation.applyPluginsAsync (D:\workspace\nwjs\react-starter-kit\node_m
odules\tapable\lib\Tapable.js:60:69)
at Compilation. (D:\workspace\nwjs\react-starter-kit\node_modules
\webpack\lib\Compilation.js:563:8)
at Compilation.applyPluginsAsync (D:\workspace\nwjs\react-starter-kit\node_m
odules\tapable\lib\Tapable.js:60:69)
at Compilation.seal (D:\workspace\nwjs\react-starter-kit\node_modules\webpac
k\lib\Compilation.js:525:7)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs
node_modules\npm\bin\npm-cli.js" "run" "compile"
npm ERR! node v6.2.2
npm ERR! npm v3.9.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] compile: better-npm-run compile
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] compile script 'better-npm-run co
mpile'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-starter-kit pac
kage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! better-npm-run compile
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-starter-kit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-starter-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\workspace\nwjs\react-starter-kit\npm-debug.log

执行npm run deploy:prod报错

Executing script: compile

to be executed: node bin/compile
app:config Creating default configuration. +0ms
app:config Looking for environment overrides for NODE_ENV "production". +4ms
app:config Found overrides, applying to default configuration. +2ms
app:webpack:config Creating configuration. +511ms
app:webpack:config Enable plugins for production (OccurenceOrder, Dedupe & UglifyJS). +1ms
app:webpack:config Apply ExtractTextPlugin to CSS loaders. +93ms
app:bin:compile Starting compiler. +2ms
app:bin:compile Compiler encountered an error. TypeError: arguments[i].apply is not a function
at Compiler.apply (/Users/jeffery/work/marketing-system/node_modules/.0.1.10@tapable/lib/Tapable.js:164:16)
at OptionsApply.WebpackOptionsApply.process (/Users/jeffery/work/marketing-system/node_modules/.1.14.0@webpack/lib/WebpackOptionsApply.js:62:18)
at webpack (/Users/jeffery/work/marketing-system/node_modules/.1.14.0@webpack/lib/webpack.js:22:48)
at Promise (/Users/jeffery/work/marketing-system/build/webpack-compiler.js:9:22)
at webpackCompiler (/Users/jeffery/work/marketing-system/build/webpack-compiler.js:8:10)
at Promise.resolve.then (/Users/jeffery/work/marketing-system/bin/compile.js:12:17)
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3 +8ms

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "compile"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] compile: better-npm-run compile
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] compile script 'better-npm-run compile'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-starter-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! better-npm-run compile
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-starter-kit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-starter-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/jeffery/work/marketing-system/npm-debug.log

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "deploy"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] deploy: better-npm-run deploy
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script 'better-npm-run deploy'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-starter-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! better-npm-run deploy
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-starter-kit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-starter-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/jeffery/work/marketing-system/npm-debug.log

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "deploy:prod"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] deploy:prod: better-npm-run deploy:prod
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy:prod script 'better-npm-run deploy:prod'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-starter-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! better-npm-run deploy:prod
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-starter-kit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-starter-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/jeffery/work/marketing-system/npm-debug.log

when npm install , this package will

Can increase dependence on the description of it ?

It will help newcomers understanding of the project.
Here are some of the ones I've collected that are not necessarily correct：

包说明

"devDependencies": {
  "babel-cli": "^6.16.0", // babel命令行工具
  "babel-core": "^6.17.0", // babel核心库
  "babel-eslint": "^7.0.0", //  让eslint可以检查符合babel代码的code 支持es6,es7..
  "babel-loader": "^6.2.5", // webpack的babel加载器, js 和 jsx文件使用
  "babel-plugin-transform-runtime": "^6.15.0", //  webpack插件,动态的引入浏览器不支持的特性。替换助手函数,相同的还有 babel-polyfill
  "babel-plugin-transform-decorators-legacy ": // for babel6 that replicates the old decorator behavior from Babel 5.
  "babel-preset-latest": "^6.16.0", //  Babel preset including es2015+
  "babel-preset-react": "^6.16.0", //  babel支持react
  "better-npm-run": "^0.0.11", //  加强NPM的启动工具
  "css-loader": "^0.25.0", //  webpack css加载器
  "eslint": "^3.8.0", //  eslint命令行工具
  "eslint-loader": "^1.5.0", // webpack eslint加载器
  "eslint-plugin-react": "^6.4.1", // eslint支持jsx
  "eslint-plugin-babel": "^3.3.0", // fixes/adds a few rules that work with ES7 and beyond features
  "eslint-plugin-promise": "^3.0.0",
  "html-webpack-plugin": "^2.22.0", // webpack 插件自动 生成index.html页面
  "json-loader": "^0.5.4", // webpack json加载器
  "sass-loader": "^4.0.2", // webpack sass加载器
  "style-loader": "^0.13.1", // webpack style加载器
  "url-loader": "^0.5.7", // webpack url加载器
  "webpack": "^1.13.2", // webpack 命令行工具
  "webpack-dev-middleware": "^1.8.4", // webpack 开发服务器
  "webpack-hot-middleware": "^2.13.0" // webpack 代码热加载
  "redbox-react": "1.3.2", // redbox-react 插件把catch到的错误直接显示到页面上,就不用再打开控制台看了
},
"dependencies": {
  "cssnano": "^3.7.7",  // webpack cssnano 待研究
  "debug": "^2.2.0", // debug模块 用于输出debug信息,
  "express": "^4.14.0", // 服务端代码
  "extract-text-webpack-plugin": "^1.0.1", // 如果我们希望样式通过 <link> 引入，而不是放在 <style> 标签内呢
  "fs-extra": "^0.30.0", // 扩展fs
  "ip": "^1.1.3", // ip地址
  "lodash": "^4.16.4", //
  "moment": "^2.15.1", // 时间模块
  "react": "^15.4.0-rc.4", // react
  "react-dom": "^15.4.0-rc.4", // react-dom
  "react-router": "2.8.1", // react 路由
  "react-redux": "^4.4.5", // 是 React 和 Redux 間的橋樑，使用 Provider、connect 去連結 store 和 React View。
  "redux-thunk": "^2.1.0", // 使action可以异步触发
  "rimraf": "^2.5.4", // window和linux命令不冲突
  "yargs": "6.0.0" // 扩展命令行参数
},

下方有注明

请教一个初始化复杂state的问题

Hi,

我想实现一个在点击link的时候，就能够从服务器端取得一个复杂的object (nested object)。然后把这个object做为initialstate来构造组件。

如果在react-router的onEnter中实现，它会阻塞页面的刷新？。
如果放在component里的componentDidMount里做ajax fetch,它会提示state中的object is 'undefined'。

请问在现有的这个结构中，如何实现这种点击link的时候，从服务器加载数据并初始化components?

https://github.com/bodyno/react-starter-kit/blob/master/src/routes/Zen/modules/zen.js

Thanks,
James

没事来吐槽

建议加入redux-logger包便于调试

createStore.js 文件

import {applyMiddleware, compose, createStore} from 'redux'
import {routerMiddleware} from 'react-router-redux'
import thunk from 'redux-thunk'
import createLogger from 'redux-logger'

import reducers from './reducers'

export default(initialState = {}, history) => {
let middleware = applyMiddleware(thunk, routerMiddleware(history))

// Use DevTools chrome extension in development
if (DEBUG) {
const logger = createLogger()
const devToolsExtension = window.devToolsExtension

middleware = applyMiddleware(thunk, routerMiddleware(history), logger)

if (typeof devToolsExtension === 'function') {
  middleware = compose(middleware, devToolsExtension())
}

}

const store = createStore(reducers(), initialState, middleware)

store.asyncReducers = {}

if (module.hot) {
module.hot.accept('./reducers', () => {
const reducers = require('./reducers').default

  store.replaceReducer(reducers)
})

}

return store
}

报错了，react应该选哪个版本安装？

273743 error Darwin 15.2.0
273744 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
273745 error node v4.4.5
273746 error npm v2.14.7
273747 error code EPEERINVALID
273748 error peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
273748 error peerinvalid Peer [email protected] wants react@^0.14.8
273748 error peerinvalid Peer [email protected] wants react@^15.2.0
273748 error peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-0
273748 error peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
273748 error peerinvalid Peer [email protected] wants react@^15.2.0
273748 error peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
273748 error peerinvalid Peer [email protected] wants [email protected] || 0.14.x || ^15.0.0-0
273749 verbose exit [ 1, true ]

感觉还是添加一下react-router-redux 吧。router 没有状态在redux历史中

请问怎么安装 decorator编译语法

我安装了babel-plugin-transform-decorators， 还有修改 .babelrc 添加plugins，
还是有报错

Decorators are not officially supported yet in 6.x pending a proposal update.
However, if you need to use them you can install the legacy decorators transform with:

npm install babel-plugin-transform-decorators-legacy --save-dev

and add the following line to your .babelrc file:

{
"plugins": ["transform-decorators-legacy"]
}

The repo url is: https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy.
13 |
14 | @observer

15 | class Counter extends Component{
| ^

ERR! [email protected] install: `node install.js`

npm install 报错。网上找不到解决办法。翻墙也下不动是什么原因？

npm run dev command can not be used

when I run npm run dev
here is the message:

[email protected] dev /home/liadbiz/learning/learn-react/react-starter-kit
better-npm-run dev

running better-npm-run in /home/liadbiz/learning/learn-react/react-starter-kit
Executing script: dev

to be executed: nodemon --exec node bin/server --ignore dist --ignore coverage --ignore tests --ignore src
Usage: nodemon [nodemon options] [script.js] [args]

See "nodemon --help" for more.

so, I gusse it's a problem about nodemon. and then I change the dev script to this way:

"command": "nodemon bin/server --ignore dist --ignore coverage --ignore tests --ignore src",
then every thing works fine.

Is this a issue in this repo?

开发中遇到一个困惑.

源代码路由的结构是

main.js :
const routes = require('./routes/index').default(store) // 从routes/index.js中拿到
  ReactDOM.render(
    <AppContainer store={store} routes={routes} />, // 向下传递store和routes
    MOUNT_NODE
  )
-------------------
AppContainer.js
const { routes, store } = this.props

    return (
      <Provider store={store} key="provider">
          <Router history={browserHistory} children={routes}/> // 这个routes拿到所有子组件
      </Provider>
    )
-------------------
routes/index.js
export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayout,
  indexRoute: Home,
  childRoutes: [ 
    CounterRoute(store),
    ZenRoute(store),
    ElapseRoute(store),
    RouteRoute(store),
    PageNotFound(),
    Redirect
  ]
})

如果我现在需要一个/Login 页面, 如何在路由中配置呢..
现在好像只能在 childRoutes里面添加子路由 . 也就是说这些组件(eg：Zen,RouteRoute)是在CoreLayout的props.children中作为一个子组件生成的.
现在需要一个和CoreLayout平级的组件 怎么做呢?

请问有哪些改进？

#33 also make some change by myself

node-sass必须安装吗？

这样的话，本地没有安装过visual studio的同事，npm install 都过不去。

能否考虑把部分需要native编译的东西，把编译结果也发布一下？

非常好的脚手架项目，谢谢！

CommonsChunkPlugin 提取manifest

new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'],
}),

是否考虑加入公共模块hash字典模块，否则每次打包都会改变公共模块的hash值，导致缓存失效问题！

有没有这个脚手架的各种使用方式的介绍.

1. 我想在生产环境和开发环境下写不同的代码怎么搞?
2. 这么多配置, 我想知道每一个配置都大题有什么作用.
3. 好多东西,需要慢慢了解, 能不能出个wiki,来介绍下?

怎么部署

1、node koa可以作为独立的httpserver吗，部署要把所有源码拷贝到服务器上，直接npm start？

2、还是把npm depoly后的dist拷贝到web服务器上部署？

Start failed: ./src/routes/Form/containers/FormContainers.js Not Found (Found Formcontainers)

ERROR in ./src/routes/Form/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./containers/FormContainer in /*****/react-starter-kit/src/routes/Form
 @ ./src/routes/Form/index.js 14:18-55

and it can be fixed by mv ./src/routes/Form/containers/Formcontainers.js /src/routes/Form/containers/FormContainers.js

请教一个问题

看到项目里面使用中间件过滤把redux树拆开了，这样做的初衷是什么呢？

win10 下 npm install 失败 报错

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\program\nodejs\node.exe" "D:\program\nodejs\node_modules\npm\bin\npm-cli.js" "i"
npm ERR! node v6.2.0
npm ERR! npm v3.8.9
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: node install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node install.js'.

npm start， 报这个错误，请问是怎么回事呢

项目不是采用了KOA吗？

现在还是express，我是比较想用koa，请问可以切换吗？

npm rebuild node-sass --force 问题

`
ERROR in Missing binding react-starter-kit/node_modules/node-sass/vendor/darwin-x64-46/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 4.x

Found bindings for the following environments:

• OS X 64-bit with Node.js 5.x

This usually happens because your environment has changed since running npm install.
Run npm rebuild node-sass --force to build the binding for your current environment.
@ ./src/components/Header/Header.scss 4:14-201 13:2-17:4 14:20-207`

webpack更新到2.x

webpack更新到2.x！

如果我想加入cssmodules应该如何做呢？

const BASE_CSS_LOADER = 'css?modules&sourceMap&-minimize'
我尝试这样做 。 但是引入icon文件后 。 icon不显示 。 但是我去掉css modules以后发现又可以

你上次提交改错了

我专门查看了一下老外的用的也是OccurrenceOrderPlugin
new webpack.optimize.OccurrenceOrderPlugin(preferEntry) 确实这么写的。http://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin 官网上也是这么写的。可能是更新了我也很奇怪

请教一个进入url取数据的问题

请问，如何在进入react-router onEnter (??) 的时候，就已经从服务器（https://api.github.com/zen）取得了一次初始数据并显示在页面中呢？

https://github.com/bodyno/react-starter-kit/tree/master/src/routes/Zen

Thanks,
James

the hot replace is not valid in server static file

When i use custom index.html in iis file,js bundle file is not changed when i modify the code.
Here is my html file

![image](https://cloud.githubusercontent.com/assets/7008154/19640471/69742502-9a0f-11e6-8c9f-bc09528f9cfa.png)

There sth. broken ,Can you give a suggestion?

babel-core没加到package.json里

babel-core没加到package.json里

为什么不做服务器端渲染

为什么不做服务器端渲染，作者是考虑服务端渲染会有什么弊端所以没有做吗？

改名成中文翻译项目

sass 文件没有定位到具体行数

sourceMap [定位都是第一行。这会给开发降低便捷性

下方有注明