# Kibana plugin development | Skill matrix **URL:** \ **Category:** Kibana\ **Created:** [April 5, 2018, 8:18am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877 "2018-04-05T08:18:40Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![NerdSec](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nerdsec/32/22056_2.png) [@NerdSec](https://discuss.elastic.co/u/NerdSec)\ **Post date:** [April 5, 2018, 8:18am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/1 "2018-04-05T08:18:40Z")
Hi, I wish to develop a Kibana App to act as an input to Elasticsearch. I am willing to invest time and effort in understanding the technology stack needed to develop this App. I have browsed through majority of the apps mentioned here: > [Known plugins | Kibana Guide [8.11] | Elastic](https://www.elastic.co/guide/en/kibana/current/known-plugins.html) I found that majority of them use Angular. I have some basic front-end development experience, however, I have never worked on angular or node extensively. Majority of the development by me has been carried out in python. I read a post somewhere where they mentioned that Kibana is planning to move to React in the long term, would it make sense to focus on learning React? Can someone help out with what technologies should I learn (Any particular order) in order to develop the plugin? Please ignore any foolish mistakes or assumptions I might have made in this post. Regards, N ---
**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\ **Post date:** [April 5, 2018, 3:05pm UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/2 "2018-04-05T15:05:34Z")
Have you tried looking at 🙂[https://www.elastic.co/guide/en/kibana/current/plugin-development.html](https://www.elastic.co/guide/en/kibana/current/plugin-development.html) Its the guide to plugin development. It may help you get started. Cheers Rashmi ---
**Author:** ![NerdSec](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nerdsec/32/22056_2.png) [@NerdSec](https://discuss.elastic.co/u/NerdSec)\ **Post date:** [April 6, 2018, 4:28am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/3 "2018-04-06T04:28:41Z")
Hi Rashmi, Yes. I have gone through the doc. I figured out that the technology used would be angular or react from these docs only. But the challenge is the docs cover visualization creation extensively and do not cover creating your own apps for kibana that well. Hence this post. I tried the freenode irc, but could not get much response there as well. Regards, N ---
**Author:** ![NerdSec](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nerdsec/32/22056_2.png) [@NerdSec](https://discuss.elastic.co/u/NerdSec)\ **Post date:** [April 8, 2018, 6:36am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/4 "2018-04-08T06:36:22Z")
So I might have made some progress with this. Here are a few bullet points that outline my current understanding of Kibana plugins: 1. **Kibana Apps are _SPA (Single Page Applications)_ developed using either `Angular` or `React`.** 2. **The Kibana team is planning to move away from Angular and towards React. This was evident from the following posts/discussions on Git.** > **[Componentizing the Kibana UI, part 2: JavaScript with React](https://www.elastic.co/blog/componentizing-the-kibana-ui-writing-javascript-with-react)** > > React complements our componentization process perfectly! We've used React to encapsulate complexity, and reduce CSS and markup to mere implementation details. > > **[nreese/kibana-plugin-notes](https://github.com/nreese/kibana-plugin-notes)** > > Contribute to kibana-plugin-notes development by creating an account on GitHub. 1. **With Kibana v6.3 a kibana plugin generator has been added. This can be used as a reference to create React-based plugins, as evident from the following discussions:** > > 1. **An EUI library is now available to ensure better code sharing between Kibana and its plugins. Documentation or usage example for it is sadly missing.** > > **[elastic/eui](https://github.com/elastic/eui)** > > eui - Elastic UI Framework 🙌 What is still however not clear or missing for me is the way to interact with Elasticsearch from within the plugin/app. I can definitely use the Elasticsearch.js client library and hard-code the config or add a json config in the plugin folder. But I do not think it is the ideal way and getting the config from kibana.yml should definitely be possible. Anyone with some experience in that particular setting, please update me about the same. Regards, N ---
**Author:** ![undwood](https://avatars.discourse-cdn.com/v4/letter/u/a88e57/32.png) [@undwood](https://discuss.elastic.co/u/undwood)\ **Post date:** [April 8, 2018, 7:01am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/5 "2018-04-08T07:01:42Z")
As for getting Elasticsearch URL - it is possible, by reading kibana config in your plugin. All you need is add server function like this: ``` server.route({ path: '/api//{attr}', method: 'GET', handler(req, reply) { reply(server.config().get(req.params.attr)); } }); ``` and then perform get requests from you client side code in plugin. You can get any settings from kibana.yml (look throw the file and use ))) ---
**Author:** ![NerdSec](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nerdsec/32/22056_2.png) [@NerdSec](https://discuss.elastic.co/u/NerdSec)\ **Post date:** [April 8, 2018, 7:36am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/6 "2018-04-08T07:36:54Z")
Hi undwood, Thank you for the example. Do you have a sample plugin written in react? Would be a good reference point. Regards N ---
**Author:** ![undwood](https://avatars.discourse-cdn.com/v4/letter/u/a88e57/32.png) [@undwood](https://discuss.elastic.co/u/undwood)\ **Post date:** [April 8, 2018, 8:38am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/7 "2018-04-08T08:38:47Z")
I'm sorry, but I can't share the whole code. But as for starting kit, I can write some key things to start writhing kibana plugin using react. 1. I use plugin generator from Elastic documentation - It builds a stub for any kibana plugin. 2. index.js - leave it as it has been generated. And ad initialisation of the server api. > **index.js** > > ``` > import { resolve } from 'path'; > import { AppConstants } from './public/config/AppConfig'; > import api from './server/api/init'; > export default function (kibana) { > return new kibana.Plugin({ > require: ['elasticsearch'], > name: ′${AppConstants.APP_NAME}′, > uiExports: { > require: ['elasticsearch'], > name: ′${AppConstants.APP_NAME}′, > uiExports: { > app: { > title: AppConstants.APP_TITLE, > description: AppConstants.APP_DESCRIPTION, > main: ′plugins/${AppConstants.APP_NAME}/app′, > injectVars: function (server) { > const config = server.config(); > return { > kbnIndex: config.get('kibana.index'), > esShardTimeout: config.get('elasticsearch.shardTimeout'), > esApiVersion: config.get('elasticsearch.apiVersion'), > basePath: config.get('server.basePath') > }; > } > }, > translations: [ > resolve(__dirname, './translations/es.json') > ], > hacks: [ > 'plugins/bieibro/hack' > ] > }, > config(Joi) { > return Joi.object({ > enabled: Joi.boolean().default(true) > }).default(); > }, > init(server, options) { > console.log("----- server init"); > api(server); > } > }); > } > > ``` 1. server api is the following > **init.js** > > ``` > export default function (server) { > server.route({ > path: '/api/bb/config/{attr}', > method: 'GET', > handler(req, reply) { > reply(server.config().get(req.params.attr)); > } > }); > } > > ``` 1. The react start component (with redux support) > **app.js** > > ``` > import React from 'react'; > import 'ui/autoload/styles'; > import 'plugins/kbn_vislib_vis_types/kbn_vislib_vis_types'; > import './less/main.less'; > > import { AppConstants } from './config/AppConfig'; > import { render } from 'react-dom'; > import chrome from 'ui/chrome'; > import App from './app/App'; > import { Provider } from 'react-redux'; > import configureStore from './store'; > > chrome.setRootTemplate(′
′) > .setRootController(() => { > // Mount the React app > const el = document.getElementById('root'); > const store = configureStore(); > render( > > > > , el); > }); > > ``` 1. And then, you can implement all, what you wish with react. But, as I understand, we can't use React Router in plugin. If anybody know, how to do this - please write an example PS replace ′ to ` ---
**Author:** ![NerdSec](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nerdsec/32/22056_2.png) [@NerdSec](https://discuss.elastic.co/u/NerdSec)\ **Post date:** [April 9, 2018, 4:00am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/8 "2018-04-09T04:00:02Z")
Thanks for the skeleton undwood. Will try and let you know how it goes 🙂 ---
**Author:** ![NerdSec](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nerdsec/32/22056_2.png) [@NerdSec](https://discuss.elastic.co/u/NerdSec)\ **Post date:** [April 26, 2018, 4:38am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/9 "2018-04-26T04:38:44Z")
Found a plugin that does exactly that! > **[kyushy/kibana-xlsx-import](https://github.com/kyushy/kibana-xlsx-import)** > > Contribute to kibana-xlsx-import development by creating an account on GitHub. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [May 24, 2018, 4:38am UTC](https://discuss.elastic.co/t/kibana-plugin-development-skill-matrix/126877/10 "2018-05-24T04:38:53Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.