easy-team / Egg React Typescript Boilerplate
Licence: mit
Egg React TypeScript Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 56
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Egg React Typescript Boilerplate
Express Webpack React Redux Typescript Boilerplate
🎉 A full-stack boilerplate that using express with webpack, react and typescirpt!
Stars: ✭ 156 (+178.57%)
Mutual labels: webpack, react-router, react-redux
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (+126.79%)
Mutual labels: webpack, webpack3, react-router
Create React Server
Server & middleware for React + Router + Redux with Server Side Rendering
Stars: ✭ 139 (+148.21%)
Mutual labels: webpack, react-router, react-redux
ts-react-boilerplate
A very opinionated (React/TypeScript/Redux/etc) frontend boilerplate
Stars: ✭ 43 (-23.21%)
Mutual labels: react-dom, react-router, react-redux
Quickbill
Create unlimited invoices for free.
Stars: ✭ 278 (+396.43%)
Mutual labels: webpack, react-router, react-redux
Soundcloud Redux
SoundCloud API client with React • Redux • Redux-Saga
Stars: ✭ 681 (+1116.07%)
Mutual labels: webpack, react-router, react-redux
Xiaoduyu.com
🐟小度鱼 - 年轻人的交流社区 https://www.xiaoduyu.com
Stars: ✭ 549 (+880.36%)
Mutual labels: webpack, react-router, react-redux
React Antd Admin Template
一个基于React+Antd的后台管理模版,在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
Stars: ✭ 1,022 (+1725%)
Mutual labels: webpack, react-router, react-redux
Vue Multiple Pages
A multiple Pages Starter use Vue-cli3
Stars: ✭ 1,079 (+1826.79%)
Mutual labels: webpack, webpack3
Create React App Redux
React Router, Redux, Redux Thunk & Create React App boilerplate
Stars: ✭ 885 (+1480.36%)
Mutual labels: react-router, react-redux
React Ssr Starter
All have been introduced React environment
Stars: ✭ 20 (-64.29%)
Mutual labels: webpack, react-router
Thinkful Workshop React Redux Node Mongodb Webpack2
Stars: ✭ 12 (-78.57%)
Mutual labels: webpack, react-redux
React Niukeapp
仿牛客APP客户端react项目,使用antdmobile的webpack模板创建
Stars: ✭ 12 (-78.57%)
Mutual labels: webpack, react-router
React Mobx Ts Antd
A simple empty project build with react、react-router、mobx、antd in typescript.
Stars: ✭ 53 (-5.36%)
Mutual labels: webpack, react-router
Todo React Redux
Todo app with Create-React-App • React-Redux • Firebase • OAuth
Stars: ✭ 942 (+1582.14%)
Mutual labels: react-router, react-redux
That React App You Want
That react app you always wanted: [email protected], [email protected], postCSS, purifycss, dll's and code splitting examples, bregh. Highly opinionated but you better like it.
Stars: ✭ 27 (-51.79%)
Mutual labels: webpack, webpack3
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-42.86%)
Mutual labels: webpack, react-router
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.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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].