@modern-js/main-doc 0.0.0-next-20221116121040

package/zh/tutorials/first-app/c07-app-entry/7.3-manage-entries-by-hand.md

@@ -0,0 +1,74 @@
+---
+title: 管理应用入口​​​
+---
+
+上一个小节中，我们学习了使用命令行手动创建新的入口。
+
+在这一小节中，我们将通过配置项来对入口进行管理。
+
+我们可以在 `package.json` 中的 `modernConfig`，或是在符合[业界主流惯例](https://github.com/davidtheclark/cosmiconfig)的 Modern.js 配置文件里，自己写代码来控制项目的配置。
+
+之前的章节中，我们都是直接修改 `package.json` 中的 `modernConfig` 字段来实现修改配置。
+
+现在，让我们在项目目录下，新建一个 `modern.config.js`（若已新建可忽略），并在里面添加内容：
+
+```js title="modern.config.js"
+export default defineConfig({
+  server: {
+    ssr: true,
+    ssrByEntries: {
+      'landing-page': false,
+    },
+  },
+};
+```
+
+执行 `pnpm run dev`，再用浏览器打开 `view-source:http://localhost:8080/landing-page`，可以看到 `landing-page` 网页内容是通过 js 动态加载的，且此页面的 SSR 功能被关闭。
+
+注：此时，其他页面的 SSR 功能仍然正常开启。
+
+如果注释掉 `ssrByEntries` 和它的值，landing-page 的 SSR 功能就恢复开启了。
+
+:::info 注
+当相同配置字段出现于两个文件中时， `package.json` 中 `modernConfig` 字段里的配置会优先于 `modern.config.js` 中的配置。
+:::
+
+当需要配置包含复杂逻辑的选项时，比如，开发者想在项目中使用 `*.myext` 文件，这是一种非主流的文件类型，Modern.js 没有默认集成对它的支持。
+
+所以，开发者可以在 `modern.config.js` 里增加对它的支持（通过webpack配置），如下所示：
+
+:::info 注
+更多 webpack 配置相关可以查看 [Webpack 配置文档](/docs/configure/app/tools/webpack)。
+:::
+
+```js
+// 注：以下为伪代码，loader等名字皆为虚构，仅做演示使用
+export default defineConfig({
+  tools: {
+    webpackChain: (chain) => {
+      chain.module
+        .rule('my-loader')
+        .test(/\.myext$/)
+        .use('custom-loader')
+        .loader('myext-loader')
+        .options({});
+    },
+  },
+};
+```
+
+这个需求要修改 webpack 配置，用 Modern.js 配置的`tools.webpack`选项来实现显然是更方便的。
+
+还有一些时候，需要一些更复杂的逻辑来做设置，比如需要 JS 变量、表达式、导入模块等，这种时候也适合用 `modern.config.js` 来手动配置，比如：
+
+```js
+export default defineConfig({
+  server: {
+    ssrByEntries: {
+      'landing-page': process.env.NODE_ENV !== 'production',
+    },
+  },
+};
+```
+
+以上代码实现表示只在开发环境里开启 SSR。

package/zh/tutorials/first-app/c07-app-entry/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "7: 添加应用入口"
+}

package/zh/tutorials/first-app/c08-client-side-routing/8.1-code-based-routing.md

@@ -0,0 +1,153 @@
+---
+title: 使用自控式路由​​​​
+---
+
+上一章节中，我们学习了如何创建应用入口。
+
+这一章节中，我们将会学习如何为入口增加【 客户端路由 】。
+
+我们分别用两种不同的方式，为 `contacts` 和 `landing-page` 增加客户端路由逻辑。
+
+`contacts` 和 `landing-page` 这两个入口，都是通过 CLI 自动创建出来的，在创建过程中我们没有修改入口的默认配置，因此每个入口的客户端路由都是默认开启的。
+
+```js title="modern.config.js"
+export default defineConfig({
+  runtime: {
+    router: true,
+    state: true,
+  },
+});
+```
+
+之前我们已经为联系人列表增加了 Archive 按钮，接下来我们添加一个客户端路由 `/archives`，访问这个路由时，只显示已存档的联系人，而原有的 `/` 继续显示所有联系人。
+
+打开 `src/contacts/App.tsx`，在原有的 `mockData` 下方新增 `mockArchivedData`：
+
+```js
+const mockData = getAvatar([
+  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
+  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
+  { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
+  { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
+]);
+
+const mockArchivedData = getAvatar([
+  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
+  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
+]);
+```
+
+在文件顶部引入 [React Router](https://reactrouter.com/) 的 `Route`、`Switch` 和 [React Helmet](https://github.com/nfl/react-helmet) 的 `Helmet` 组件：
+
+```js
+import { Route, Switch } from '@modern-js/runtime/router';
+import { Helmet } from '@modern-js/runtime/head';
+```
+
+在 `App` 组件中使用 `Route` 写两个路由，分别用不同的 mock 数据渲染列表：
+
+```js
+function App() {
+  return (
+    <div className="container lg mx-auto">
+      <Switch>
+        <Route path="/" exact={true}>
+          <Helmet>
+            <title>All</title>
+          </Helmet>
+          <List
+            dataSource={mockData}
+            renderItem={info => <Item key={info.name} info={info} />}
+          />
+        </Route>
+        <Route path="/archives" exact={true}>
+          <Helmet>
+            <title>Archives</title>
+          </Helmet>
+          <List
+            dataSource={mockArchivedData}
+            renderItem={info => <Item key={info.name} info={info} />}
+          />
+        </Route>
+      </Switch>
+    </div>
+  );
+}
+```
+
+:::info 注
+Modern.js 默认集成了 react-helmet，无需安装依赖，可以直接使用，也可以结合 SSR 使用，满足 SEO 需求。
+
+Modern.js 也默认集成了 react-router，无需安装依赖和自己配置 `BrowserRouter` 等样板代码，可以直接用 Route、Switch 等组件实现路由逻辑。
+:::
+
+React Router v4+ 有两种用法，一种是 `component-based` 的，一种是基于全局配置的。这两种都由开发者自己用代码来控制客户端路由逻辑，所以我们把这种模式称作【**自控式路由**】。
+
+执行 `pnpm run dev`，访问 `http://localhost:8080/contacts`，可以看到完整的联系人，页面的标题是 All：
+
+![display](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/display.png)
+
+访问 `http://localhost:8080/contacts/archives`，只会看到已存档的联系人，页面的标题是 Archives：
+
+![display1](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/display1.png)
+
+查看页面 HTML 源码，可以看到两个页面的内容是一样，是在客户端针对不同 URL 渲染不同内容。
+
+**接下来我们增加一个简单的导航栏，让用户能在两个列表之间切换**。
+
+打开 src/contacts/App.tsx，在顶部导入 Radio 组件：
+
+```tsx
+import { List, Radio } from 'antd';
+```
+
+然后将 UI 最顶部进行修改，增加一组单选框
+
+```tsx {3-8}
+return (
+  <div className="container lg mx-auto">
+    <div className="h-16 p-2 flex items-center justify-center">
+      <Radio.Group onChange={handleSetList} value={currentList}>
+        <Radio value="/">All</Radio>
+        <Radio value="/archives">Archives</Radio>
+      </Radio.Group>
+    </div>
+    <Switch>
+```
+
+然后我们来实现 `currentList` 和 `handleSetList`。
+
+引入两个 React Hook：`useState` 和 `useHistory`，以及 Ant Design 的事件类型定义：
+
+```js
+import { useState } from 'react';
+import { List, Radio, RadioChangeEvent } from 'antd';
+import { Route, Switch, useHistory } from '@modern-js/runtime/router';
+```
+
+最后在 App 组件里增加局部状态和相关逻辑：
+
+```js {2-8}
+function App() {
+  const history = useHistory();
+  const [currentList, setList] = useState(history.location.pathname || '/');
+  const handleSetList = (e: RadioChangeEvent) => {
+    const { value } = e.target;
+    setList(value);
+    history.push(value);
+  };
+```
+
+到这里就已经完成了页面导航栏实现，执行 `pnpm run dev` 查看效果：
+
+![display2](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/display2.png)
+
+点击导航栏中 Archives，可以看到单选框的选中状态和 URL 都会变化，页面没有刷新，只发生了 CSR。
+
+如果我们将 contacts 入口的 SSR 选项开启后（[配置教程](/docs/configure/app/server/ssr)），重新访问两个页面，可以看到 HTML 内容是不同的，这是因为在 SSR 阶段页面就执行了客户端路由的逻辑，HTML 里已经包含了最终的渲染结果。
+
+访问 `http://localhost:8080/contacts/archives`，点击顶部单选框，可以看到在有 SSR 的情况下，CSR 不受影响，跟开启 SSR 之前的效果一致，实现了 UX 的最大化（首屏 SSR，后续交互 CSR）。
+
+---
+
+> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c08/hello-modern)。

package/zh/tutorials/first-app/c08-client-side-routing/8.2-file-based-routing.md

@@ -0,0 +1,318 @@
+---
+title: 使用约定式路由​​​​
+---
+
+上一小节中，我们学习了如何使用【 自控式路由 】方式实现客户端路由。
+
+这一小节中，我们将在 landing-page 入口里，学习使用【 约定式路由 】。
+
+我们首先将 `landing-page` 入口的**标识** `App.tsx` 删除，换成另一种符合约定的**标识** `pages/`。
+
+我们在终端执行以下代码修改 `landing-page` 文件内容：
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+<TabItem value="macOS" label="macOS" default>
+
+```bash
+rm src/landing-page/App.tsx src/landing-page/App.css
+mkdir -p src/landing-page/pages/
+touch src/landing-page/pages/_app.tsx src/landing-page/pages/index.tsx src/landing-page/pages/docs.tsx
+```
+
+</TabItem>
+<TabItem value="Windows" label="Windows">
+
+```powershell
+rm src/landing-page/App.tsx
+rm src/landing-page/App.css
+mkdir -p src/landing-page/pages/
+ni src/landing-page/pages/_app.tsx
+ni src/landing-page/pages/index.tsx
+ni src/landing-page/pages/docs.tsx
+```
+
+</TabItem>
+</Tabs>
+
+
+`pages/` 跟 `App.tsx` 一样，都起到入口**标识**的作用，让 `src/landing-page` 被识别为入口。
+
+如果存在 `App.tsx` 则优先使用 `App.tsx` 作为编译入口。而 `pages/` 则默认启用【 约定式路由 】的客户端路由实现方式，`pages/` 中的文件路径和文件内容，将被自动自动转换成客户端路由逻辑。
+
+执行命令后，项目结构如下：
+
+```md
+.
+├── .vscode/
+│   ├── extensions.json
+│   └── settings.json
+├── src/
+│   ├── contacts/
+│   │   ├── components/
+│   │   │   ├── Avatar/
+│   │   │   │   ├── index.stories.tsx
+│   │   │   │   └── index.tsx
+│   │   │   └── Item/
+│   │   │       ├── index.test.tsx
+│   │   │       └── index.tsx
+│   │   ├── styles/
+│   │   │   └── utils.css
+│   │   ├── App.css
+│   │   └── App.tsx
+│   ├── landing-page/
+│   │   └── pages/
+│   │       ├── _app.tsx
+│   │       ├── docs.tsx
+│   │       └── index.tsx
+│   ├── .eslintrc.json
+│   └── modern-app-env.d.ts
+├── .editorconfig
+├── .gitignore
+├── .npmrc
+├── .nvmrc
+├── README.md
+├── package.json
+├── pnpm-lock.yaml
+└── tsconfig.json
+```
+
+注：以上展示的是手动创建入口的方式。
+
+以下介绍自动启用方式，开发者可在自己的项目中尝试：
+
+在 modern.js 项目中，执行`pnpm run new`命令, 按照以下选项选择，实现创建入口时，自动启用【 约定式路由 】：
+
+```bash
+# 请选择你想要的操作：
+❯ 新建「应用入口」
+
+#填写入口名称：
+landing-page
+
+# 是否需要调整默认配置?
+❯ 是
+
+# 请选择客户端路由方式
+  自控路由
+❯ 约定式路由
+  不启用
+```
+
+假设这个 `landing-page` 入口是一个简单的有导航栏的落地页，包含两个子页面：一个首页和一个文档页，我们用客户端路由的方式来区别这两个子页面。
+
+我们先分别实现这个入口两个子页面的内容，`src/landing-page/pages/index.tsx` 是首页，内容为：
+
+```js
+import { Helmet } from '@modern-js/runtime/head';
+
+const Index = () => (
+  <>
+    <Helmet>
+      <title>Home</title>
+    </Helmet>
+    <p>
+      Welcome to <a href="/contacts">Contact List</a>!
+    </p>
+  </>
+);
+
+export default Index;
+```
+
+`src/landing-page/pages/docs.tsx` 是文档页，内容为：
+
+```js
+import { Helmet } from '@modern-js/runtime/head';
+
+const Docs = () => (
+  <>
+    <Helmet>
+      <title>Docs</title>
+    </Helmet>
+    <p>I am docs</p>
+  </>
+);
+
+export default Docs;
+```
+
+最后，`src/landing-page/pages/_app.tsx` 是下划线开头的，代表这是【 约定式路由 】中一个特殊的功能文件，为整个入口提供根组件，可以用于实现全局布局、公共 UI 等。
+
+在这里，我们只实现一个简单的导航和结构：
+
+```js
+import { ComponentType } from 'react';
+import { NavLink } from '@modern-js/runtime/router';
+
+const App = ({ Component, ...pageProps }: { Component: ComponentType }) => (
+  <div>
+    <h2>Nav:</h2>
+    <ul>
+      <li>
+        <NavLink
+          to="/"
+          exact={true}
+          activeStyle={{
+            color: '#f60',
+          }}>
+          Home
+        </NavLink>
+      </li>
+      <li>
+        <NavLink
+          to="/docs"
+          activeStyle={{
+            color: '#f60',
+          }}>
+          Docs
+        </NavLink>
+      </li>
+    </ul>
+    <h2>Content:</h2>
+    <Component {...pageProps} />
+  </div>
+);
+
+export default App;
+```
+
+执行 `pnpm run dev`，访问 `http://localhost:8080/landing-page/`，可以看到结果：
+
+![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/result.png)
+
+点击 Nav 里的链接，URL 变为 `http://localhost:8080/landing-page/docs`，内容会变为：
+
+![result1](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/result1.png)
+
+我们同样可以开启/关闭 SSR 选项（[配置教程](/docs/configure/app/server/ssr)），并查看 HTML 源码。结果和【 自控式路由 】的 contacts 入口一样。
+
+:::info 注
+Modern.js Lint 规则集要求 React 组件的文件名或目录名都用 Pascal 命名风格，跟组件本身的名字保持一致，首字母大写。
+
+`pages/` 里面的文件虽然也是 React 组件，但它们是基于约定用于指定路由的特殊组件文件，对应的是 URL 中的路径，所以这里是一种例外情况，文件名/目录名跟 [URL 命名风格](https://geemus.gitbooks.io/http-api-design/content/en/requests/downcase-paths-and-attributes.html)保持一致更好，最好用 dash 命名风格（全小写，- 连字符分隔）。
+:::
+
+接下来我们再实现一个简单的评论详情页，因为评论会有很多条，所以评论详情页的 URL 包含动态部分，例如：`http://localhost:8080/landing-page/docs/comments/:commentTitle/`
+
+对于像 `:commentTitle` 这样的动态部分，Modern.js 提供了一种特殊的文件命名方式来实现。
+
+执行以下命令，新建以下文件：
+
+<Tabs>
+<TabItem value="macOS" label="macOS" default>
+
+```bash
+mkdir -p src/landing-page/pages/comments/\[commentTitle\]
+touch src/landing-page/pages/comments/\[commentTitle\]/index.tsx
+```
+
+</TabItem>
+<TabItem value="Windows" label="Windows">
+
+```powershell
+mkdir -p src/landing-page/pages/comments/[commentTitle]
+ni src/landing-page/pages/comments/[commentTitle\/index.tsx
+```
+
+</TabItem>
+</Tabs>
+
+`landing-page` 入口中的文件结构变成：
+
+```md
+.
+└── pages/
+    ├── comments/
+    │   └── [commentTitle]/
+    │       └── index.tsx
+    ├── _app.tsx
+    ├── docs.tsx
+    └── index.tsx
+```
+
+`[commentTitle]` 将会被 Modern.js 转换成动态路由。
+
+我们首先安装文件中需要的依赖：
+
+```bash
+pnpm add lodash
+pnpm add -D @types/lodash
+```
+
+`pages/comments/[commentTitle]/index.tsx` 的内容为：
+
+```js
+import { Helmet } from '@modern-js/runtime/head';
+import { Link } from '@modern-js/runtime/router';
+import _ from 'lodash';
+
+const Index = ({ match: { params } }: any) => {
+  const title = _.startCase(params.commentTitle);
+  return (
+    <>
+      <Helmet>
+        <title>Comment: {title}</title>
+      </Helmet>
+      <p>
+        <Link to="/docs/">{'< Back'}</Link>
+      </p>
+      <h1>Subject: {title}</h1>
+      <p>Post: I am a comment</p>
+    </>
+  );
+};
+
+export default Index;
+```
+
+修改 `docs.tsx`，添加跳转到评论页的链接：
+
+```js
+import { Helmet } from '@modern-js/runtime/head';
+import { Link } from '@modern-js/runtime/router';
+
+const Docs = () => (
+  <>
+    <Helmet>
+      <title>Docs</title>
+    </Helmet>
+    <p>I am docs</p>
+    <p>
+      <Link to="/comments/i-am-a-comment-title">[Random comment]</Link>
+    </p>
+  </>
+);
+
+export default Docs;
+```
+
+:::info 注
+`pages/` 和 `App.tsx` 一样，应该专注于路由的组织，具体的 UI 实现和业务逻辑，一旦复杂到要拆分成多个文件的程度，应该放到 `pages/` 外面，在同一个应用入口目录中，用 **feature 目录**、**role 目录**的方式来组织。
+
+例如使用 `src/landing-page/docs/components/Article/index.tsx` 来组织功能特性。
+
+`landing-page/docs/` 和 `landing-page/pages/docs/` 不同，前者是 **feature 目录**，将修改频率不同或由不同人负责开发的业务逻辑，封装在同一个黑盒里，这种目录下的问题与具体路由解耦。
+
+`pages/` 目录里的组件文件，负责把这些 feature 组件组织到一起，通过特定的路由结构提供给用户。
+
+因此 `pages/` 目录里基本上不应该有组件之外的文件，也不应该有过于复杂和具体的实现。
+:::
+
+执行 `pnpm run dev`，访问 `http://localhost:8080/landing-page/docs/`，可以看到效果如下：
+
+![result2](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/result2.png)
+
+点击评论链接，跳转到 `http://localhost:8080/landing-page/comments/i-am-a-comment-title`，效果如下：
+
+![result3](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/result3.png)
+
+URL 中的动态部分，在代码中被转换成了标题内容，修改最后部分 URL 后重新访问，标题内容同样发生改变。
+
+本小节中，我们学习了基本的【 约定式路由 】用法，除了 `_app.tsx` 外，我们还可以使用 [`_layout.tsx`](/docs/apis/app/hooks/src/pages#部分-layout) 实现这个访问路径下的公共 UI，可以用 [`404.tsx`](/docs/apis/app/hooks/src/pages#404-路由) 自定义 404 页面等。
+
+---
+
+> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c08/hello-modern-2)。

package/zh/tutorials/first-app/c08-client-side-routing/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "8: 添加客户端路由"
+}

package/zh/tutorials/first-app/c09-bff/9.1-serverless.md

@@ -0,0 +1,30 @@
+---
+title: Serverless 开发范式
+---
+
+之前的章节中，我们用来渲染联系人列表的数据，都来自代码中的 Mock 数据。
+
+本章节中，我们将介绍如何通过 BFF 获取数据。
+
+在这之前，我们先回顾下上一章节 Demo 中的联系人列表应用，它有多种运行方式，比如：
+
+- `pnpm run dev` - 在本地开发环境中用于调试
+- `pnpm run build && pnpm run start` - 在生产环境中正式运行
+
+无论哪种方式，整个应用在运行时（runtime）都是一个【 Universal App 】，既有客户端部分（在客户端运行的 App 代码和框架代码），也有服务器端部分（框架内置的 Static Web Server 或 SSR Server，在 SSR 环节运行的 App 代码和框架代码）。
+
+但开发者对服务器几乎是无感知的，开发环节并没有专门写 server 代码，运行和部署的时候，也不跟具体 server 打交道，不需要运维 server，开发者可以专注于产品本身。
+
+这种开发范式，我们称作 Serverless Web Development。
+
+其中的 SSR 技术，我们称作 Serverless SSR，实现了 SSR 在开发、运行、部署全流程中的 Serverless。
+
+从本节开始，我们要接触 Serverless Web Development 的另一部分：Serverless BFF，跟 SSR 一样，能实现 [BFF（Backends for Frontends）](https://microservices.io/patterns/apigateway.html)在开发、运行、部署全流程中的 Serverless。
+
+:::info 注
+我们这里说的 BFF，不是指任意的面向客户端程序的服务器端 API，而是是更纯粹、狭义的 BFF，指专门服务特定客户端程序、特定产品 UI 需求的服务器端 API。
+
+这种 API 更适合跟客户端代码在一起实现、调试、运行和部署，由同一个/批开发者负责。
+
+简单情况下这种 API 做的是对更底层 API（比如各种微服务）的聚合、映射、裁剪、代理等，复杂情况下也会访问数据存储（比如应用数据库、缓存等），有服务器端 Model 等业务逻辑分层，但都倾向于只维护很薄的一层服务器端业务逻辑。
+:::

package/zh/tutorials/first-app/c09-bff/9.2-enable-bff.md

@@ -0,0 +1,93 @@
+---
+title: 启用 BFF
+---
+
+和之前章节一样，我们同样使用生成器来启用 BFF。
+
+在项目根目录下执行 `pnpm run new` 命令：
+
+```bash
+# 启用可选功能
+❯ 启用「BFF」功能
+  ...
+
+# 请选择 BFF 类型
+❯ 函数写法
+  框架写法
+
+# 请选择运行时框
+❯ Express
+  Koa
+  Egg
+  Nest
+```
+
+:::info 注
+函数模式与框架模式都是基于 Modern.js 的 BFF 函数的，两种模式的主体都是函数，也都需要运行时框架的支持，这里的提问是为了提供不同的样板文件。更多相关内容可以查看[一体化 BFF 专题](/docs/guides/advanced-features/bff/function)。
+:::
+
+我们先选择【 函数写法 】，并选择运行时框架为 Express，项目结构将变成：
+
+```md
+.
+├── .vscode/
+├── api/
+│   ├── info/
+│   │   └── [type].ts
+│   ├── .eslintrc.json
+│   ├── _app.ts
+│   └── index.ts
+├── src/
+│   ├── contacts/
+│   │   ├── components/
+│   │   │   ├── Avatar/
+│   │   │   │   ├── index.stories.tsx
+│   │   │   │   └── index.tsx
+│   │   │   └── Item/
+│   │   │       ├── index.test.tsx
+│   │   │       └── index.tsx
+│   │   ├── styles/
+│   │   │   └── utils.css
+│   │   ├── App.css
+│   │   └── App.tsx
+│   ├── landing-page/
+│   │   └── pages/
+│   │       ├── comments/
+│   │       │   └── [commentTitle]/
+│   │       │       └── index.tsx
+│   │       ├── _app.tsx
+│   │       ├── docs.tsx
+│   │       └── index.tsx
+│   ├── .eslintrc.json
+│   └── modern-app-env.d.ts
+├── .editorconfig
+├── .gitignore
+├── .npmrc
+├── .nvmrc
+├── README.md
+├── package.json
+├── pnpm-lock.yaml
+└── tsconfig.json
+```
+
+新增的 `api/` 目录，跟 `src/` 目录一样是源代码目录，目录中有几个示范用法的样板文件
+
+`package.json` 中则会增加 BFF 插件：
+
+```json
++ "@modern-js/plugin-bff"
++ "@modern-js/plugin-express"
++ "express"
+```
+
+在函数写法中，BFF 的 API 路由也遵循类似【 约定式路由 】的生成逻辑。
+
+Modern.js Serverless BFF 的默认前缀为 `/api`，例如上述目录结构可以得到两个 API 路由：
+
+`http://localhost:8080/api`
+
+`http://localhost:8080/api/info/:type`
+
+---
+
+> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c09/hello-modern-2)。