---
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

The routing modes of the current project are divided into the following three types:

- File-based routing (`router: true` and file-based)
- Self-Controlled routing (`router: true` and create `BrowserRouter`)
- Other (`router: false` and independent installation of `react-router-dom` in the project)

First, clarify the routing mode of the main application [create a file-based routing main App](#file-based-routing-main-app) or [create a self-controlled main App](#self-controlled-main-app)

In this tutorial 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-en/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-en/components/custom-router-micro-frontend';

<CustomRouterMicroFrontend />

### Other Main App

Install and use `react-router-dom` independently in the project. The only difference from self-controlled routing is that after setting `router: false`, plugin-garfish cannot obtain `useLocation`, `useHref` and other hooks to assist in calculating basename and main and child applications. Route synchronization

import { Tab, Tabs } from 'rspress/theme';

<Tabs>
<Tab label="react-router-dom@6">
```tsx
import { useLocation, useHref } from 'react-router-dom';
const App = () => {
  const basename = useHref('/table');
  const { Table } = useModuleApps();
  return <Table useLocation={useLocation} basename={basename} />;
};
```
</Tab>
<Tab label="react-router-dom@5">
```tsx
import { useLocation, useHistory } from 'react-router-dom';
const App = () => {
  const history = useHistory();
  const basename = history.createHref({ pathname: '/table' });
  const { Table } = useModuleApps();
  return <Table useLocation={useLocation} basename={basename} />;
};
```
</Tab>
</Tabs>

### 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/
