Umi

https://github.com/yeepchen/umi2
Admin
Umi is a pluggable enterprise-level React application framework with built-in support for routing,...
Tokens:54,444
Snippets:622
Trust Score:4.9
License:MIT
Update:9 months ago
Show doc for...
Tokens:
Raw
### Run umi dev in Example

Source: https://github.com/yeepchen/umi2/blob/master/CONTRIBUTING.md

Starts the umi development server in the 'func-test' example directory. After starting, the application can be accessed at http://localhost:8000/.

```bash
$ cd examples/func-test
$ umi dev
```

--------------------------------

### Deploy UmiJS Application with Now

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Demonstrates deploying the built UmiJS application to the Now platform. This involves installing the 'now' CLI globally and then running the deployment command on the build output directory.

```bash
$ yarn global add now
$ now ./dist
```

--------------------------------

### Plugin Demo Example

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Provides a practical example of a Umi plugin, demonstrating how to listen for option changes, add renderer wrappers, and set up file watchers.

```APIDOC
## Plugin Demo Example

### Description
A sample Umi plugin demonstrating common functionalities like reacting to option changes, adding custom render wrappers, and watching for file modifications.

### Method
Default export function

### Endpoint
N/A

### Parameters
- **api** (object) - Umi's plugin interface.
- **opts** (object) - Plugin options, defaults to an empty object.

### Request Example
```js
import { join } from 'path';

export default (api, opts = {}) => {
  const { paths } = api;
  // Linstening plugin options changes
  api.onOptionChange((newOpts) => {
    opts = newOpts;
    api.rebuildTmpFiles();
  });
  // add Provider wrapper
  api.addRendererWrapperWithComponent(join(__dirname, './locale.js'));
  api.addRendererWrapperWithComponent(() => {
    if (opts.antd) {
      return join(__dirname, './locale-antd.js'));
    }
  });
  // add watcher on locale files
  api.addPageWatcher(
    join(paths.absSrcPath, config.singular ? 'locale' : 'locales'),
  );
};
```

### Response
N/A
```

--------------------------------

### Start Local Development Server

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Starts the local development server for an UmiJS application, enabling live reloading and development-time optimizations. Changes to files in the 'pages' directory are automatically reflected.

```bash
$ umi dev
```

--------------------------------

### Install and Verify Umi CLI

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Installs the Umi command-line interface globally and verifies the installation by checking its version. Requires Node.js (v8.10+) and recommends Yarn for dependency management.

```bash
$ yarn global add umi
$ umi -v
2.0.0
```

--------------------------------

### Install and Run UmiJS Project

Source: https://github.com/yeepchen/umi2/blob/master/docs/README.md

This snippet outlines the basic commands to install UmiJS globally, create a new project, generate a page, start the development server, and build the project for deployment.

```bash
# Install deps
$ yarn global add umi # or npm install -g umi

# Create application
$ mkdir myapp && cd myapp

# Create page
$ umi generate page index

# Start dev server
$ umi dev

# Build and deploy
$ umi build
```

--------------------------------

### Umi Plugin Example: Localization and Components

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

A comprehensive Umi plugin example demonstrating how to listen for option changes, add renderer wrappers with components (conditional for antd), and watch locale files. It uses `onOptionChange`, `addRendererWrapperWithComponent`, `addPageWatcher`, and path manipulation.

```javascript
import { join } from 'path';

export default (api, opts = {}) => {
  const { paths } = api;
  // Linstening plugin options changes
  api.onOptionChange((newOpts) => {
    opts = newOpts;
    api.rebuildTmpFiles();
  });
  // add Provider wrapper
  api.addRendererWrapperWithComponent(join(__dirname, './locale.js'));
  api.addRendererWrapperWithComponent(() => {
    if (opts.antd) {
      return join(__dirname, './locale-antd.js'));
    }
  });
  // add watcher on locale files
  api.addPageWatcher(
    join(paths.absSrcPath, config.singular ? 'locale' : 'locales'),
  );
};
```

--------------------------------

### Serve Production Build Locally

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Uses the 'serve' package to host the production build locally for verification before deployment. This ensures the application functions as expected in a production-like environment.

```bash
$ yarn global add serve
$ serve ./dist
```

--------------------------------

### Build UmiJS Application for Production

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Compiles the UmiJS application into optimized static assets for deployment. The output is typically placed in the './dist' directory, including an 'index.html', 'umi.css', and 'umi.js'.

```bash
$ umi build
```

--------------------------------

### Build Example with umi

Source: https://github.com/yeepchen/umi2/blob/master/CONTRIBUTING.md

Builds the 'func-test' example using the umi build command. The COMPRESS environment variable can be used to control compression.

```bash
$ cd examples/func-test
$ umi build

# Build without compress
$ COMPRESS=none umi build
```

--------------------------------

### Create and Scaffold a New Umi App

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Demonstrates creating a new project directory, navigating into it, and generating initial pages (index and users) using the Umi CLI's generate command. 'umi g' is an alias for 'umi generate'.

```bash
$ mkdir myapp && cd myapp
$ umi g page index
$ umi g page users
```

--------------------------------

### Install Dependencies

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/create-umi-app.md

Installs all the necessary project dependencies after the `create-umi` command has generated the project files.

```bash
yarn
```

--------------------------------

### Install umi-serve using Yarn

Source: https://github.com/yeepchen/umi2/blob/master/packages/umi-serve/README.md

This snippet shows how to install the umi-serve package using the Yarn package manager. Ensure you have Yarn installed and configured in your project.

```bash
$ yarn add umi-serve
```

--------------------------------

### Handle Post-Dev Server Start Event

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Executes a callback function after the development server has started. It provides access to server-related information, such as the actual `devServerPort` in use.

```javascript
api.afterDevServer(({ serve, devServerPort }) => {
  // You can get the actual port number of the service monitor here.
  console.log(devServerPort);
});
```

--------------------------------

### Inspect UmiJS Project Configuration

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Allows inspection of the UmiJS project's configuration, including module rules and plugins. Useful for understanding how the build process is configured and for debugging.

```bash
$ umi inspect

Options:

    --mode                specify env mode (development or production, default is development)
    --rule <ruleName>     inspect a specific module rule
    --plugin <pluginName> inspect a specific plugin
    --rules               list all module rule names
    --plugins             list all plugin names
    --verbose             show full function definitions in output
```

--------------------------------

### Inspect Production Build Directory

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Shows the directory structure of the production build output. This helps verify that the necessary static files for deployment have been generated correctly.

```bash
$ tree ./dist
./dist
├── index.html
├── umi.css
└── umi.js
```

--------------------------------

### Create Umi Plugin Scaffold

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Use the create-umi tool with the --plugin flag to generate a basic Umi plugin scaffold. This command initiates the project setup for a new plugin.

```shell
yarn create umi --plugin
```

--------------------------------

### View Project Directory Structure

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Displays the directory structure of the created UmiJS project, showing the generated pages and their associated CSS files. This command is commonly available on Linux/macOS systems.

```bash
$ tree
.
└── pages
    ├── index.css
    ├── index.js
    ├── users.css
    └── users.js
```

--------------------------------

### Install umi-plugin-routes using Yarn

Source: https://github.com/yeepchen/umi2/blob/master/packages/umi-plugin-routes/README.md

This snippet shows how to install the umi-plugin-routes package using the Yarn package manager. No specific inputs or outputs are involved beyond the package installation itself.

```bash
yarn add umi-plugin-routes
```

--------------------------------

### Plugin Initialization

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Demonstrates how to initialize a Umi plugin, including the basic structure of the initialization function and considerations for publishing as an npm package.

```APIDOC
## Plugin Initialization

### Description
Initialize a Umi plugin using a default exported function that accepts `api` and `opts` as arguments. For npm packages, ensure code is transpiled to ES5.

### Method
Default export function

### Parameters
- **api** (object) - Interface provided by Umi to the plugin.
- **opts** (object) - User-defined options for the plugin.

### Request Example
```js
export default (api, opts) => {
  // your plugin code here
};
```

### Response
N/A
```

--------------------------------

### Debug Documentation Locally

Source: https://github.com/yeepchen/umi2/blob/master/CONTRIBUTING.md

Starts a local development server for debugging documentation. This allows for live previewing of documentation changes.

```bash
$ y doc:dev
```

--------------------------------

### Start Local Development Server

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/create-umi-app.md

Starts the local development server for the UmiJS project, allowing you to see your application in the browser at http://localhost:8000.

```bash
yarn start
```

--------------------------------

### UmiJS Command Line Interface Operations

Source: https://github.com/yeepchen/umi2/blob/master/README_zh-CN.md

This snippet demonstrates common command-line operations for the UmiJS framework, including global installation, creating a new application, generating pages, starting the development server, and building the application for production. These commands are essential for managing UmiJS projects.

```bash
# Install UmiJS globally
$ yarn global add umi # or npm install -g umi

# Create a new application
$ mkdir myapp && cd myapp

# Generate a new page
$ umi generate page index

# Start the local development server
$ umi dev

# Build the application for production
$ umi build
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/yeepchen/umi2/blob/master/CONTRIBUTING.md

Installs development dependencies for the project using yarn. This is typically the first step after cloning the repository.

```bash
$ y
```

--------------------------------

### Install @umijs/plugin-prerender

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/umi-plugin-prerender.md

Install the @umijs/plugin-prerender plugin as a development dependency using Yarn.

```bash
yarn add @umijs/plugin-prerender --dev
```

--------------------------------

### Enable Runtime Public Path Configuration

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/deploy.md

Allow the 'publicPath' to be determined at runtime by setting 'runtimePublicPath' to true. This enables dynamic configuration of asset paths, for example, based on environment variables within the HTML.

```javascript
export default {
  runtimePublicPath: true,
};
```

--------------------------------

### Runtime and Versioning API

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Methods for managing version information and adding runtime plugins.

```APIDOC
## addVersionInfo

### Description
Added version information, displayed in `umi -v` or `umi version`.

### Method
POST

### Endpoint
/api/version-info

### Parameters
#### Request Body
- **versionInfo** (object) - Required - An object containing version information.
  - **name** (string) - Required - The name of the project.
  - **version** (string) - Required - The version string.

### Request Example
```json
{
  "versionInfo": {
    "name": "my-umi-app",
    "version": "1.0.0"
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Version information added successfully."
}
```

## addRuntimePlugin

### Description
Add a runtime plugin with parameters as the absolute path to the file.

### Method
POST

### Endpoint
/api/runtime-plugin

### Parameters
#### Request Body
- **filePath** (string) - Required - The absolute path to the runtime plugin file.

### Request Example
```json
{
  "filePath": "/path/to/your/plugin.js"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Runtime plugin added successfully."
}
```

## addRuntimePluginKey

### Description
Add a runtime configurable item.

### Method
POST

### Endpoint
/api/runtime-plugin-key

### Parameters
#### Request Body
- **key** (string) - Required - The key for the runtime configurable item.
- **value** (any) - Required - The value for the runtime configurable item.

### Request Example
```json
{
  "key": "myConfigurable",
  "value": {
    "setting": true
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Runtime configurable item added successfully."
}
```
```

--------------------------------

### Install umi-plugin-react

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/umi-plugin-react.md

Installs the umi-plugin-react package as a development dependency using Yarn.

```bash
$ yarn add umi-plugin-react --dev
```

--------------------------------

### Environment-Specific Umi Configuration

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/config.md

Demonstrates how to use environment variables (UMI_ENV) to load different configuration files. `.umirc.local.js` is always merged last for local overrides. The example shows merging logic for different UMI_ENV values.

```javascript
// .umirc.js
export default { a: 1, b: 2 };

// .umirc.cloud.js
export default { b: 'cloud', c: 'cloud' };

// .umirc.local.js
export default { c: 'local' };
```

--------------------------------

### Umi Plugin API: Rebuild and Option Change

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Example of a Umi plugin that listens for option changes and triggers a rebuild of temporary files. It utilizes the `onOptionChange` and `rebuildTmpFiles` API methods.

```javascript
export default (api, opts) => {
  api.onOptionChange(() => {
    api.rebuildTmpFiles();
  });
};
```

--------------------------------

### Basic Conventional Routing Example (JavaScript)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/router.md

Demonstrates how Umi generates basic routing configuration from a `pages` directory structure. This is useful for straightforward page organization.

```javascript
[
  { path: '/', component: './pages/index.js' },
  { path: '/users/', component: './pages/users/index.js' },
  { path: '/users/list', component: './pages/users/list.js' },
]
```

--------------------------------

### Download Demo Block from Official Repo

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/block.md

Example of downloading a demo block from the official Umi blocks repository. For blocks in the official repository, a shorthand command can be used.

```bash
umi block add https://github.com/umijs/umi-blocks/tree/master/demo
```

```bash
umi block add demo
```

--------------------------------

### Implement Client-Side Navigation with Umi Router

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Modifies the users page to include a button that uses Umi's `router` utility to navigate back. This provides programmatic navigation capabilities within the application.

```javascript
import router from 'umi/router';
import styles from './users.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page users</h1>
      <button onClick={() => { router.goBack(); }}>go back</button>
    </div>
  );
}
```

--------------------------------

### Run Project Tests with Umi Test

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Executes tests for the UmiJS project using the 'umi test' command, which is based on Jest. It provides options for coverage reporting and debugging memory leaks.

```bash
$ umi test

Options:

    --coverage                    indicates that test coverage information should be collected and reported in the output
    --collectCoverageFrom=<glob>  a glob pattern relative to matching the files that coverage info needs to be collected from, e.g, --collectCoverageFrom=src/**/*.js
    --detectLeaks                 debug memory leaks
```

--------------------------------

### Use Custom Registry for Block Installation

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/block.md

Enables the use of a custom registry URL for installing block dependencies using the `--registry` parameter. This is useful when the default npm registry is slow.

```bash
npx umi block add DashboardAnalysis  --registry myregistryUrl
```

--------------------------------

### Configuration-Based Routing Example (JavaScript)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/router.md

Demonstrates how to define routes directly in the Umi configuration file (`.umirc.js` or `config/config.js`) instead of relying on the `pages` directory convention. This offers more explicit control over routing.

```javascript
export default {
  routes: [
    { path: '/', component: './a' },
    { path: '/list', component: './b', Routes: ['./routes/PrivateRoute.js'] },
    {
      path: '/users',
      component: './users/_layout',
      routes: [
        { path: '/users/detail', component: './users/detail' },
        { path: '/users/:id', component: './users/id' },
      ],
    },
  ],
};
```

--------------------------------

### Install umi-plugin-react with Yarn

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/with-dva.md

Install the umi-plugin-react package using Yarn. This is a common first step for integrating Dva with Umi.

```bash
yarn add umi-plugin-react
```

--------------------------------

### Enable Dynamic Root for Static Output

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/deploy.md

Combine 'htmlSuffix' with 'dynamicRoot' within 'exportStatic' to allow static generation to any path. This provides flexibility for organizing statically generated files.

```javascript
export default {
  exportStatic: {
    htmlSuffix: true,
    dynamicRoot: true,
  },
}
```

--------------------------------

### Start Development Server with Umi CLI

Source: https://context7.com/yeepchen/umi2/llms.txt

Starts the Umi development server with hot module replacement enabled. The default port is 8000. This command is used during the development phase to see changes in real-time.

```bash
# Start development server
umi dev

# Development server will start with hot module replacement
# Default port: 8000
# Access your app at http://localhost:8000
```

--------------------------------

### System Level Variables

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Details the system-level variables available to Umi plugins, including `config`, `paths`, and `routes`, with explanations of their properties.

```APIDOC
## System Level Variables

### Description
Umi provides several system-level variables through the `api` object that offer insights into the project's configuration and structure.

### Variables
- **`config`**: The configuration object from `.umirc.js` or `config/config.js`.
- **`paths`**: An object containing various path configurations:
    - `outputPath`: Output directory path.
    - `absOutputPath`: Absolute output directory path.
    - `pagesPath`: Pages directory path.
    - `absPagesPath`: Absolute pages directory path.
    - `tmpDirPath`: Temporary directory path.
    - `absTmpDirPath`: Absolute temporary directory path.
    - `absSrcPath`: Absolute source directory path.
    - `cwd`: Project root directory path.
    - `absNodeModulesPath`: Absolute node_modules directory path.
- **`routes`**: Processed routing information in the following format:
  ```js
  const routes = [
    {
      path: '/xxx/xxx',
      component: '',
    },
  ];
  ```

### Response
N/A
```

--------------------------------

### Dynamic Conventional Routing Example (JavaScript)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/router.md

Illustrates Umi's dynamic routing convention where directories or files prefixed with `$` are treated as dynamic routes. This allows for URL parameters.

```javascript
[
  { path: '/', component: './pages/index.js' },
  { path: '/users/:id', component: './pages/users/$id.js' },
  { path: '/:post/', component: './pages/$post/index.js' },
  { path: '/:post/comments', component: './pages/$post/comments.js' },
]
```

--------------------------------

### UmiJS Dependency Installation for react-transition-group

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/router.md

Installs the 'react-transition-group' package as a dependency for implementing route transition effects in UmiJS. This command is executed using Yarn, a popular JavaScript package manager. Ensure Yarn is installed and available in your environment before running this command.

```bash
$ yarn add react-transition-group
```

--------------------------------

### Install Babel Polyfill (Bash)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/faq.md

This command installs the necessary @babel/polyfill package as a project dependency using Yarn. This polyfill ensures that older JavaScript environments can run modern JavaScript features.

```bash
$ yarn add @babel/polyfill
```

--------------------------------

### Basic Umi Configuration (.umirc.js)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/config.md

Defines the basic structure and plugins for a Umi project. Supports ES6 syntax. Key options include `base`, `publicPath`, and `plugins`.

```javascript
export default {
  base: '/admin/',
  publicPath: 'http://cdn.com/foo',
  plugins: [
    ['umi-plugin-react', {
      dva: true,
    }],
  ],
};
```

--------------------------------

### Optional Dynamic Routing Example (JavaScript)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/router.md

Shows how to define optional dynamic routes in Umi by appending a `$` suffix to the dynamic segment. This makes a URL parameter optional.

```javascript
[
  { path: '/': component: './pages/index.js' },
  { path: '/users/:id?', component: './pages/users/$id$.js' },
]
```

--------------------------------

### Nested Routing Example (JavaScript)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/router.md

Explains how Umi generates nested routes when a `_layout.js` file is present in a directory. This `_layout.js` acts as the layout for all routes within that directory.

```javascript
[
  {
    path: '/users',
    component: './pages/users/_layout.js',
    routes: [
      { path: '/users/', component: './pages/users/index.js' },
      { path: '/users/:id', component: './pages/users/$id.js' },
    ],
  },
]
```

--------------------------------

### Enable Static Site Generation

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/deploy.md

Configure Umi to generate a static HTML file for each route by setting 'exportStatic' to an empty object. This is useful when server-side HTML fallback is not feasible.

```javascript
export default {
  exportStatic: {},
}
```

--------------------------------

### Plugins Order

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Explains how the execution order of Umi plugins is determined by the `plugins` configuration in `.umirc.js` or `config.js`, and how dependent plugins are handled.

```APIDOC
## Plugins Order

### Description
The execution order of Umi plugins is dictated by the `plugins` array in the user's configuration file (`.umirc.js` or `config.js`). Umi checks plugin dependencies but does not automatically reorder them. Hook execution order within plugins also follows the `plugins` array order unless specified otherwise by the hook.

### Configuration
Defined in `.umirc.js` or `config/config.js` under the `plugins` key.

### Execution Flow
- Plugins are executed in the order they appear in the `plugins` configuration.
- Plugin dependencies are checked, and warnings are issued if order is suboptimal, but the user's order is maintained.
- When `api.applyPlugins` is used, hook execution order corresponds to the plugin order.

### Response
N/A
```

--------------------------------

### Configure umi-plugin-react in .umirc.js

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/umi-plugin-react.md

Example configuration of umi-plugin-react in the .umirc.js file, enabling various features like dva, antd, locale, dynamicImport, and more.

```javascript
export default {
  plugins: [
    [
      'umi-plugin-react',
      {
        dva: {
          immer: true,
        },
        antd: true,
        routes: {
          exclude: [/models\//],
        },
        polyfills: ['ie9'],
        locale: {},
        library: 'react',
        dynamicImport: {
          webpackChunkName: true,
          loadingComponent: './components/Loading.js',
        },
        dll: {
          exclude: [],
        },
        pwa: true,
        hd: true,
        fastClick: true,
        title: 'default title',
      },
    ],
  ],
};
```

--------------------------------

### Configure UmiJS Routes

Source: https://github.com/yeepchen/umi2/blob/master/docs/config/README.md

This example shows how to configure routing in UmiJS using a structure similar to react-router. It defines paths, components, and nested routes, including redirects.

```javascript
export default {
  routes: [
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        { path: '/user', redirect: '/user/login' },
        { path: '/user/login', redirect: './user/login' },
      ],
    },
  ],
};
```

--------------------------------

### SSR Client Manifest JSON Structure

Source: https://github.com/yeepchen/umi2/blob/master/docs/config/README.md

An example of the `ssr-client-mainifest.json` file, which maps resources by routing level. It lists the JavaScript and CSS files required for each route, aiding in client-side rendering.

```json
{
  "/": {
    "js": [
      "umi.6791e2ab.js",
      "vendors.aed9ac63.async.js",
      "layouts__index.12df59f1.async.js",
      "p__index.c2bcd95d.async.js"
    ],
    "css": [
      "umi.baa67d11.css",
      "vendors.431f0bf4.chunk.css",
      "layouts__index.0ab34177.chunk.css",
      "p__index.1353f910.chunk.css"
    ]
  },
  "/news/:id": {
    "js": [
      "umi.6791e2ab.js",
      "vendors.aed9ac63.async.js",
      "layouts__index.12df59f1.async.js",
      "p__news__$id.204a3fac.async.js"
    ],
    "css": ["umi.baa67d11.css", "vendors.431f0bf4.chunk.css", "layouts__index.0ab34177.chunk.css"]
  }
}
```

--------------------------------

### Usage of umi-serve

Source: https://github.com/yeepchen/umi2/blob/master/packages/umi-serve/README.md

Demonstrates the basic usage of the umi-serve command-line tool. It also shows how to specify a custom port for the server by setting the PORT environment variable.

```bash
$ umi-serve

# Specify the port
$ PORT=8888 umi-serve
```

--------------------------------

### Use Hash History for Routing

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/deploy.md

Switch to hash-based routing by setting the 'history' configuration option to 'hash'. This is often useful for simplifying deployment, especially when dealing with server-side routing configurations.

```javascript
export default {
  history: 'hash',
};
```

--------------------------------

### Add Runtime Plugin (JavaScript)

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Adds a runtime plugin to UmiJS applications. The plugin is specified by its absolute file path. This allows for runtime modifications, such as delaying rendering as shown in the example.

```javascript
api.addRuntimePlugin(require.resolve('./app.js'));
```

```javascript
export function render(oldRender) {
  setTimeout(oldRender, 1000);
}
```

--------------------------------

### Change Plugin Options with Umi API

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Dynamically sets or updates the options for a specific plugin. This is useful for configuring plugins at runtime, for example, passing specific configurations to the `dva` plugin.

```javascript
api.changePluginOption('dva-plugin-id', {
  immer: true,
});
```

--------------------------------

### Initialize a Umi Block Template

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/block.md

This command uses `create-umi` to quickly set up a new block template. The template includes a standard directory structure for block development.

```bash
yarn create umi --block
```

--------------------------------

### Check UmiJS and Dependency Versions (Bash)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/faq.md

This command displays the installed UmiJS version and detailed information about its dependencies like React, React-DOM, and React-Router. It's useful for debugging and verifying your project's setup.

```bash
$ umi -v --verbose
```

--------------------------------

### Implement Client-Side Routing with Umi Link

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/getting-started.md

Modifies the index page to include a navigation link to the users page using Umi's built-in `Link` component for client-side routing. This avoids full page reloads when navigating.

```javascript
import Link from 'umi/link';
import styles from './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page index</h1>
      <Link to="/users">go to /users</Link>
    </div>
  );
}
```

--------------------------------

### Build Production Application with Umi CLI

Source: https://context7.com/yeepchen/umi2/llms.txt

Builds a production-ready application. The output is typically placed in the './dist' directory and includes minified JavaScript, optimized CSS, and hashed static assets. This command is used before deployment.

```bash
# Build production-ready application
umi build

# Output directory: ./dist (default)
# Generated files include:
# - Minified JavaScript bundles
# - Optimized CSS files
# - Static assets with hash suffixes (if enabled)
```

--------------------------------

### Configure Webpack Dev Server Proxy

Source: https://github.com/yeepchen/umi2/blob/master/docs/config/README.md

Sets up proxy rules for the webpack development server to forward API requests to a different server. This allows for seamless API integration during development without CORS issues. The example shows proxying requests starting with '/api' to a JSONPlaceholder API.

```json
{
  "proxy": {
    "/api": {
      "target": "http://jsonplaceholder.typicode.com/",
      "changeOrigin": true,
      "pathRewrite": { "^/api" : "" }
    }
  }
}
```

--------------------------------

### Add Code Before Entry Render

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Allows insertion of custom code directly before the Umi application is rendered. This hook is executed within the entry file context. Use this for setup logic or side effects that need to occur prior to mounting the root component. Accepts a string of code.

```javascript
api.addEntryCodeAhead(`
  console.log('addEntryCodeAhead');
`);
```

--------------------------------

### Plugin Interface Introduction

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Explains the various categories of API interfaces provided by Umi to plugins, including environment variables, system variables, tools, system-level APIs, event APIs, and application APIs.

```APIDOC
## Plugin Interface Introduction

### Description
Umi exposes plugin interfaces through the `api` object during plugin initialization. These interfaces cover environment, system, tools, events, and application-level functionalities.

### API Categories
- **Environment variables**: e.g., `process.env.NODE_ENV`.
- **System-level variables**: `config`, `paths`, `routes`.
- **Tools API**: Commonly used utility methods.
- **System level API**: Core methods of the plugin system, e.g., `registerPlugin`.
- **Event class API**: Key event points provided by the plugin system, e.g., `onOptionChange`.
- **Application class API**: Methods for implementing plugin functions, callable directly or via callbacks.

### Usage
APIs are accessed via `api.[theApiName]`.

### Request Example
```js
export default (api, opts) => {
  api.onOptionChange(() => {
    api.rebuildTmpFiles();
  });
};
```

### Response
N/A
```

--------------------------------

### Adjust Environment Variables for Umi 2.x

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/migration.md

This example demonstrates how to adapt `package.json` scripts and `.env` files for Umi 2.x. It removes environment variables like `COMPILE_ON_DEMAND` which are no longer supported in Umi 2.x, and shows the correct format for `.env` configuration.

```diff
- "start": "cross-env COMPILE_ON_DEMAND=none BROWSER=none HOST=0.0.0.0 umi dev",
+ "start": "cross-env BROWSER=none HOST=0.0.0.0 umi dev"
```

```env
BROWSER=none
HOST=0.0.0.0
```

--------------------------------

### Using a Umi Plugin in Project Configuration

Source: https://context7.com/yeepchen/umi2/llms.txt

Shows how to integrate a custom Umi plugin into a project's configuration file (.umirc.js). This example demonstrates how to specify the plugin path and pass options to it, enabling features like wrapper components and custom route modifications.

```javascript
// .umirc.js
export default {
  plugins: [
    ['./my-umi-plugin.js', {
      enableWrapper: true,
      customValue: 'example',
      description: 'My awesome app',
      keywords: 'react, umi, plugin'
    }]
  ]
};
```

--------------------------------

### Install umi-types Package

Source: https://github.com/yeepchen/umi2/blob/master/packages/umi-types/README.md

Installs the umi-types package using yarn. This package provides essential type definitions for UmiJS development.

```bash
yarn add umi-types
```

--------------------------------

### CLI Commands

Source: https://context7.com/yeepchen/umi2/llms.txt

Documentation for the command-line interface (CLI) tools provided by Umi for development, building, and testing.

```APIDOC
## CLI Commands

### `umi dev`

**Description**: Starts the development server with hot module replacement enabled.

**Usage**: `umi dev`

**Details**: The default port is 8000. Access your application at `http://localhost:8000`.

### `umi build`

**Description**: Builds a production-ready application.

**Usage**: `umi build`

**Details**: The default output directory is `./dist`. Generated files include minified JavaScript bundles, optimized CSS files, and static assets with hash suffixes (if enabled).

### `umi test`

**Description**: Runs tests using the built-in Jest support.

**Usage**: `umi test`

**Options**: 
- `--coverage`: Run tests with coverage reporting.
- `--watch`: Run tests in watch mode for development.
```

--------------------------------

### Install Sass Dependencies (Bash)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/faq.md

This command installs the necessary Node Sass and Sass-Loader packages using npm, which are required to enable Sass support in your UmiJS project.

```bash
$ npm i node-sass sass-loader --save
```

--------------------------------

### Basic Umi Plugin Initialization

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Define and export a default function as the plugin's entry point. This function receives the Umi API and user-defined options. Ensure compiled code is ES5 if publishing as an npm package.

```javascript
export default (api, opts) => {
  // your plugin code here
};
```

--------------------------------

### UmiJS Dependency Installation for react-router-breadcrumbs-hoc

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/router.md

Installs the 'react-router-breadcrumbs-hoc' package as a dependency for implementing breadcrumbs functionality in UmiJS. This command is executed using Yarn. This package provides a convenient way to generate breadcrumbs based on route configurations.

```bash
$ yarn add react-router-breadcrumbs-hoc
```

--------------------------------

### UmiJS PrivateRoute Component Example

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/router.md

An example of a 'PrivateRoute' component used for permission routing in UmiJS. This component wraps its children, displaying additional information and passing along the children to be rendered. It demonstrates how a custom route component can intercept and modify the rendering of a protected route.

```javascript
export default (props) => {
  return (
    <div>
      <div>PrivateRoute (routes/PrivateRoute.js)</div>
      { props.children }
    </div>
  );
}
```

--------------------------------

### Deploy Documentation

Source: https://github.com/yeepchen/umi2/blob/master/CONTRIBUTING.md

Deploys the project's documentation to the official umis.org website. This command is used to publish the latest documentation.

```bash
$ y doc:deploy
```

--------------------------------

### Temporary File Generation API

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

API for writing temporary files to the pages/.umi directory.

```APIDOC
## writeTmpFile

### Description
Add a file to pages/.umi.

### Method
POST

### Endpoint
/api/tmp-file

### Parameters
#### Request Body
- **fileName** (string) - Required - The name of the temporary file to create.
- **content** (string) - Required - The content to write to the file.

### Request Example
```json
{
  "fileName": "dva.js",
  "content": "export const dva = { ... };"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Temporary file written successfully."
}
```
```

--------------------------------

### Middleware Management API

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Methods for adding middleware to the UmiJS development server at different positions.

```APIDOC
## addMiddleware

### Description
Append middleware to the dev server.

### Method
POST

### Endpoint
/api/middleware

### Parameters
#### Request Body
- **middleware** (function) - Required - The middleware function to add.

### Request Example
```json
{
  "middleware": "(req, res, next) => { ... }"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Middleware added successfully."
}
```

## addMiddlewareAhead

### Description
Add middleware to the front of the development server.

### Method
POST

### Endpoint
/api/middleware/ahead

### Parameters
#### Request Body
- **middleware** (function) - Required - The middleware function to add.

### Request Example
```json
{
  "middleware": "(req, res, next) => { ... }"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Middleware added to the front successfully."
}
```

## addMiddlewareBeforeMock

### Description
Add middleware before the mock.

### Method
POST

### Endpoint
/api/middleware/before-mock

### Parameters
#### Request Body
- **middleware** (function) - Required - The middleware function to add.

### Request Example
```json
{
  "middleware": "(req, res, next) => { ... }"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Middleware added before mock successfully."
}
```

## addMiddlewareAfterMock

### Description
Add middleware after the mock.

### Method
POST

### Endpoint
/api/middleware/after-mock

### Parameters
#### Request Body
- **middleware** (function) - Required - The middleware function to add.

### Request Example
```json
{
  "middleware": "(req, res, next) => { ... }"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message.

#### Response Example
```json
{
  "message": "Middleware added after mock successfully."
}
```
```

--------------------------------

### Mock Data Configuration (mock/users.js)

Source: https://context7.com/yeepchen/umi2/llms.txt

Sets up mock API endpoints for development using JavaScript objects and functions. Supports simple data responses, dynamic data generation with Mock.js, and custom request/response handling.

```javascript
export default {
  // Simple data response
  'GET /api/users': {
    users: [
      { id: 1, name: 'John Doe', email: 'john@example.com' },
      { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
    ]
  },

  // GET can be omitted
  '/api/users/1': {
    id: 1,
    name: 'John Doe',
    email: 'john@example.com'
  },

  // Custom function with full control
  'POST /api/users': (req, res) => {
    const { name, email } = req.body;

    // Simulate validation
    if (!name || !email) {
      res.status(400).json({ error: 'Name and email are required' });
      return;
    }

    // Simulate successful creation
    res.status(201).json({
      id: Math.floor(Math.random() * 1000),
      name,
      email,
      createdAt: new Date().toISOString()
    });
  },

  // Simulate delay
  'GET /api/products': (req, res) => {
    setTimeout(() => {
      res.json({
        products: [
          { id: 1, name: 'Product A', price: 29.99 },
          { id: 2, name: 'Product B', price: 49.99 }
        ],
        total: 2
      });
    }, 1000);
  },

  // Dynamic data with Mock.js
  'GET /api/random-users': (req, res) => {
    const Mock = require('mockjs');
    res.json(Mock.mock({
      'users|10': [{
        'id|+1': 1,
        'name': '@name',
        'email': '@email',
        'age|18-65': 25,
        'city': '@city'
      }]
    }));
  }
};
```

--------------------------------

### Locale - umi-plugin-locale

Source: https://github.com/yeepchen/umi2/blob/master/docs/api/README.md

Manages internationalization for the application, including setting and getting the current locale, and exposing components and methods from react-intl.

```APIDOC
## umi-plugin-locale

### Description
Manages internationalization (i18n) for your Umi.js application. It's included in `umi-plugin-react`.

### setLocale(lang, realReload = true)

#### Description
Specifies the application language. If `realReload` is `false`, the locale can be set without reloading the entire application.

#### Parameters
- `lang` (string) - The language code (e.g., 'en-US', 'zh-CN').
- `realReload` (boolean, optional) - Whether to perform a real reload. Defaults to `true`.

#### Request Example
```js
import { setLocale } from 'umi-plugin-locale';

// Set the language to English after 10 seconds
setTimeout(() => {
  setLocale('en-US');
}, 10000);
```

### getLocale()

#### Description
Gets the current language being used in the application.

#### Returns
- `string` - The current locale code.

#### Request Example
```js
import { getLocale } from 'umi-plugin-locale';

// Print the current using language
console.log(getLocale());
```

### Components from [react-intl]

#### Description
Components exposed via `react-intl` can be used directly from `umi-plugin-locale`.

#### Available Components
- `FormattedDate`
- `FormattedTime`
- `FormattedRelative`
- `FormattedNumber`
- `FormattedPlural`
- `FormattedMessage`
- `FormattedHTMLMessage`

#### Request Example
```jsx
import {
  FormattedMessage,
} from 'umi-plugin-locale';

export default () => <FormattedMessage id="TEST_TITLE" />;
```

### Methods from [react-intl]

#### Description
Methods exposed via `react-intl` can be used directly from `umi-plugin-locale`.

#### Available Methods
- `formatDate`
- `formatTime`
- `formatRelative`
- `formatNumber`
- `formatPlural`
- `formatMessage`
- `formatHTMLMessage`

#### Request Example
```jsx
import {
  formatMessage
} from 'umi-plugin-locale';

export default () => <p>{formatMessage({ id: "TEST_TITLE" })}</p>;
```

### See Also
- [react-intl Components](https://github.com/formatjs/react-intl/blob/master/docs/Components.md#components)
- [react-intl API](https://github.com/formatjs/react-intl/blob/master/docs/API.md#api)
```

--------------------------------

### Environmental Variable: NODE_ENV

Source: https://github.com/yeepchen/umi2/blob/master/docs/plugin/develop.md

Describes the `NODE_ENV` environment variable and its use in differentiating between development and production environments within Umi plugins.

```APIDOC
## Environmental Variable: NODE_ENV

### Description
The `NODE_ENV` environment variable, accessible via `process.env.NODE_ENV`, is used to distinguish between development and production environments.

### Usage
```js
if (process.env.NODE_ENV === 'development') {
  // Development-specific logic
}
```

### Response
N/A
```

--------------------------------

### Use Custom Package Management Tools for Blocks

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/block.md

Allows specifying a custom package installation tool like cnpm or tnpm using the `--npm-client` parameter. Umi defaults to npm and uses yarn if a `yarn.lock` file is present.

```bash
npx umi block add DashboardAnalysis --npm-client cnpm
```

--------------------------------

### Default HTML Template Setup (HTML)

Source: https://github.com/yeepchen/umi2/blob/master/docs/guide/html-template.md

Defines the default HTML template for a UmiJS application. This file, typically named `src/pages/document.ejs`, must contain the `<div id="root"></div>` element where the application will be mounted. It includes basic HTML structure, metadata, and the essential root div.

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Your App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>
```

--------------------------------

### Bootstrap Packages with Yarn

Source: https://github.com/yeepchen/umi2/blob/master/CONTRIBUTING.md

Bootstraps all packages within the monorepo using yarn. This command should be executed when new packages are added to the project.

```bash
$ y bootstrap
```
Tokens:
Raw