---
sidebar_position: 2
title: development
---

# Experience Micro Frontend

Through this chapter you can learn:

- How to create the main application and sub-application of the micro frontend project.
- Basic process of micro frontend project development.

## Create an app

Currently supports two routing modes
- Self-controlled routing
- Conventional routing

First, clarify the routing mode of the main application [create a conventional routing main application](#创建约定式路由主应用) or [create a self-controlled routing main application](#创建自控式路由主应用)

In this experience we will create two sub-applications Table and Dashboard for the main application (Table is reduced routing, Dashboard is self-controlled routing)


### File-based Routing Main App

Initialize the project with a command line:

```bash
mkdir masterApp && cd masterApp
npx @modern-js/create@latest
```

After the project is created, we can enable the `micro frontend` through `pnpm run new`:

```bash
? Please select the operation you want: Enable features
? Please select the feature name: Enable Micro Front-end Feature
```

Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:

import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";

<EnableMicroFrontend />

Then we create two new directories in the routes folder
- table (for loading conventional routing sub-applications)
- dashboard (for loading self-controlled routing sub-applications)

In these two directories, we need to create a `$.tsx` file as the entry of the main application convention route ($represents fuzzy match, that is, `/table` and `/table/test` will match this `$.tsx` as the entry file of the route, which will ensure that the sub-application route is loaded correctly in the micro frontend scenario)

#### Load file-base routing sub-app

```js title="src/routes/table/$.tsx"
import { useModuleApps } from '@modern-js/plugin-garfish/runtime';

const Index = () => {
  const { Table } = useModuleApps();

  return (
    <div>
      <Table />
    </div>
  )
}

export default Index;
```

#### Load self-controlled routing sub-app

```js title="src/routes/dashboard/$.tsx"
import { useModuleApps } from '@modern-js/plugin-garfish/runtime';

const Index = () => {
  const { Dashboard } = useModuleApps();

  return (
    <div>
      <Dashboard />
    </div>
  )
}

export default Index;
```
#### route link

At this time, the main application configuration has been completed, and the sub-application can be loaded through the route, and the `layout.tsx` of the main application can be modified to jump to the route:

```js title="src/route/layout.tsx"
import { Outlet, Link } from '@modern-js/runtime/router';

const Layout = () => (
  <div>
    <div><Link to={'/table'}>Load file-base routing sub-app</Link></div>
    <div><Link to={'/dashboard'}>Load self-controlled routing sub-app</Link></div>
    <div><Link to={'/'}>unmount sub-app</Link></div>
    <Outlet />
  </div>
);

export default Layout;
```

### Self-Controlled Main App

Initialize the project with a command line:

```bash
mkdir masterApp && cd masterApp
npx @modern-js/create@latest
```

After the project is created, we can enable the `micro frontend` function through `pnpm run new`:

```bash
? Please select the operation you want: Enable features
? Please select the feature name: Enable Micro Front-end Feature
```

Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:

<EnableMicroFrontend />

Since it is a self-controlled route, we delete the `routes/` folder and add the `App.tsx` file in the `src/` directory. If you use a `non-MApp` component here, you need to use the `createBrowserRouter` API of '=React Router v6 to create routes.

#### Load sub-app

import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro-frontend";

<CustomRouterMicroFrontend />

### File-based sub-app

Initialize the project with a command line:

```bash
mkdir table && cd table
npx @modern-js/create@latest
```

After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:

```bash
? Please select the operation you want: Enable features
? Please select the feature name: Enable Micro Front-end Feature
```

Next, let's register the micro frontend plugin and modify `modern.config.ts` to add the configuration of the micro frontend sub-app `deploy.microFrontend`:

```js title="modern.config.ts"
import appTools, { defineConfig } from '@modern-js/app-tools';
import garfishPlugin from '@modern-js/plugin-garfish';

export default defineConfig({
  dev: {
    port: 8081
  },
  runtime: {
    router: true,
    state: true,
  },
  deploy: {
    microFrontend: true,
  },
  plugins: [appTools(), garfishPlugin()],
});
```

add `src/routes/page.tsx`:

```js title="src/routes/page.tsx"
const Index = () => {
  return (
    <div className="container-box">subApp</div>
  )
}

export default Index;
```

### Self-controlled sub-app

Initialize the project with a command line:

```bash
mkdir table && cd table
npx @modern-js/create@latest
```

After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:

```bash
? Please select the operation you want: Enable features
? Please select the feature name: Enable Micro Front-end Feature
```

Next, let's register the micro frontend plugin and modify `modern.config.ts` to add the configuration of the micro frontend sub-app `deploy.microFrontend`:

```js title="modern.config.ts"
import appTools, { defineConfig } from '@modern-js/app-tools';
import garfishPlugin from '@modern-js/plugin-garfish';

export default defineConfig({
  dev: {
    port: 8082
  },
  runtime: {
    router: true,
    state: true,
  },
  deploy: {
    microFrontend: true,
  },
  plugins: [appTools(), garfishPlugin()],
});
```

Self-controlled routing needs to delete the `routes/` folder and create a new `App.tsx` in the `src/` directory.

And add code in `src/App.tsx`, note that you need to parse from `props` and pass `basename` to `BrowserRouter`.

```js title="src/App.tsx"
import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';

export default (props: {basename: string}) => {
  const { basename } = props;

  return (
    <BrowserRouter basename={basename}>
      <Routes>
        <Route index element={<div>Self-controlled route root</div>} />
        <Route path={'path'} element={<div>Self-controlled sub route</div>} />
      </Routes>
    </BrowserRouter>
  );
};
```

## Debug

Start the application by executing the `pnpm run dev` command in the directory in sequence:
- masterApp `http://localhost:8080`
- table subapplication (conventional routing) `http://localhost:8081`
- dashboard subapplication (self-controlled routing) `http://localhost:8082`

Access the main application address `http://localhost:8080`

After completing the experience of the overall development process of micro frontend, you can learn more about how to [develop the main application](/guides/topic-detail/micro-frontend/c03-main-app).

## FAQ

Garfish issue: https://www.garfishjs.org/issues/
