nocobase/docs/en-US/development/your-fisrt-plugin.md

Develop the first plugin

Before start, you need to install NocoBase:.

• create-nocobase-app installation
• Git source installation

Once NocoBase is installed, we can start our plugin development journey.

Create a plugin

First, you can quickly create an empty plugin via the CLI with the following command.

yarn pm create @my-project/plugin-hello

The directory where the plugin located is packages/plugins/@my-project/plugin-hello and the plugin directory structure is

|- /hello
  |- /src
    |- /client # plugin client code
    |- /server # plugin server code
  |- client.d.ts
  |- client.js
  |- package.json # plugin package information
  |- server.d.ts
  |- server.js

Visit the Plugin Manager to view the plugin you just added, the default address is http://localhost:13000/admin/pm/list/local/

If the plugin is not shown in the plugin manager, you can add it manually with the pm add command.

yarn pm add @my-project/plugin-hello

Code the plugin

Look at the packages/plugins/@my-project/plugin-hello/src/server/plugin.ts file and modify it to

import { InstallOptions, Plugin } from '@nocobase/server';

export class PluginHelloServer extends Plugin {
  afterAdd() {}

  beforeLoad() {}

  async load() {
    this.db.collection({
      name: 'hello',
      fields: [{ type: 'string', name: 'name' }],
    });
    this.app.acl.allow('hello', '*');
  }

  async install(options?: InstallOptions) {}

  async afterEnable() {}

  async afterDisable() {}

  async remove() {}
}

export default PluginHelloServer;

Activate the plugin

Operated by command

yarn pm enable @my-project/plugin-hello

Operated by UI

Visit the Plugin Manager to view the plugin you just added and click enable. The Plugin Manager page defaults to http://localhost:13000/admin/pm/list/local/

Node: When the plugin is activated, the hello collection that you just configured is automatically created.

Debug the Plugin

If the app is not started, you need to start the app first

# for development
yarn dev

# for production
yarn build
yarn start

Insert data into the hello collection of the plugin

curl --location --request POST 'http://localhost:13000/api/hello:create' \
--header 'Content-Type: application/json' \
--data-raw '{
    "name": "Hello world"
}'

View the data

curl --location --request GET 'http://localhost:13000/api/hello:list'

Build the plugin

yarn build plugins/@my-project/plugin-hello --tar

# step-by-step
yarn build plugins/@my-project/plugin-hello
yarn nocobase tar plugins/@my-project/plugin-hello

The default saved path for the plugin tar is storage/tar/@my-project/plugin-hello.tar.gz

Upload to other NocoBase applications

Only supported in v0.14 and above