august 23, 2023

Running a dev environment and developing a simple plugin in Apache Superset.

Formatting Apache Superset visualizations using CSS and HTML is applicable in most cases, but for some charts it is not applicable, and it can significantly complicate the query to the data source. The logical solution to this problem and the next stage of development is to create your own custom visualization. The complexity of this approach is the need to use many different technologies such as docker, git, react, npm, etc. In this post, we will describe our experience in creating a plugin and implementing it in a project through building a new docker image.


1. Installing Apache Superset and the appropriate environment.

1.1. Install docker and docker-compose.

Open the terminal and run the following commands:

sudo apt update

sudo apt install apt-transport-https ca-certificates curl software-properties-common

curl -fsSL | sudo apt-key add –

sudo apt update

sudo apt install docker-ce

sudo systemctl status docker (проверка статуса)

sudo curl -L «$(uname -s)-$(uname -m)» -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

docker-compose –version 

1.2. Installing Apache Superset

1.2.1. Clone the project from github and navigate to the superset directory

git clone


cd superset

1.2.2. Start the Apache Superset container

sudo docker-compose -f docker-compose-non-dev.yml up -d

1.2.3. After finishing go to http://localhost:8088/ and authorize login/password: admin/admin.


1.3. Installing Node using Node Version Manager:

To run properly, you need to install node.js and npm versions compatible with Superset. You can find out which version of node you need in the package.json file, which is located in the superset-frontend folder:

To install, run the following commands:

curl -o- | bash

source ~/.bashrc

nvm list-remote

nvm install v16.9.1

node -v

npm -v

2. Starting the Superset dev environment and creating a plugin
2.1. Start the dev environment

Navigate to the superset-frontend folder and run the command to install all dependencies and packages:

cd superset-frontend


npm install

Run dev superset:

npm run dev-server

Go to http://localhost:9000 and we should now see dev-superset (login and password is either admin/admin or matches your production environment).

Stop the dev-server after checking by pressing Ctrl + C in terminal.

2.2. Creating a plugin and connecting to the Superset dev environment
2.2.1. Install the Superset Yeoman generator and all necessary dependencies. Run the following commands:

npm i -g yo

cd superset-frontend/packages/generator-superset

npm i

npm link

2.2.2. Create a new directory in a convenient directory for your plugin and run the Yeoman generator:

mkdir superset-my-first-chart

cd superset-my-first-chart

yo @superset-ui/superset

We leave the default answers to the generator questions.
2.2.3. Run the following commands to build the plugin:

npm i –force

npm run build

To run the plugin in debug mode, start the development server using the following command (the compilation will be done automatically when the code is changed):


npm run dev

2.2.4. Add the package to Superset.
Navigate to the superset-frontend subdirectory of the original superset folder and run it:


npm i -S /home/juls/tmp/superset-my-first-chart


In the node_modules folder you will see a directory with our plugin.

In the plugin development directory go to the README file. There you need to find two lines:

In the superset-frontend subdirectory find /src/visualizations/presets/MainPreset.js, paste the lines from README into it:
— Important!!! For subsequent successful build of the docker image it is necessary to import the plugin before filters:

In the superset-frontend subdirectory find /src/visualizations/presets/MainPreset.js, paste the lines from README into it:
— Important!!! For subsequent successful build of the docker image it is necessary to import the plugin before filters:

— Important!!! For subsequent successful compilation of the docker image, the plugin instance creation string is written before …experimentalplugins in the following format:

new SupersetMyFirstChart().configure({

          key: ‘superset-my-first-chart’,


Start dev-server and check the plugin availability and its operability:


npm run dev-server

Now when you modify and save the source files in the plugin directory the changes will be automatically displayed in the browser, let’s change the «Hello, World!» caption for an example.

3. Building a new docker image

To display the developed plugin in the production environment, you need to stop the dev environment by pressing ctrl+c in terminal with plugin and server.

Stopping Superset

sudo docker-compose stop

Start the image build with the command:

sudo docker build -f Dockerfile —force-rm -t apache/superset:${TAG:-latest-8} /home/juls/tst/superset здесь latest-8 – the name of your new image,  /home/juls/tst/superset – superset installation directory

Building a new image takes a long time and requires enough memory, if you have problems you can increase the size of the swap file.
After the deployment, in the file docker-compose-non-dev.yml change the image version to the newly built one and save it.
Run Superset

sudo docker-compose -f docker-compose-non-dev.yml up –d

For more information, please get in touch here:

Contact Form main