bodyno/universal-react-starter-kit

服务端渲染的 React 手脚架。使用 React, Redux, and React-Router！一个简单优美的脚手架

Universal React Starter Kit

服务端渲染的React手脚架

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

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

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

觉得不错的话，请Star一下本项目，这是对作者最大的支持。

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

特性

• react
• redux
• react-router
• react-router-redux
• webpack
• babel
• koa
• 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                   # Koa 程序 (使用 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，或者其它你想要做的事，这完全取决于你。

谢谢大家

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

universal-react-starter-kit's Issues

编译好dist文件后，下一步这个dist放到服务器吗？服务器上要运行什么？求解

怎么在模块中增加子路由

怎么在模块中增加子路由，例如，在router中Counter模块增加子页面，并在模块**用Counter中的reducer？

服务端请求数据后再渲染的几个问题

1.怎样根据请求路由的不同服务器端请求不同接口的数据返回给首屏？（暂时我的实现是根据在路由层放入action，前后端共用去请求数据）

2.对于多层结构的路由的首屏服务器端的数据请求是怎样的？（我暂时只能用router-config的方式去写一个配置文件，但总感觉不是很好）

请楼主帮忙指点下，我一直在纠结这里该怎么做！https://github.com/wd2010/React-universal-ssr

有点不完美，为什么components不用extends Component？

如果使用extends Component，为什么test跑不了？

请教：服务器渲染的几点问题

@bodyno
您好，我想请问一下关于这个脚手架服务器渲染的几点问题：
一开始我使用的是非服务器渲染的，后台采用的是java提供API数据服务，在浏览器使用localstorage来保存jwt访问用户数据；
而当服务器渲染的时候，服务器初始化渲染并将初始store返回给浏览器，在浏览器端执行登陆用户的操作，如何将已登录的状态同步到服务器上？因为登陆之后，刷新之后又处于非登录的状态~~

期待您的回答，谢谢！！

文档无法正常查看

文档无法正常查看了。请检查下

刷新浏览器会删掉一些store中的state

你好，
我用 redux-connect，在服务器预先请求api获取了初始的数据，并且通过initial state传到的浏览器，但是，在浏览器端刷新页面的时候，会dispatch一个 @@router/LOCATION_CHANGE的 action，把原先请求好的那个state 删掉。
如下图：


如上图， store中那个invention_works
这个是什么导致的呢？是因为这个页面的router 是通过injectReducer导入进来的吗？

编译出dist后怎么用呢，需要另外搭建node服务来运行dist里的文件吗

编译出dist后怎么用呢，需要另外搭建node服务来运行dist里的文件吗，才能服务端渲染？

npm install 最后出错

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"
os":"win32","arch":"x64"})
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "i"
npm ERR! node v6.10.1
npm ERR! npm v3.10.10
npm ERR! path C:\Users\cc\Desktop\node.js\universal-react-starter-kit\node_modules.staging\ajv-2dadfe81
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall rename

npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\cc\Desktop\node.js\universal-react-starter-kit\node_modules.staging\ajv-2dadfe81' -> 'C:\Users\cc\Desktop\node.js\universal-react-starter-kit\node_modules\ajv'
npm ERR! at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
npm ERR! at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
npm ERR! at FSReqWrap.oncomplete (fs.js:123:15)
npm ERR!
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\cc\Desktop\node.js\universal-react-starter-kit\node_modules.staging\ajv-2dadfe81' -> 'C:\Users\cc\Desktop\node.js\universal-react-starter-kit\node_modules\ajv'
npm ERR! at Error (native)
npm ERR! { Error: EPERM: operation not permitted, rename 'C:\Users\cc\Desktop\node.js\universal-react-starter-kit\node_modules.staging\ajv-2dadfe81' -> 'C:\Users\cc\Desktop\node.js\universal-react-starter-kit\node_modules\ajv'
npm ERR! at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
npm ERR! at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
npm ERR! at FSReqWrap.oncomplete (fs.js:123:15)
npm ERR!
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\cc\Desktop\node.js\universal-react-starter-kit\node_modules.staging\ajv-2dadfe81' -> 'C:\Users\cc\Desktop\node.js\universal-react-starter-kit\node_modules\ajv'
npm ERR! at Error (native) parent: 'react-redux-starter-kit' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\cc\Desktop\node.js\universal-react-starter-kit\npm-debug.log

如何给layout的子组件传入store呢