Loading custom 'Viz' plugin

Hello,

Recently I have started setting up Apache Superset and to archieve what I am looking for (a custom table view) I want to make a plugin. I have followed this tutorial (maybe 4 times) https://preset.io/blog/2020-07-02-hello-world/

When I follow this tutorial and write npm run dev-server it will start the dev-server at: http://localhost:9000. It perfectly loads my plugin, but the problem is that I work from home and do everything through Putty on another laptop within the company network. Now, since I work from home I want to test my plugin, how can I archieve to run the dev-server on IP ‘0.0.0.0’?

Normally to run my superset server I write superset run -h 0.0.0.0 -p 8088 this perfectly loads up superset and I can access it at home but this does not load the hello-world plugin!

What I already tried

1. I created a new plugin from scratch following the same steps
2. I tried running npm run dev-server --host 0.0.0.0

So I see two possibilities:

1. Can I load my plugin when running superset run -h 0.0.0.0 -p 8088
2. Can I access the dev server from home?

[avicenteg]

I’m running into the same issue when adding custom plugins, I’m using docker.

When I add a new custom visualization plugin using this tutorial and run docker-compose, I get this error

superset_node            | npm ERR! code E404
superset_node            | npm ERR! 404 Not Found - GET https://registry.npmjs.org/@superset-ui%2fplugin-chart-hello-world - Not found
superset_node            | npm ERR! 404 
superset_node            | npm ERR! 404  '@superset-ui/plugin-chart-hello-world@^0.0.0' is not in the npm registry.
superset_node            | npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
superset_node            | npm ERR! 404 It was specified as a dependency of 'superset-frontend'
superset_node            | npm ERR! 404 
superset_node            | npm ERR! 404 Note that you can also install from a
superset_node            | npm ERR! 404 tarball, folder, http url, or git url.
superset_node            | 
superset_node            | npm ERR! A complete log of this run can be found in:
superset_node            | npm ERR!     /root/.npm/_logs/2020-11-30T21_19_48_140Z-debug.log

I can run the dev server using npm run dev-server inside the superset-frontend folder and it gets served via localhost:9000, but docker doesn’t seem to play that well, the frontend at localhost:8088 and logo keeps spinning.

Hello @returnzer0 I reach a solution with docker. I’m using a old plugin (JS instead of TS) but I think it should work.

1. I created a folder in the superset-frontend where I put my new plugins (p.e: superset-ui/plugins).
2. I create manually an entrance in the package.json, linking the version of the plugin with a file. "@superset-ui/legacy-plugin-chart-mychart": "file:superset-ui/plugins/legacy-plugin-chart-mychart"
3. I run npm install in superset-fronted in order to update the package-lock.json file. After the process is complete, delete the node-modules folder and its content.
4. In the Dockerfile, I added: COPY ./superset-frontend/superset-ui /app/superset-frontend/superset-ui This command should be before this other command.

RUN /frontend-mem-nag.sh \
	&& cd /app/superset-frontend \
        && npm ci

1. In the docker-compose I created a volume (this volume was present in old versions of superset).

x-superset-volumes: &superset-volumes
  - ./docker/docker-init.sh:/app/docker-init.sh
  - ./docker/pythonpath_dev:/app/pythonpath
  - ./superset:/app/superset
  - ./superset-frontend:/app/superset-frontend
  - node_modules:/app/superset-frontend/node_modules  <- this line was changed
  - superset_home:/app/superset_home

volumes:
  superset_home:
    external: false
  db_home:
    external: false
  node_modules:   <- this line was changed
    external: false
  redis:
    external: false

1. In the docker-compose I use install without the --f option for the superset-node.

  superset-node:
    image: node:12
    container_name: superset_node
    command: ["bash", "-c", "cd /app/superset-frontend && npm install --global webpack webpack-cli && npm install && npm run dev"]
    env_file: docker/.env
    depends_on: *superset-depends-on
    volumes: *superset-volumes

1. I docker-compose up.
2. Probably, when you do that, you won’t have any error, but the new plugin will be still missing. In this case, goes to the folder of your plugin and check if there are a node_modules folder. If it is in there, delete it.
3. If you haven’t still, shut down the superset instance, and change the superset-node command in docker-compose, deleting the npm install option.

  superset-node:
    image: node:12
    container_name: superset_node
    command: ["bash", "-c", "cd /app/superset-frontend && npm install --global webpack webpack-cli && npm run dev"]
    env_file: docker/.env
    depends_on: *superset-depends-on
    volumes: *superset-volumes

1. docker-compose up again, and it should be working, at least for me.

The steps from 1-8 should be repeated when you add a new plugin, but if you are doing some changes in your plugin you can change the files in the plugin and the changes will be reflected in your instance when you restart it.

I hope this works for you. I know how frustating is it, I spend 2 whole weeks to understand it.

[ktmud]

Not sure I fully understood the problem, but I’d recommend try not to rely on Docker for the dev build.

You may even try to start Superset with Docker, but checkout another copy of superset source code to have a clean build.

The webpack dev server allows you to point to arbitrary remote host (even if it is running on a different version of Superset), so as long as you have the backend successfully running somewhere, you can always build the dev server locally to get more predictable build results.

# Run dev-server at 8080 and proxy to local port 9000
npm run dev-server -- --port 8088 --superset=http://localhost:9000