Skip to main content

Hello World Plugin Example

We want to create a simple "Hello World" plugin for Superset using the official Yeoman generator to understand the plugin development process and get familiar with the architecture.

Requirements​

Before starting, make sure you have:

Step-by-Step Implementation​

1. Install Yeoman Generator​

First, install the Yeoman generator globally and set it up:

# Install Yeoman globally
npm i -g yo

# Navigate to the generator directory
cd superset-frontend/packages/generator-superset

# Install dependencies
npm i

# Link the generator globally
npm link

2. Create Plugin Directory​

Create a new directory for your plugin:

# Create plugin directory
mkdir superset-plugin-chart-hello-world
cd superset-plugin-chart-hello-world

3. Generate Base Plugin​

Generate the base plugin structure using the Yeoman generator:

# Generate the plugin scaffold
yo @superset-ui/superset

Note: You might face some errors during generation, but this is safe to ignore. We will resolve them in the next step.

4. Resolve Dependencies​

Install dependencies and resolve any issues:

# Force install to resolve dependency conflicts
npm i --force

5. Test the Build​

Verify that the plugin builds correctly:

# Test the build process
npm run build

Integration with Superset​

1. Install Plugin in Superset​

To add the package to Superset, navigate to the superset-frontend directory and install your plugin:

# Navigate to superset-frontend
cd superset-frontend

# Install your plugin (replace with your actual path)
npm i -S /path-to-plugin/superset-plugin-chart-hello-world

2. Register Plugin in MainPreset​

Go inside superset-frontend folder and open your favorite IDE. We will be editing files in superset.

Open src/visualizations/presets/MainPreset.js file and add the following:

Add the import statement:

import { SupersetPluginChartHelloWorld } from 'superset-plugin-chart-hello-world';

Add the plugin to the plugins array:

new SupersetPluginChartHelloWorld().configure({ key: 'ext-hello-world' }),

3. Start Development Server​

After registration, start the development server:

# Start the frontend development server
npm run dev-server

Testing Your Plugin​

1. Access Superset​

Go to Superset at http://localhost:9000

2. Create a New Chart​

  1. Navigate to Charts → + Chart
  2. Choose Hello World from the chart type dropdown
  3. Configure your settings in the control panel
  4. Click Create to see your plugin in action

3. Verify Plugin Appearance​

You should see the Hello World Plugin available in the chart types as shown in the screenshots below:

Hello World Plugin in Chart Types

Hello World Plugin Chart

🎉 Congratulations!​

You have successfully created and integrated your first Superset plugin using the official Yeoman generator! This foundation will help you build more complex and useful visualizations.