egg-react-typescript-boilerplate
基于 Egg + React + TypeScript + Webpack 服务端渲染工程骨架
版本
- Egg 版本： ^2.x.x
- Node 版本: Node ^8.x.x+,
- Webpack 版本: ^4.x.x
- React 版本: ^16.0.0
- TypeScript: ^3.0.0
文档
特性
-
支持 Egg Node 端代码和前端代码 TypeScript 编写和构建
-
支持 Node 和 asyncData 方式获取数据进行渲染
-
支持多页面(MPA) 和 单页面(SPA) 服务端渲染(SSR)和前端渲染(CSR)
-
支持 AntD 按需加载和主题配置功能以及 MobX 应用
-
支持 Webpack 时时编译和热更新,
npm run dev一键启动应用 -
支持开发环境, 测试环境，正式环境 Webpack 编译
依赖
运行
安装依赖
npm install本地启动应用
npm run dev应用访问: http://127.0.0.1:7001
构建文件
- TypeScript Egg 构建
npm run tsc- TypeScript 前端工程构建
npm run build打包部署
- 先运行
npm run tsc和npm run build构建 TypeScript Egg 代码和 TypeScript 前端代码 - 项目代码和构建代码一起打包代码
- 应用部署后，通过
npm start启动应用
开发
编写前端代码
添加
${root}/app/web/page/demo.tsx前端代码
'use strict';
import React, { Component } from 'react';
class Demo extends Component<any, any> {
render() {
const { title, article } = this.props;
return <div>
<h1 className="easy-article-detail-title">{title}</h1>
<h3 className="easy-article-detail-title">{article.title}</h3>
<div>{article.content}</div>
</div>;
}
}
export default Demo;编写 Node 代码
添加
${root}/app/controller/demo.tsNode 代码
import { Controller, Context } from 'egg';
export default class DemoController extends Controller {
public async index(ctx: Context) {
const title = 'Node 直接获取渲染数据';
const article = await ctx.service.article.query({ id: Number(id) });
await ctx.render('demo.js', { title, article });
}
}Egg 路由配置
添加
${root}/app/router.tsEgg 路由配置
import { Application } from 'egg';
export default (app: Application) => {
const { router, controller } = app;
router.get('/demo', controller.demo.index);
};Webpack 构建配置
添加
${root}/webpack.config.js新增页面 entry 配置
module.exports = {
entry: {
demo: 'app/web/page/demo.tsx',
}
}