Hello World

This tutorial walks you through two ways to create a plugin that registers an application that says "Hello World!".

You can view the tested example plugin at examples/hello_world.

1. Set up your development environment

Read through these instructions to get your development environment set up.

2. Option 1 — Use the plugin generator (recommended)

This is the fastest way to get a working Kibana plugin. The generator scaffolds an external plugin in the root plugins/ directory. This is the supported location for plugins that are not checked into the Kibana repo.

From the Kibana repo root:

node scripts/generate_plugin --name hello_world

You'll be prompted for a description, ownership, and whether to generate UI or server code.

When it finishes, your plugin is at plugins/hello_world/ with:

kibana.json — the manifest Kibana reads at startup
public/, server/, common/ — scaffolded plugin code
tsconfig.json and a package.json with dev scripts

Run your new plugin

External plugins use a two-terminal workflow: one builds the browser bundle, the other runs Kibana.

In one terminal, from inside your plugin directory, build and watch the browser bundle:

cd plugins/hello_world
pnpm dev --watch

In another terminal, from the Kibana repo root, boot Elasticsearch and Kibana:

pnpm es snapshot --license trial

pnpm start

When Kibana picks up your plugin, you'll see it in the startup logs:

[INFO ][plugins-system.standard] Setting up […] plugins: […, helloWorld, …]

Open Kibana in your browser and find your application in the side navigation.

3. Option 2 — Write it manually as an in-repo example

This option is useful if you want to understand the bare minimum needed to register an application, or if you are contributing a plugin to the Kibana repo. The tested example at examples/hello_world is based on this option.

Create your plugin folder. Start off in the kibana folder.

cd examples
mkdir hello_world
cd hello_world

Create the kibana.jsonc manifest file.

touch kibana.jsonc

and add the following:

{
  "type": "plugin",
  "id": "@kbn/hello-world-plugin",
  "owner": "@elastic/kibana-core",
  "description": "A plugin which registers a very simple hello world application.",
  "plugin": {
    "id": "helloWorld",
    "server": false,
    "browser": true,
    "requiredPlugins": ["developerExamples"]
  }
}

Create a tsconfig.json file.

touch tsconfig.json

And add the following to it:

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "target/types"
  },
  "include": [
    "index.ts",
    "common/**/*.ts",
    "public/**/*.ts",
    "public/**/*.tsx",
    "server/**/*.ts",
    "../../typings/**/*"
  ],
  "exclude": ["target/**/*"],
  "kbn_references": ["@kbn/core", "@kbn/developer-examples-plugin"]
}

Create a public/plugin.tsx file .

mkdir public
cd public
touch plugin.tsx

And add the following to it:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
import { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';

interface SetupDeps {
  developerExamples: DeveloperExamplesSetup;
}

export class HelloWorldPlugin implements Plugin<void, void, SetupDeps> {
  public setup(core: CoreSetup, deps: SetupDeps) {
    // Register an application into the side navigation menu
    core.application.register({
      id: 'helloWorld',
      title: 'Hello World',
      async mount({ element }: AppMountParameters) {
        ReactDOM.render(<div data-test-subj="helloWorldDiv">Hello World!</div>, element);
        return () => ReactDOM.unmountComponentAtNode(element);
      },
    });

    // This section is only needed to get this example plugin to show up in our Developer Examples.
    deps.developerExamples.register({
      appId: 'helloWorld',
      title: 'Hello World Application',
      description: `Build a plugin that registers an application that simply says "Hello World"`,
    });
  }
  public start(core: CoreStart) {
    return {};
  }
  public stop() {}
}

Create a public/index.ts file .

touch index.ts

import { HelloWorldPlugin } from './plugin';

export function plugin() {
  return new HelloWorldPlugin();
}

Run your new plugin

In-repo example plugins are discovered via the workspace's package map, so you must bootstrap after creating the manifest:

pnpm kbn bootstrap

In one terminal, run pnpm es snapshot --license trial to boot up Elasticsearch.

In another terminal, run pnpm start --run-examples to boot up Kibana and include the example plugins. Your example plugin should show up in the navigation at the very bottom.