feat:init

Author: caoli

.babelrc

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

.gitattributes

@@ -0,0 +1,3 @@
+*.js linguist-language=javascript
+*.css linguist-language=javascript
+*.html linguist-language=javascript

.gitignore

@@ -0,0 +1,26 @@
+.DS_Store
+.happypack/
+node_modules/
+npm-debug.log
+.idea/
+dist
+static
+public/
+private
+run
+*.iml
+artifacts.json
+tmp/
+*tmp
+_site
+logs
+app/**/*.js
+config/**/*.js
+index.js
+config/buildConfig.json
+config/manifest.json
+app/view/*
+!app/view/layout.html
+!app/view/README.md
+!app/view/.gitkeep
+package-lock.json

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "files.exclude": {
+    "USE_GITIGNORE": true,
+    "**/*.js": {
+      "when": "$(basename).ts"
+    }
+  },
+  "path-intellisense.mappings": {
+    "lib": "${workspaceRoot}/app/web/lib",
+    "asset": "${workspaceRoot}/app/web/asset",
+    "component": "${workspaceRoot}/app/web/component",
+    "page": "${workspaceRoot}/app/web/page",
+    "store": "${workspaceRoot}/app/web/store",
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 sky.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,89 @@
+# egg-react-typescript-boilerplate
+
+基于 Egg + React + TypeScript + Webpack3 多页面和单页面服务端客户端渲染同构工程骨架项目.
+
+## 1. 版本
+
+- Egg 版本： ^2.x.x
+- Node 版本: Node ^8.x.x+,
+- Webpack 版本: ^3.10.1
+- React 版本: ^16.0.0
+- TypeScript: ^2.6.2
+
+## 2. 文档
+
+- http://hubcarl.github.io/easywebpack/react
+- https://zhuanlan.zhihu.com/easywebpack
+
+
+## 3. 特性
+
+- 支持 Egg Node 端代码 和 前端代码 TypeScript 编写和构建
+
+- 支持 async 和 await 特性, Controller 采用 class 方式编写
+
+- 支持 server 和 client 端代码修改, Webpack 时时编译和热更新, `npm run dev` 一键启动应用
+
+- 基于 react + react-router + react-redux 单页面服务器客户端同构实现
+
+- 支持开发环境, 测试环境，正式环境 Webpack 编译
+
+- 支持 js/css/image 资源依赖, 内置支持CDN特性
+
+- 支持 Webpack DLL 自动化构建
+
+ 
+
+## 4. 依赖
+
+- [easywebpack-react](https://github.com/hubcarl/easywebpack)
+- [egg-view-react-ssr](https://github.com/hubcarl/egg-view-react-ssr) 
+- [egg-webpack](https://github.com/hubcarl/egg-webpack) 
+- [egg-webpack-react](https://github.com/hubcarl/egg-webpack-react)
+
+## 5. 使用
+
+#### 5.1 安装依赖
+
+```bash
+npm install
+npm start
+```
+
+#### 5.2 启动应用
+
+首次运行请先运行一次 `npm run tsc`
+
+```bash
+npm run dev
+```
+
+应用访问: http://127.0.0.1:7001
+
+![npm start启动](https://github.com/hubcarl/egg-vue-webpack-boilerplate/blob/master/docs/images/webpack-build.png)
+
+
+#### 5.3 构建
+
+- TypeScript Egg 构建
+
+```bash
+npm run tsc
+```
+
+- TypeScript 前端工程构建
+
+```bash
+npm run build
+```
+
+#### 5.4 打包部署
+
+1. 先运行 `npm run tsc` 和 `npm run build` 构建 TypeScript Egg 代码和 TypeScript 前端代码
+2. 项目代码和构建代码一起打包代码
+3. 应用部署后，通过 `npm start` 启动应用
+
+
+## License
+
+[MIT](LICENSE)

app/controller/about/about.ts

@@ -0,0 +1,9 @@
+import { Controller } from "egg";
+
+'use strict';
+export default class AboutController extends Controller {
+  async index() {
+    const { ctx } = this;
+    await ctx.render('about/about.js', { message: 'react server side render!' });
+  }
+};

app/controller/ant/ant.ts

@@ -0,0 +1,11 @@
+'use strict';
+import { Controller } from "egg";
+export default class TabController extends Controller {
+  async tab() {
+    const { ctx } = this;
+    await ctx.render('ant/tab/tab.js', {
+      title:'--ant design server side render--',
+      keywords:'react, server side render, ant design',
+      message: { text: 'react ant design server side render demo!'}});
+  }
+};

app/controller/app/app.ts

@@ -0,0 +1,21 @@
+import { Controller } from "egg";
+const Model = require('../../mocks/article/list');
+export default class AppController extends Controller {
+    
+  async index() {
+    const { ctx } = this;
+    await ctx.render('app/app.js', { url: this.ctx.url.replace(/\/app/, '')});
+  }
+  async list() {
+    const { ctx } = this;
+    const pageIndex = ctx.query.pageIndex;
+    const pageSize = ctx.query.pageSize;
+    ctx.body = Model.getPage(pageIndex, pageSize);
+  }
+
+  async detail() {
+    const { ctx } = this;
+    const id = ctx.query.id;
+    ctx.body = Model.getDetail(id);
+  }
+};

app/controller/css/css.ts

@@ -0,0 +1,11 @@
+'use strict';
+import { Controller } from 'egg';
+export default class CssModuleController extends Controller {
+  async cssModule() {
+    const { ctx } = this;
+    await ctx.render('css/module/module.js', {
+      title:'--react server side render--',
+      keywords:'react, server side render',
+      message: { text: 'react server side render! support css module test!'}});
+  }
+};

app/controller/hello/hello.ts

@@ -0,0 +1,19 @@
+'use strict';
+import { Controller } from 'egg';
+export default class HelloController extends Controller {
+  async element() {
+    const { ctx } = this;
+    await ctx.render('hello/element.js', {
+      title:'--react server side render--',
+      keywords:'react, server side render',
+      message: { text: 'react server side render for element!'}});
+  }
+
+  async component() {
+    const { ctx } = this;
+    await ctx.render('hello/component.js', {
+      title:'--react server side render--',
+      keywords:'react, server side render',
+      message: { text: 'react server side render for component!'}});
+  }
+};

app/controller/home/home.ts

@@ -0,0 +1,25 @@
+import { Controller } from 'egg';
+const Model = require('../../mocks/article/list');
+export default class AppController extends Controller {
+  async index() {
+    const { ctx } = this;
+    await ctx.render('home/home.js', Model.getPage(1, 10));
+  }
+
+  async client() {
+    const { ctx } = this;
+    await ctx.renderClient('home/home.js', Model.getPage(1, 10));
+  }
+
+  async element() {
+    const { ctx } = this;
+    ctx.render('element/element.js', Model.getPage(1, 10));
+  }
+
+  async pager() {
+    const { ctx } = this;
+    const pageIndex = ctx.query.pageIndex;
+    const pageSize = ctx.query.pageSize;
+    ctx.body = Model.getPage(pageIndex, pageSize);
+  }
+};

app/controller/router/router.ts

@@ -0,0 +1,7 @@
+import { Controller } from "egg";
+export default class RouterController extends Controller {
+  async index() {
+    const { ctx } = this;
+    await ctx.render('router/router.js', { message: 'react server side render!' });
+  }
+};

app/controller/spa/spa.ts

@@ -0,0 +1,18 @@
+import { Controller } from 'egg';
+export default class SPAController extends Controller {
+
+  async client() {
+    const { ctx } = this;
+    await ctx.renderClient('spa/client.js', {});
+  }
+
+  async redux() {
+    const { ctx } = this;
+    await ctx.renderClient('spa/redux.js', {});
+  }
+
+  async ssr() {
+    const { ctx } = this;
+    await ctx.render('spa/ssr.js', { url: ctx.url });
+  }
+};

app/controller/test/test.ts

@@ -0,0 +1,12 @@
+
+export default function (app) {
+
+  return class TestController extends app.Controller {
+
+    async index() {
+      const { ctx } = this;
+      await ctx.render('test/test.js', { title: 'error test', message: 'react server side render!' });
+    }
+    
+  };
+};

app/index.td.ts

@@ -0,0 +1,47 @@
+import AboutController from './controller/about/about';
+import AntController from './controller/ant/ant';
+import AppController from './controller/app/app';
+import CssController from './controller/css/css';
+import HelloController from './controller/hello/hello';
+import HomeController from './controller/home/home';
+import RouterController from './controller/router/router';
+import SPAController from './controller/spa/spa';
+
+
+declare module 'egg' {
+  export interface Application {
+    
+  }
+
+  export interface IController {
+    about: {
+      about: AboutController
+    },
+    ant: {
+      ant: AntController
+    },
+    app: {
+      app: AppController,
+    },
+    css: {
+      css: CssController
+    },
+    hello: {
+      hello: HelloController
+    },
+    home: {
+      home: HomeController
+    },
+    router: {
+      router: RouterController
+    },
+    spa: {
+      spa: SPAController
+    }
+  }
+
+  export interface IService {
+  }
+
+  function startCluster(options: any)
+}