2022-11-06 08:34:06 +08:00
# Develop the first plugin
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
Before start, you need to install NocoBase:.
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
- [create-nocobase-app installation ](/welcome/getting-started/installation/create-nocobase-app )
- [Git source installation ](/welcome/getting-started/installation/git-clone )
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
Once NocoBase is installed, we can start our plugin development journey.
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
## Create a plugin
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
First, you can quickly create an empty plugin via the CLI with the following command.
2022-10-31 11:52:17 +08:00
```bash
yarn pm create hello
```
2022-11-06 08:34:06 +08:00
The directory where the plugin is located ``packages/plugins/hello`` and the plugin directory structure is
2022-10-31 11:52:17 +08:00
```bash
|- /hello
|- /src
2022-11-06 08:34:06 +08:00
|- /client # plugin client code
|- /server # plugin server code
2022-10-31 11:52:17 +08:00
|- client.d.ts
|- client.js
2022-11-06 08:34:06 +08:00
|- package.json # plugin package information
2022-10-31 11:52:17 +08:00
|- server.d.ts
|- server.js
2022-11-06 08:34:06 +08:00
package.json
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
package.json information
2022-10-31 11:52:17 +08:00
```json
{
"name": "@nocobase/plugin-hello",
"version": "0.1.0",
"main": "lib/server/index.js",
"devDependencies": {
"@nocobase/client": "0.8.0-alpha.1",
"@nocobase/test": "0.8.0-alpha.1"
}
}
```
2022-11-06 08:34:06 +08:00
A NocoBase plugin is also an NPM package, the correspondence rule between plugin name and NPM package name is `${PLUGIN_PACKAGE_PREFIX}-${pluginName}` .
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
`PLUGIN_PACKAGE_PREFIX` is the plugin package prefix, which can be customized in .env, [click here for PLUGIN_PACKAGE_PREFIX description ](/api/env#plugin_package_prefix ).
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
## Code the plugin
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
Look at the `packages/plugins/hello/src/server/plugin.ts` file and modify it to
2022-10-31 11:52:17 +08:00
```ts
import { InstallOptions, Plugin } from '@nocobase/server';
export class HelloPlugin 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 HelloPlugin;
```
2022-11-06 08:34:06 +08:00
## Register the plugin
2022-10-31 11:52:17 +08:00
```bash
yarn pm add hello
```
2022-11-06 08:34:06 +08:00
## Activate the plugin
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
When the plugin is activated, the hello table that you just configured is automatically created.
2022-10-31 11:52:17 +08:00
```bash
yarn pm enable hello
```
2022-11-06 08:34:06 +08:00
## Start the application
2022-10-31 11:52:17 +08:00
```bash
# for development
yarn dev
# for production
yarn build
yarn start
```
2022-11-06 08:34:06 +08:00
## Experience the plugin
2022-10-31 11:52:17 +08:00
2022-11-06 08:34:06 +08:00
Insert data into the hello table of the plugin
2022-10-31 11:52:17 +08:00
```bash
curl --location --request POST 'http://localhost:13000/api/hello:create' \
--header 'Content-Type: application/json' \
--data-raw '{
"name": "Hello world"
}'
```
2022-11-06 08:34:06 +08:00
View the data
2022-10-31 11:52:17 +08:00
```bash
curl --location --request GET 'http://localhost:13000/api/hello:list'
```