从零开始搭建 Egg React SSR 服务端渲染项目

从零开始搭建 Egg React SSR 服务端渲染项目

1. 初始化环境

安装 Node LST (>=8) 环境： https://nodejs.org/zh-cn

2. 初始化 egg 项目

https://github.com/eggjs/egg-init/blob/master/README.zh-CN.md

npm i egg-init -g egg-init

• 选择 Simple egg app boilerplate project 初始化 egg 项目
• 新建 ${app_root}/app/view 目录(egg view规范目录)，并添加 .gitkeep 文件，保证该空目录被 git 提交到仓库
• 新建 ${app_root}/app/view/layout.html 文件，用于服务端渲染失败后，采用客户端渲染

3. 安装依赖

• 服务端渲染依赖

react 没有内置在 egg-view-react-ssr 里面， 项目需要显示安装依赖。

npm i react react-dom axios egg-view-react-ssr egg-scripts --save

• 构建开发依赖

npm i egg-bin cross-env easywebpack-cli easywebpack-react egg-webpack egg-webpack-react --save-dev

• 安装全部依赖

npm install

4. 添加配置

• 添加 ${app_root}/config/plugin.local.js 配置

exports.webpack = { enable: true, package: 'egg-webpack' }; exports.webpackreact = { enable: true, package: 'egg-webpack-react' };

• 添加 ${app_root}/config/plugin.js 配置

exports.reactssr = { enable: true, package: 'egg-view-react-ssr' };

• 添加 ${app_root}/config/config.default.js 配置

'use strict'; const path = require('path'); module.exports = app => { const config = exports = {}; config.keys = '123456'; // 保证构建的静态资源文件能够被访问到 config.static = { prefix: '/public/', dir: path.join(app.baseDir, 'public') }; config.reactssr = { layout: path.join(app.baseDir, 'app/view/layout.html') }; return config; }

• 添加 easywebpack-cli 配置文件 ${app_root}/webpack.config.js

关于 entry 配置，请务必先看这篇文档： https://www.yuque.com/easy-team/egg-react/config

module.exports = { entry: { 'home/index': 'app/web/page/home/index.jsx' } };

• 添加 ${app_root}/.babelrc 文件

{ "presets": [ "react", ["env", { "modules": false }] ], "plugins": [ "transform-object-assign", "syntax-dynamic-import", "transform-object-rest-spread", ["import", { "libraryName": "antd", "style": "css" }] ], "env": { "development": { "plugins": [ "react-hot-loader/babel" ] } }, "comments": false }

安装 babel 相关依赖

npm i babel-core babel-loader@7 --save-dev

npm i babel-preset-env babel-plugin-syntax-dynamic-import babel-plugin-transform-object-assign babel-plugin-transform-object-rest-spread --save-dev

• 添加 ${app_root}/postcss.config.js 文件(非必须)

module.exports = { plugins: [ require('autoprefixer') ] };

安装 autoprefixer 依赖

npm i autoprefixer --save-dev

• 添加 ${app_root}/.gitignore 配置

.DS_Store .happypack/ node_modules/ npm-debug.log .idea/ dist static public private run *.iml *tmp _site logs .vscode config/manifest.json app/view/* !app/view/layout.html !app/view/.gitkeep package-lock.json

5. 写代码

编写前端 react 代码

• 新建 ${app_root}/app/web/page/home/index.jsx  页面文件

import React, { Component } from 'react'; import Layout from 'component/layout.jsx'; import List from './componets/list'; import './index.css'; export default class HomeIndex extends Component { componentDidMount() { console.log('----componentDidMount-----'); } render() { return

; } }

编写 Node 端代码

通过 egg-view-react-ssr 插件 render 方法实现， 请看服务端渲染和前端渲染模式

• 创建 controller 文件 ${app_root}/app/controller/home.js

module.exports = app => { return class HomeController extends app.Controller { async server() { const { ctx } = this; // home/index.js 对应 app/web/page/home/index.jsx webpack 构建后 JSBundle 文件 await ctx.render('home/index.js', { message: 'egg react server side render' }); } async client() { const { ctx } = this; // renderClient 前端渲染，Node层只做 layout.html和资源依赖组装，渲染交给前端渲染。与服务端渲染的差别你可以通过查看运行后页面源代码即可明白两者之间的差异 await ctx.renderClient('home/index.js', { message: 'egg react client render' }); } }; };

• 添加路由配置

app.get('/', app.controller.home.server); app.get('/client', app.controller.home.client);

6. 本地运行

npm run dev

npm run dev 做了如下三件事情

• 首先启动 egg 应用
• 启动 webpack(egg-webpack) 构建, 文件不落地磁盘，构建的文件都在内存里面(只在本地启动, 发布模式是提前构建好文件到磁盘)
• 构建会同时启动两个 Webpack 构建服务, 客户端js构建端口9000, 服务端端口9001
• 构建完成，Egg 应用正式可用，自动打开浏览器

7. 发布模式

• ${app_root}/package.json 添加命令

{ "scripts": { "dev": "egg-bin dev", "start": "egg-scripts start", "debug": "egg-bin debug", "clean": "easy clean all", "build": "easy build", }, }

• 命令行运行 webpack 编译

npm run build 或 easy build prod

1. 启动 Webpack 构建，文件落地磁盘
2. 服务端构建的文件放到 app/view 目录
3. 客户端构建的文件放到 public 目录
4. 生成的 manifest.json 放到 config 目录
5. 构建的文件都是gitignore的，部署时请注意把这些文件打包进去

• 部署

启动应用前， 如果是非 egg-scripts  方式启动， 请设置 EGG_SERVER_ENV 环境变量，本地local, 测试环境设置 test， 正式环境设置 prod

npm start

8. 项目和插件

• egg-react-webpack-boilerplate 基于easywebpack-react和 egg-view-react-ssr插件的工程骨架项目
• easywebpack-react Webpack React 构建工程化基础
• easywebpack-cli  Webpack 构建工程化脚手架.
• egg-view-react-ssr egg react ssr 插件.
• egg-webpack 本地开发热更新使用.
• egg-webpack-react 本地开发渲染内存读取辅助 egg-webpack-react插件

9. 建议

以上详细步骤只是告诉大家 Egg + React + easywebpack 搭建项目整个流程，帮助搭建理清流程和细节。实际使用使用时建议使用 easywebpack-cli 初始化项目或者 clone egg-react-webpack-boilerplate 代码初始化项目。