{"id":13457758,"url":"https://github.com/easy-team/egg-react-typescript-boilerplate","last_synced_at":"2025-05-12T15:44:11.046Z","repository":{"id":44116282,"uuid":"117832566","full_name":"easy-team/egg-react-typescript-boilerplate","owner":"easy-team","description":"Egg React TypeScript Server Side Render (SSR) / Client Side Render (CSR)","archived":false,"fork":false,"pushed_at":"2024-09-08T13:34:13.000Z","size":1381,"stargazers_count":56,"open_issues_count":4,"forks_count":20,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-09T07:02:26.935Z","etag":null,"topics":["easywebpack","eggjs","react","react-dom","react-redux","react-router","react-router4","ts-loader","typescript","webpack","webpack3"],"latest_commit_sha":null,"homepage":"https://easyjs.cn/egg-react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/easy-team.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-17T12:22:57.000Z","updated_at":"2024-09-08T13:34:16.000Z","dependencies_parsed_at":"2024-01-13T17:36:22.557Z","dependency_job_id":"ace4ba06-c6d3-47a5-99d3-a41a4c83297a","html_url":"https://github.com/easy-team/egg-react-typescript-boilerplate","commit_stats":{"total_commits":50,"total_committers":3,"mean_commits":"16.666666666666668","dds":0.38,"last_synced_commit":"b3714e07df7f31c293d26f3b6d13293a133ee688"},"previous_names":["hubcarl/egg-react-typescript-boilerplate"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easy-team%2Fegg-react-typescript-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easy-team%2Fegg-react-typescript-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easy-team%2Fegg-react-typescript-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easy-team%2Fegg-react-typescript-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/easy-team","download_url":"https://codeload.github.com/easy-team/egg-react-typescript-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253767458,"owners_count":21961112,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["easywebpack","eggjs","react","react-dom","react-redux","react-router","react-router4","ts-loader","typescript","webpack","webpack3"],"created_at":"2024-07-31T09:00:35.770Z","updated_at":"2025-05-12T15:44:10.995Z","avatar_url":"https://github.com/easy-team.png","language":"TypeScript","funding_links":[],"categories":["Egg + Vue/React SSR/CSR Project Examples"],"sub_categories":[],"readme":"# egg-react-typescript-boilerplate\n\n基于 Egg + React + TypeScript + Webpack 服务端渲染工程骨架\n\n## 版本\n\n- Egg 版本： ^2.x.x\n- Node 版本: Node ^8.x.x+,\n- Webpack 版本: ^4.x.x\n- React 版本: ^16.0.0\n- TypeScript: ^3.0.0\n\n## 文档\n\n- https://easyjs.cn/egg-react\n- https://www.yuque.com/easy-team/egg-react\n\n\n## 特性\n\n- 支持 Egg Node 端代码和前端代码 TypeScript 编写和构建\n\n- 支持 Node 和 asyncData 方式获取数据进行渲染\n\n- 支持多页面(MPA) 和 单页面(SPA) 服务端渲染(SSR)和前端渲染(CSR)\n\n- 支持 AntD 按需加载和主题配置功能以及 MobX 应用\n\n- 支持 Webpack 时时编译和热更新, `npm run dev` 一键启动应用\n\n- 支持开发环境, 测试环境，正式环境 Webpack 编译\n \n\n## 依赖\n\n- [easywebpack-react](https://github.com/hubcarl/easywebpack)\n- [egg-view-react-ssr](https://github.com/hubcarl/egg-view-react-ssr) \n- [egg-webpack](https://github.com/hubcarl/egg-webpack) \n- [egg-webpack-react](https://github.com/hubcarl/egg-webpack-react)\n\n## 运行\n\n#### 安装依赖\n\n```bash\nnpm install\n```\n\n#### 本地启动应用\n\n```bash\nnpm run dev\n```\n\n应用访问: http://127.0.0.1:7001\n\n#### 构建文件\n\n- TypeScript Egg 构建\n\n```bash\nnpm run tsc\n```\n\n- TypeScript 前端工程构建\n\n```bash\nnpm run build\n```\n\n#### 打包部署\n\n1. 先运行 `npm run tsc` 和 `npm run build` 构建 TypeScript Egg 代码和 TypeScript 前端代码\n2. 项目代码和构建代码一起打包代码\n3. 应用部署后，通过 `npm start` 启动应用\n\n\n## 开发\n\n#### 编写前端代码\n\n\u003e添加 `${root}/app/web/page/demo.tsx` 前端代码\n\n```js\n'use strict';\nimport React, { Component } from 'react';\nclass Demo extends Component\u003cany, any\u003e {\n  render() {\n    const { title, article } = this.props;\n    return \u003cdiv\u003e\n      \u003ch1 className=\"easy-article-detail-title\"\u003e{title}\u003c/h1\u003e\n      \u003ch3 className=\"easy-article-detail-title\"\u003e{article.title}\u003c/h3\u003e\n      \u003cdiv\u003e{article.content}\u003c/div\u003e\n    \u003c/div\u003e;\n  }\n}\nexport default Demo;\n```\n\n#### 编写 Node 代码\n\n\u003e添加 `${root}/app/controller/demo.ts` Node 代码\n\n```js\nimport { Controller, Context } from 'egg';\n\nexport default class DemoController extends Controller {\n  public async index(ctx: Context) {\n    const title = 'Node 直接获取渲染数据';\n    const article = await ctx.service.article.query({ id: Number(id) });\n    await ctx.render('demo.js', { title, article });\n  }\n}\n```\n\n#### Egg 路由配置 \n\n\u003e添加 `${root}/app/router.ts` Egg 路由配置\n\n```js\nimport { Application } from 'egg';\nexport default (app: Application) =\u003e {\n  const { router, controller } = app;\n  router.get('/demo', controller.demo.index);\n};\n```\n\n#### Webpack 构建配置\n\n\u003e添加 `${root}/webpack.config.js` 新增页面 entry 配置\n\n```js\nmodule.exports = {\n  entry: {\n    demo: 'app/web/page/demo.tsx',\n  }\n}\n```\n\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasy-team%2Fegg-react-typescript-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasy-team%2Fegg-react-typescript-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasy-team%2Fegg-react-typescript-boilerplate/lists"}