之前不少同学一直说，什么时候，能有一个结合前端的示例，这就来了。
Midway FaaS 不仅仅在函数侧提供了能力支持，也在前端部分整合了体验。经过我们一段时间的实践，发现前端代码 + FaaS 代码真是天然的绝配，比传统应用轻量许多，同时， 由于函数本身的特性，也更容易和前端配合起来。
一体化来了
首先，我们介绍一下一体化的概念，什么是一体化呢？我们所描述的一体化，就是前后端代码，在同一个项目中开发，调试，测试和部署，让整个流程在统一的开发形态中完成。
那么，为什么要做 Serverless 体系的一体化呢？我们这里给出了一些答案。
前后端一体，开发/调试/发布更加简单了
基于函数的高密度部署更加节省机器资源
不需要投入很多精力搞运维
这一回，我们的一体化拿 React 举例。
开始浅出
首先，安装 Midway FaaS 的 @midwayjs/faas-cli 工具。
$ npm i @midwayjs/faas-cli -g
我们将脚手架和示例都加到了 f create 命令中，选择 faas-react 示例。（新菜单，好不好看，快夸我。)
然后，敲回车，数个 1, 2, 3 ，示例就 down 下来啦。
本地开发和调试
整个示例代码是从 create-react-app 创建而来，加上了我们 midway faas 特有的一体化开发结构，树状结构如下。
➜ react_xxx tree
.
├── README.md
├── f.yml # 函数配置文件
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src # react 源码目录
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── Detail.tsx
│ ├── Home.tsx
│ ├── Layout.tsx
│ ├── List.tsx
│ ├── apis # 函数代码目录
│ │ ├── config
│ │ │ └── config.default.ts
│ │ ├── configuration.ts
│ │ └── index.ts
│ ├── common.css
│ ├── home.css
│ ├── index.css
│ ├── index.tsx
│ ├── layout.css
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── serviceWorker.ts
│ ├── setupProxy.js # 自定义 webpack dev server
│ └── setupTests.ts
└── tsconfig.json # ts 编译配置
4 directories, 29 files
整个结构以前端视角为主，函数的代码作为 api 放在了 src/apis 目录中。（一体化的完整思考我们将在后面的系列文章介绍）
然后 npm install 等步骤我们就略过不细讲了。
我们在本地可以通过 npm run dev 来启动看一下效果，启动时会自动发一个请求到函数端拿数据，渲染到页面，访问 http://127.0.0.1:8080/ ，整体效果如下。
切换顶部的 Tab 区域，我们设计了三个 HTTP 接口，启动后会分别请求本地的三个函数。
在 midway faas 体系中，函数是通过 Class 的方法来承载。
通过 midway faas 的包装，你可以简单的返回 html，文件，设置响应头，乃至配置 koa 中间件。你可以把逻辑进行组合复用，也可以对整个流程进行重组；由于有生命周期的存在，你也可以在函数中使用初始化连接，加载依赖；也可以按环境加载熟悉的配置文件，注入到任意逻辑中。
部署
这个示例，在部署到云平台前，需要提前进行构建，执行 npm run build ，前端代码将会构建到 build 目录，函数端已经配置了该目录地址，会自动配置和加载。
使用 f deploy 命令，默认会发布到阿里云，由于 midway faas 也提供了国内多云平台的支持，同时也可以自行修改到其他平台，绑定域名之后即可访问。
小结
恭喜，自此，你获得了生产力提升技能，快来尝试一下吧。
此开发示例已经提前接入了阿里云云开发平台，可以在上面简单的发发发，一个 Web 栈应用就搭建完成了，同时还提供了百万代金券补贴，很诱人！！
