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.
Environment:
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 https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add –
sudo apt update
sudo apt install docker-ce
sudo systemctl status docker (проверка статуса)
sudo curl -L «https://github.com/docker/compose/releases/download/v2.5.0/docker-compose-$(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 https://github.com/apache/superset.gitcd
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- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | 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
