Tutorials for Kibana 6.3 plugin apps


I'm hoping to find some detailed examples and/or tutorials for building Kibana 6.3 plugin apps with React.

I've found bits and pieces for Kibana 4 & 5 by various authors (and thank you @timroes for your blog posts that I did find), as well as bits & pieces in the documentation regarding the plugin generator. I've also been finding random stack overflow posts related to 6+ and AngularJS, but not much with React.

However, there still seems to be quite a dearth of information/examples.

I'm assuming that the giant warning block saying that the plugin-API is not stable and prone to change is scaring some people off...

Any suggestions on how I can find additional info/examples about 6.3 app plugins that use React?
One of my more major concerns is where to use AngularJS to hook into the existing framework, and where to use React to be aligned with the long-term intent.

That is exactly the point of it :slight_smile: Since that plugin API is not at all stable or anything we guarantee in the old system (will change in the future with a new platform), it might change in every minor version (and in fact it does), why our recommendation is still: try not to develop plugins, if possible.

With regards to React in plugins: Unfortunately the current top level "chrome" is still in Angular and has no possibility to easily register React applications. So the workaround we usually do is: register a simple Angular component, that does nothing more than mounting your React component (and possibly pass it in Angular services, it needs). You can find the most simplest example in this code: kibana_sample_plugin/test_vis_app.js at react-6.2 · elastic/kibana_sample_plugin · GitHub

So I would recommend only using Angular on that very very top level to mount your react applications and feel free to use React everywhere else. Just pass down Angular services you might need as properties (or any kind of state management you want to be using).

Also note, that there is one way (using setRootTemplate) that might look easier than above code for integration, but it actually breaks, since unfortunately quiet a lot of services in Kibana require the uiRoute modules to be running. You can also check a couple of details in this issue: Allow plugin apps to use React on top level · Issue #16819 · elastic/kibana · GitHub


Hi Tim,

Thanks for the detailed response, especially around the suggestions about how to mount React components in the AngularJS framework. I'd seen that test_vis_app.js example, but it was only after your explanation that it made sense to me. :smiley:

I'll keep poking around, but I'm starting to wonder about other approaches. I'll start a new thread. :slight_smile:


This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.