Need help understanding the code flow in kibana and also adding new libraries

Elastic Stack Kibana
1

Hi ,
I have been trying since a few days but I am unable to add new javascript charting libraries like c3.js . It would be great if you guys could help me in integrating new libraries with node NPM.

Also if I have made any changes to any internal js file like line_chart, I would like to know how is it getting bundled into a single file called kibana.bundle.js (what is bundling all the required code into this single file)?

2

For the most part, you shouldn't have to worry about how the bundling and optimization works in development. If you run the development server, you should still be able to view your changes in the browser's developer tools.

The build system is Webpack, and you can see the files that do the bundling and optimization magic inside the src/optimize directory.

Are you developing a plugin, or are you modifying core Kibana? The answer to your question about including new external dependencies will vary based on this.

3

Hi ,
Thanks for the reply. Right now I am trying to create new visualizations like scatter chart using C3.js. I am unable to view my changes until I delete the kiabana.bundle.js and rebuild it again by restarting the server. Is there a way to view the changes rapidly as and when i make changes to the front end js files?
(like bypassing the webpack bundling during the development stage)
It would be great if you help me on how to run the development server.

4

Gone through few of the issues in GitHub and realized that I can start dev server with --dev .
I have started the kibana server with dev flag (node src\cli --dev) with which I am able to view the changes of my source files. It takes around 21 sec for the lazy optimization process to complete after refreshing the page.

Wanted to know If there is any faster approach to do this as I would be making a lot of changes in the front end.

5

Yeah, running the Kibana server using this command should help you out:

npm start

Also, you can create a kibana.dev.yml file (copied from kibana.yml) which won't get added to version control, and you can add the following config settings to it to speed things up:

optimize:
  sourceMaps: '#cheap-source-map' # options -> http://webpack.github.io/docs/configuration.html#devtool
  unsafeCache: true
  lazyPrebuild: false

Hope that helps!