import { PackageManagerTabs } from '@theme';

1. Execute the `new` command:

<PackageManagerTabs command="run new" />

2. Follow the prompts to **enable BFF functionality**:

```bash
? Please select the operation you want to perform Enable optional features
? Please select the feature to enable Enable "BFF"
? Please select BFF type Framework mode
```

:::note
Currently, it is recommended to create BFF in framework mode. We will remove the BFF type concept in the future.
:::

3. Depending on the chosen runtime framework, add the following code to `modern.config.[tj]s`:

import { Tabs, Tab as TabItem } from "@theme";

<Tabs>
  <TabItem value="express" label="Express.js" default>

```ts title="modern.config.ts"
import { expressPlugin } from '@modern-js/plugin-express';
import { bffPlugin } from '@modern-js/plugin-bff';

export default defineConfig({
  plugins: [expressPlugin(), bffPlugin()],
});
```

  </TabItem>
  <TabItem value="koa" label="Koa.js">

```ts title="modern.config.ts"
import { koaPlugin } from '@modern-js/plugin-koa';
import { bffPlugin } from '@modern-js/plugin-bff';

export default defineConfig({
  plugins: [koaPlugin(), bffPlugin()],
});
```

  </TabItem>
</Tabs>
