# Port existing js app to kibana plugin

**URL:** <https://discuss.elastic.co/t/port-existing-js-app-to-kibana-plugin/105119>\
**Category:** Kibana\
**Created:** [October 24, 2017, 7:21pm UTC](https://discuss.elastic.co/t/port-existing-js-app-to-kibana-plugin/105119 "2017-10-24T19:21:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![blueemerald](https://avatars.discourse-cdn.com/v4/letter/b/43a26b/32.png) [@blueemerald](https://discuss.elastic.co/u/blueemerald)\
**Post date:** [October 24, 2017, 7:21pm UTC](https://discuss.elastic.co/t/port-existing-js-app-to-kibana-plugin/105119/1 "2017-10-24T19:21:12Z")

</div>

We have an existing web-application that is self contained. It makes restful calls to a service we have developed and the service then makes all the elastic search calls and returns json back to the web-app.

We want to bundle the web-app into a kibana plugin. All of the javascript code in this app is not node.js type javascript, but rather, object-based, like this:

//////////////////////////////////////////////////////////////////////////  
AbstractView.prototype = Object.create(AbstractApplicationComponent.prototype);  
AbstractView.prototype.constructor = AbstractView;  
/\*\*

- Abstract class to define structure for arbitrary UI elements. Inherits from AbstractApplicationComponent.  
\*/  
function AbstractView(containerSelector, componentSelectors) {  
// Inheritance.  
AbstractApplicationComponent.call(this);

// Members.  
this.\_containerSelector = containerSelector ? containerSelector : document.createElement("div");  
this.\_selectors = componentSelectors ? componentSelectors : {};

this.\_verifySelectors(); // Verify the provided selectors.  
}

AbstractView.prototype.\_verifySelectors = function() {  
if ($(this.\_containerSelector).length == 0) {  
this.\_logWarning("Parent container '" + this.\_containerSelector + "' could not be found on the page.");  
}

for (var name in this.\_selectors) {  
if ($(this.\_selectors[name]).length == 0) {  
this.\_logWarning("Selector '" + name + "' was provided as '" + this.\_selectors[name] + "' but could not be found on the page.");  
}  
}  
};

AbstractView.prototype.getContainerSelector = function() {  
return this.\_containerSelector;  
};  
////////////////////////////////////////////

In my app.js

I am doing many imports to bring in all the existing code, like this:

import './js/dragonfly/Core/ApplicationEvents.js';  
import './js/dragonfly/Core/AbstractApplicationProperties.js';  
import './js/dragonfly/Core/AbstractApplication.js';  
...

But I find once I start kibana, and click on my new plugin "app" I get these kind of errors:

Uncaught ReferenceError: AbstractPubSub

My question(s) are.

. how do I import this existing code so I don't get the ReferenceErrors ?

. and am I even on the right track attempting to bring my existing non-node.js code into kibana like this ?

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [October 25, 2017, 1:21pm UTC](https://discuss.elastic.co/t/port-existing-js-app-to-kibana-plugin/105119/2 "2017-10-25T13:21:56Z")

</div>

Hi,

_(Hint: You can use triple backticks ``` around your code to format it as code.)_

In general a plugin in Kibana consists of two different parts of JS code. It has node.js server code (e.g. in the `index.js` within the plugin), that will execute on the server, and it has code, that is delivered to the frontend in a folder called `public` within your plugin.

I would recommend looking at some existing plugins, to check how to load that code, in the Frontend.  
Usually you either want to have your self contained app running as a visualization (a simple visualization plugin can be found here: [https://github.com/elastic/kibana/tree/master/src/core\_plugins/tagcloud](https://github.com/elastic/kibana/tree/master/src/core_plugins/tagcloud)) or as an application (i.e. having it's own entry in the navigation on the left and be it's complete own view), e.g. look at [timelion](https://github.com/elastic/kibana/blob/master/src/core_plugins/timelion/index.js).

Basically you have to specify `uiExports` and tell it what parts your application contains.

Cheers,  
Tim

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 22, 2017, 1:21pm UTC](https://discuss.elastic.co/t/port-existing-js-app-to-kibana-plugin/105119/3 "2017-11-22T13:21:58Z")

</div>

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