此项目采用后端 nodejs koa2 框架渲染 react + mobx 的项目 demo,主要实现如下功能:
- react + antd 实现 UI 界面
- mobx 管理数据
- API 服务器,koa2+mongoDB
- SSR(前后端同构),后端渲染时预加载数据
- 简单的 SEO 功能
- 安装依赖:
npm install
- 启动 MongoDB
$ mongod -f /usr/local/etc/mongod.conf
- 启动 node 开发环境:
npm run dev
- 构建生产环境版本:
npm run build
- 运行 node 生产环境:
npm run start
启动需要 MongoDB 数据库有数据,可以按照 models 中的数据模型创建一份假数据。MongoDB:mongodb://127.0.0.1:27017/ReactIsomorphicBlogDb
现项目中有一个简历模版页,路由:http://127.0.0.1:3725/resume 目录:/client/containers/resume/,可以做后端数据预加载的参考。
- /build // 项目构建,webpack 配置目录
- /client // 客户端代码
- /server // 服务器端代码
- /static // 不需要处理的静态文件,前后端都使用
- /views // index.tpl.html 模版文件目录
- ...
- GitHub - leidenglai/React-Koa2-SSR: React+Nodejs 同构项目 demo
- react-koa-mobx-server-side-render
- React Router V4 中文文档
- React + MobX TodoMVC Example
- React Isomorphic Boilerplate
进入项目根目录打开 package.json 文件,它定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install 命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。 根据 scripts 属性下面的配置,我们可以看到项目有 4 个入口:
- start:front:只启动前端开发环境
- dev:启动服务器开发,也是本项目的主要启动方式
- start:启动项目生产环境,启动之前需要先构建项目生产环境代码
- test:启动项目测试
开发入口 dev
命令:cross-env NODE_ENV=development nodemon --legacy-watch ./server/server.dev.js --watch server --watch build
cross-env NODE_ENV=development 设置环境变量为 NODE_ENV development,cross-env 命令兼容 window
nodemon --legacy-watch ./server/server.dev.js --watch server --watch build
使用 nodemon 启动开发环境 同时实时监听代码变化,用于热更新,项目开发环境入口文件 ./server/server.dev.js
server.dev.js 重要的几个点:
require('babel-polyfill')
他会仿效一个完整的 ES2015+ 环境- 配置 babel 运行环境,配置基本和
.babelrc
文件一样
const babelRegister = require('@babel/register')
// Javascript require hook
babelRegister({
// ....
})
- webpack 以及热更新配置
- 依赖包:因为 node 环境是没有浏览器环境下的 window 等全局对象,所以很多依赖包需要找前后端通用版本如:fetch 要使用 isomorphic-fetch
- 打包:打包时使用 webpack,webpack 的有些插件也仅支持打包浏览器环境,如 style-loader 在打包服务器版本时,需要替换成 node-style-loader
- React-router v4 和 v3 版本差别很大,设计思路都发生改变,需要重新学习
- 后端渲染预请求数据需要注意 store 上下文、作用域问题、异步请求
动态参数的路由页面还没有试过,后续写一个 博客系统