GitHub user dosubot[bot] added a comment to the discussion: How to create a visualization plugin in superset 6.0.0 using docker
<!-- Answer --> Here’s a step-by-step guide to creating a hello-world visualization plugin for Superset 6.0.0 using Docker Compose and the stock image—no custom Dockerfile needed. This workflow leverages the fact that the Docker Compose dev setup mounts your local code into the containers, so changes are reflected live without rebuilding images[^1][^2]. --- ### 1. Prerequisites - Node.js 16 and npm 7 or 8 installed on your host machine - Familiarity with React and npm/Node is helpful --- ### 2. Start the Superset Dev Environment Clone the Superset repo and start Docker Compose: ```bash git clone https://github.com/apache/superset.git cd superset docker compose up ``` Superset will be available at http://localhost:8088 (login: admin/admin)[^1][^2]. --- ### 3. Install the Superset Yeoman Generator ```bash npm i -g yo cd superset-frontend/packages/generator-superset npm i npm link ``` [^3] --- ### 4. Scaffold Your Plugin ```bash mkdir /tmp/superset-plugin-chart-hello-world cd /tmp/superset-plugin-chart-hello-world yo @superset-ui/superset ``` Accept the defaults or customize as needed. This creates all necessary files for a basic plugin[^3]. --- ### 5. Build the Plugin ```bash npm i --force npm run build ``` For live development with hot-reloading, use: ```bash npm run dev ``` [^3] --- ### 6. Add the Plugin to Superset >From the Superset repo root: ```bash cd superset-frontend npm i -S /tmp/superset-plugin-chart-hello-world ``` [^3] --- ### 7. Register the Plugin Edit `superset-frontend/src/visualizations/presets/MainPreset.js`: ```js import { SupersetPluginChartHelloWorld } from 'superset-plugin-chart-hello-world'; ... new SupersetPluginChartHelloWorld().configure({ key: 'ext-hello-world' }), ``` Add the import and the new instance to the plugins array[^3]. --- ### 8. Run the Frontend Dev Server >From `superset-frontend`: ```bash npm run dev-server ``` Your new chart should now appear in the Superset UI[^3]. --- ### Troubleshooting - If you see npm errors about version mismatches, make sure your local Node/npm versions match those used in the Docker container. You can run npm install inside a Node container if needed[^4]. - If the plugin doesn’t show up, double-check the import and registration in `MainPreset.js` and that you installed the plugin as a dependency in `superset-frontend`. --- ### References & Further Reading - [Official plugin creation docs](https://superset.apache.org/docs/contributing/creating-viz-plugins) - [Blog post: Building custom viz plugins](https://preset.io/blog/building-custom-viz-plugins-in-superset-v2) --- [^1]: [Superset Docker Compose mounts local code for live updates](https://github.com/apache/superset/pull/30655) [^2]: [Superset dev environment setup with Docker Compose](https://github.com/apache/superset/blob/master/docs/docs/contributing/development.mdx) [^3]: [Official step-by-step plugin creation guide](https://github.com/apache/superset/blob/master/docs/docs/contributing/howtos.mdx) [^4]: [Troubleshooting npm version mismatches](https://github.com/apache/superset/pull/36028) <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/843e051c-cc12-4b5f-93a5-a4acd8ed7d9a?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/843e051c-cc12-4b5f-93a5-a4acd8ed7d9a?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/843e051c-cc12-4b5f-93a5-a4acd8ed7d9a?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/843e051c-cc12-4b5f-93a5-a4acd8ed7d9a?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/843e051c-cc12-4b5f-93a5-a4acd8ed7d9a?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/843e051c-cc12-4b5f-93a5-a4acd8ed7d9a?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/843e051c-cc12-4b5f-93a5-a4acd8ed7d9a?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Here%E2%80%99s%20a%20step-by-step%20guide%20to%20creating%20a%20hello-world%20visualization%20plugin%20for%20Superset%206.0.0%20using%20Docker%20Compose%20and%20the%20stock%20image%E2%80%94no%20custom%20Dockerfile%20needed.%20This%20workflow%20leverages%20the%20fact%20that%20the%20Docker%20Compose%20dev%20setup%20mounts%20your%20local%20code%20into%20the%20containers%2C%20so%20changes%20are%20reflected%20live%20without%20rebuilding%20images%5B%5E1%5D%5B%5E2%5D.%0A%0A---%0A%0A%23%23%23%201.%20Prerequisites%0A%0A-%20Node.js%2016%20and%20npm%207%20or%208%20installed%20on%20your%20host%20machine%0A-%20Familiarity%20with%20React%20and%20npm/Node%20is%20helpful%0A%0A---%0A%0A%23%23%23%202.%20Start%20the%20Superset%20Dev%20Environment%0A%0AClone%20the%20Supe rset%20repo%20and%20start%20Docker%20Compose%3A%0A%0A%60%60%60bash%0Agit%20clone%20https%3A//github.com/apache/superset.git%0Acd%20superset%0Adocker%20compose%20up%0A%60%60%60%0A%0ASuperset%20will%20be%20available%20at%20http%3A//localhost%3A8088%20%28login%3A%20admin/admin%29%5B%5E1%5D%5B%5E2%5D.%0A%0A---%0A%0A%23%23%23%203.%20Install%20the%20Superset%20Yeoman%20Generator%0A%0A%60%60%60bash%0Anpm%20i%20-g%20yo%0Acd%20superset-frontend/packages/generator-superset%0Anpm%20i%0Anpm%20link%0A%60%60%60%0A%5B%5E3%5D%0A%0A---%0A%0A%23%23%23%204.%20Scaffold%20Your%20Plugin%0A%0A%60%60%60bash%0Amkdir%20/tmp/superset-plugin-chart-hello-world%0Acd%20/tmp/superset-plugin-chart-hello-world%0Ayo%20%40superset-ui/superset%0A%60%60%60%0AAccept%20the%20defaults%20or%20customize%20as%20needed.%20This%20creates%20all%20necessary%20files%20for%20a%20basic%20plugin%5B%5E3%5D.%0A%0A---%0A%0A%23%23%23%205.%20Build%20the%20Plugin%0A%0A%60%60%60bash%0Anpm%20i%20--force%0Anpm%20run%20build%0A%60%60%60%0AFor% 20live%20development%20with%20hot-reloading%2C%20use%3A%0A%60%60%60bash%0Anpm%20run%20dev%0A%60%60%60%0A%5B%5E3%5D%0A%0A---%0A%0A%23%23%23%206.%20Add%20the%20Plugin%20to%20Superset%0A%0AFrom%20the%20Superset%20repo%20root%3A%0A%0A%60%60%60bash%0Acd%20superset-frontend%0Anpm%20i%20-S%20/tmp/superset-plugin-chart-hello-world%0A%60%60%60%0A%5B%5E3%5D%0A%0A---%0A%0A%23%23%23%207.%20Register%20the%20Plugin%0A%0AEdit%20%60superset-frontend/src/visualizations/presets/MainPreset.js%60%3A%0A%0A%60%60%60js%0Aimport%20%7B%20SupersetPluginChartHelloWorld%20%7D%20from%20%27superset-plugin-chart-hello-world%27%3B%0A%0A...%0A%0Anew%20SupersetPluginChartHelloWorld%28%29.configure%28%7B%20key%3A%20%27ext-hello-world%27%20%7D%29%2C%0A%60%60%60%0AAdd%20the%20import%20and%20the%20new%20instance%20to%20the%20plugins%20array%5B%5E3%5D.%0A%0A---%0A%0A%23%23%23%208.%20Run%20the%20Frontend%20Dev%20Server%0A%0AFrom%20%60superset-frontend%60%3A%0A%0A%60%60%60bash%0Anpm%20run%20dev-server%0A%60%60%60%0AYour%20 new%20chart%20should%20now%20appear%20in%20the%20Superset%20UI%5B%5E3%5D.%0A%0A---%0A%0A%23%23%23%20Troubleshooting%0A%0A-%20If%20you%20see%20npm%20errors%20about%20version%20mismatches%2C%20make%20sure%20your%20local%20Node/npm%20versions%20match%20those%20used%20in%20the%20Docker%20container.%20You%20can%20run%20npm%20install%20inside%20a%20Node%20container%20if%20needed%5B%5E4%5D.%0A-%20If%20the%20plugin%20doesn%E2%80%99t%20show%20up%2C%20double-check%20the%20import%20and%20registration%20in%20%60MainPreset.js%60%20and%20that%20you%20installed%20the%20plugin%20as%20a%20dependency%20in%20%60superset-frontend%60.%0A%0A---%0A%0A%23%23%23%20References%20%26%20Further%20Reading%0A%0A-%20%5BOfficial%20plugin%20creation%20docs%5D%28https%3A//superset.apache.org/docs/contributing/creating-viz-plugins%29%0A-%20%5BBlog%20post%3A%20Building%20custom%20viz%20plugins%5D%28https%3A//preset.io/blog/building-custom-viz-plugins-in-superset-v2%29%0A%0A---%0A%0A%5B%5E1%5D%3A%20%5BSuperset%20Docker% 20Compose%20mounts%20local%20code%20for%20live%20updates%5D%28https%3A//github.com/apache/superset/pull/30655%29%0A%5B%5E2%5D%3A%20%5BSuperset%20dev%20environment%20setup%20with%20Docker%20Compose%5D%28https%3A//github.com/apache/superset/blob/master/docs/docs/contributing/development.mdx%29%0A%5B%5E3%5D%3A%20%5BOfficial%20step-by-step%20plugin%20creation%20guide%5D%28https%3A//github.com/apache/superset/blob/master/docs/docs/contributing/howtos.mdx%29%0A%5B%5E4%5D%3A%20%5BTroubleshooting%20npm%20version%20mismatches%5D%28https%3A//github.com/apache/superset/pull/36028%29) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/37031) GitHub link: https://github.com/apache/superset/discussions/37031#discussioncomment-15463594 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
