# Converting React JS website to Kibana plugin **URL:** \ **Category:** Kibana\ **Tags:** kibana-plugin-development\ **Created:** [August 10, 2022, 6:05am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793 "2022-08-10T06:05:28Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [August 10, 2022, 6:05am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/1 "2022-08-10T06:05:28Z")
I have developed a small dashboard and website in React JS. I want to insert it as a plugin into Kibana. I have some queries regarding the same. They are: 1. Can I convert a website to a plugin? Or should I start coding in Kibana plugin from scratch and implement the functionalities in my website? 2. How do I proceed? 3. Does Kibana plugin support React JS or should I re-write the code in Angular JS? 4. Can I convert a website into a plugin? If yes, how? 5. Do I need to clone the Kibana source code and modify the same to add in plugin? ---
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [August 10, 2022, 8:06am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/2 "2022-08-10T08:06:02Z")
Hi Can anyone provide insight on this topic? I am completely new to ELK. ---
**Author:** ![JLeysens](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jleysens/32/67404_2.png) [@JLeysens](https://discuss.elastic.co/u/JLeysens)\ **Post date:** [August 10, 2022, 8:55am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/3 "2022-08-10T08:55:07Z")
Hello! You can definitely use React in Kibana - we use it heavily and have migrated away from Angular. I'd recommend reading this page in the docs: > **[Kibana plugins | Kibana Guide \[8.3\] | Elastic](https://www.elastic.co/guide/en/kibana/current/kibana-plugins.html)** > > Conceptual and step-by-step procedures for using runtime fields, scripted fields, and field formatters. One of the things to notice is that a 3rd party plugin (which you want to build) must be made against a specific stack version and if you want it to work on a newer one it may have to updated. A 3rd party plugin that was updated recently is [GitHub - pjhampton/kibana-prometheus-exporter: Prometheus metrics for Kibana](https://github.com/pjhampton/kibana-prometheus-exporter) You'd develop this inside the Kibana code base so that you can leverage the types. ---
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [August 10, 2022, 9:24am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/4 "2022-08-10T09:24:55Z")
Hi Jean, Thanks for the reply So I need to clone the Kibana repo and make changes in the same right? And should I also have Elasticsearch and Logstash configured on the same system, and then run Kibana locally? ---
**Author:** ![JLeysens](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jleysens/32/67404_2.png) [@JLeysens](https://discuss.elastic.co/u/JLeysens)\ **Post date:** [August 10, 2022, 10:48am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/5 "2022-08-10T10:48:38Z")
I think most of the steps are outlined here: [External plugin development | Kibana Guide [8.3] | Elastic](https://www.elastic.co/guide/en/kibana/current/external-plugin-development.html) You'll place your plugin inside of `plugins` top level directory then run Kibana as a developer to iteratively build out your plugin. You'll need Elasticsearch running, but this is done easily once you have the Kibana repo with `yarn es snapshot`. See [kibana/CONTRIBUTING.md at a0cb2608fbc5bed92b290559146c787f158aee7d · elastic/kibana · GitHub](https://github.com/elastic/kibana/blob/a0cb2608fbc5bed92b290559146c787f158aee7d/CONTRIBUTING.md). ---
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [August 15, 2022, 1:43pm UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/6 "2022-08-15T13:43:35Z")
1. I cloned the kibana git hub repo 2. yarn kbn bootstrap ----\> was succesfull The next step as per the documentation, ([Getting started | Kibana Guide [master] | Elastic](https://www.elastic.co/guide/en/kibana/master/development-getting-started.html)) 3. yarn es snapshot ---- \> error ```auto [2022-08-15T09:42:45,344][ERROR][o.e.b.Elasticsearch] [localhost.localdomain] fatal exception while booting Elasticsearch java.lang.RuntimeException: can not run elasticsearch as root at org.elasticsearch.bootstrap.Elasticsearch.initializeNatives(Elasticsearch.java:260) ~[elasticsearch-8.5.0-SNAPSHOT.jar:?] at org.elasticsearch.bootstrap.Elasticsearch.initPhase2(Elasticsearch.java:166) ~[elasticsearch-8.5.0-SNAPSHOT.jar:?] at org.elasticsearch.bootstrap.Elasticsearch.main(Elasticsearch.java:66) ~[elasticsearch-8.5.0-SNAPSHOT.jar:?] ``` I also have another instance of ES service running. So rather than using yarn es snapshot, I tried connect my kibana to that running instance of ES by making necessary changes in kibana.yml (server.port, server.host, elasticsearch.host). Then did yarn start --allow-root in kibana folder. It doesnt give any error... but takes a loooooooot of time and then seeems to get stuck or fetch somethings sometimes. It has never showed that the service is running in : ---
**Author:** ![JLeysens](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jleysens/32/67404_2.png) [@JLeysens](https://discuss.elastic.co/u/JLeysens)\ **Post date:** [August 16, 2022, 8:00am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/7 "2022-08-16T08:00:07Z")
Hi @Sheereen I'm sorry to hear you're running into issues. Is it possible for you to open a terminal as a non-root user and then run `yarn es snapshot` and `yarn start`? Elasticsearch restricts itself from being able to run as the root user. Building Kibana for the first time can take a while! It has to build bundles of all the plugins. One option, if you are not using or depending on `x-pack` plugins (like security) you can run `yarn start --oss` which only builds OSS plugins. ---
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [August 16, 2022, 8:02am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/8 "2022-08-16T08:02:59Z")
Hi, Thanks for the reply. I am trying as a non-root user now... after giving permissions to the folder in /root But the commands are taking quite some time... doing yarn kbn bootstrap now.... it has been going on for almost 30 mins now Is there any workaround to speed it up? ---
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [August 16, 2022, 8:03am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/9 "2022-08-16T08:03:56Z")
And... rather than using yarn es snapshot, can I connect kibana to ES service which I already have running?... by making corresponding changes in kibana.yml file ---
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [August 17, 2022, 1:52pm UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/10 "2022-08-17T13:52:46Z")
Hi I just created a demo HelloWorld plugin to know how things work. Thanks to that I can now understand your comment better 😄 So... I have to develop the plugin inside the kibana code itself right... inside plugins directory Because while developing the helloworld plugin... I found that it differs from writing a normal HelloWorld application in ReactJS. The binding of functions to this keyword, css , etc... So... I think the solution is to code my website from scratch inside the kibana code repo. Please correct me if I'm wrong. Thanks ---
**Author:** ![Sheereen](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sheereen/32/122005_2.png) [@Sheereen](https://discuss.elastic.co/u/Sheereen)\ **Post date:** [August 18, 2022, 11:30am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/11 "2022-08-18T11:30:21Z")
[Kibana Plugin API | Kibana Guide [master] | Elastic](https://www.elastic.co/guide/en/kibana/master/kibana-platform-plugin-api.html#:~:text=Kibana%20has%20three%20lifecycles%3A%20setup,been%20completed%20for%20all%20plugins). ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [September 15, 2022, 11:30am UTC](https://discuss.elastic.co/t/converting-react-js-website-to-kibana-plugin/311793/12 "2022-09-15T11:30:47Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.