Overview

NocoBase client plugins can do a lot: register new pages, write custom components, call backend APIs, add blocks and fields, and even extend action buttons. All these capabilities are organized through a unified plugin entry point.

If you already have React development experience, getting started is fast -- most scenarios involve writing regular React components and using NocoBase's context capabilities (such as making requests, internationalization) to integrate with NocoBase. You only need to learn about FlowEngine when you want your components to appear in NocoBase's visual configuration interface.

:::warning Note

NocoBase is migrating from client (v1) to client-v2. Currently client-v2 is still under development. The content in this documentation is for early exploration and is not recommended for production use. New plugins should use the src/client-v2/ directory and the @nocobase/client-v2 API.

:::

Learning Path

It is recommended to learn client plugin development in the following order, from simple to complex:

Plugin (entry) -> Router (pages) -> Component (components) -> Context (context) -> FlowEngine (UI extensions)

Specifically:

1. Plugin: The plugin entry class. Register routes, models, and other resources in lifecycle methods like load().
2. Router: Register page routes via router.add() and plugin settings pages via pluginSettingsManager.
3. Component: Routes mount React components. Just use React + Antd by default -- no different from regular frontend development. | Find reusable form, filter, and table components | Shared Components |
4. Context: In plugins, access context via this.context; in components, use useFlowContext() to get the context. This gives you access to NocoBase capabilities -- making requests (ctx.api), internationalization (ctx.t), logging (ctx.logger), etc.
5. FlowEngine: If your components need to appear in the "Add Block / Field / Action" menus and support visual configuration by users, you need to wrap them with FlowModel.

The first four steps cover most plugin scenarios. You only need step five when deep integration with NocoBase's UI configuration system is required. If you're unsure which approach to use, see Component vs FlowModel.

Quick Reference

Related Links

• Writing Your First Plugin -- Create a runnable plugin from scratch
• Server-side Development Overview -- Client plugins typically need server-side counterparts
• FlowEngine Full Documentation -- Complete reference for FlowModel, Flow, and Context
• Project Directory Structure -- Where plugin files go