Skip to content

easy-team/egg-react-typescript-boilerplate

Repository files navigation

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

打包部署

  1. 先运行 npm run tscnpm run build 构建 TypeScript Egg 代码和 TypeScript 前端代码
  2. 项目代码和构建代码一起打包代码
  3. 应用部署后,通过 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.ts Node 代码

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.ts Egg 路由配置

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',
  }
}

License

MIT