Webpack Template for Grafana plugins development

This may be a silly question…I am new to Angular and wondering how do folks develop plugins for Grafana, without being able to look at the UI, until deploying into Grafana? I thought the WebPack Template for Grafana would help, but with my newness, I’ve no idea what it’s real purpose is, maybe I mis-understood it’s purpose. I was kind of hoping to find some sort of lightweight web-app thing, through which i could visually see and test the U/I as I am developing it, before packaging and deploying into Grafana. I get that certain environmental Grafana variables, datastores, etc, would not be accessible… How do I setup a lightweight Angular testing harness to see the U/I of my plugins, before deploying into Grafana proper? or is this the wrong approach?

I may be missing something here, but I’ve developed a couple of panels for Grafana, using the existing sample panels and a few user contributed panels as coding examples. The process is pretty straightforward once you get over the initial set-up.

You build your panel inside the grafana\data\plugins directory. After setting up the basic boilerplate files - and carefully applying the standard naming conventions and restarting grafana, your panel will show up in your client. I recommend starting out by installing something similar from the repository and renaming everything etc to get started.

Then setup and run grunt watch so every time the source changes, the plugin gets automatically recompiled etc. Then reload the client to see the results. Most of the real work is done in the chrome debugger.

Good luck.
Michael Moore

1 Like

Currently, from within a separate dev sub-directory, I have been reviewing sample apps and panel plugins using notepad++. But to get a sense of how they will render, I have to build, package and deploy into my grafana plugins sub-directory, and start-up Grafana. I can’t get a good read on whether this is how people are building plugins, or whether there is a light-weight leaner faster method to visualize the U/I…I’m not asking for wysiwyg, just something faster than what I’m doing.