# How to hot-reload the modified contents (.html, .js, .css) automatically for the running Kibana instance?

**URL:** <https://discuss.elastic.co/t/how-to-hot-reload-the-modified-contents-html-js-css-automatically-for-the-running-kibana-instance/150723>\
**Category:** Kibana\
**Created:** [October 2, 2018, 3:25pm UTC](https://discuss.elastic.co/t/how-to-hot-reload-the-modified-contents-html-js-css-automatically-for-the-running-kibana-instance/150723 "2018-10-02T15:25:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hsluoyz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hsluoyz/32/35044_2.png) [@hsluoyz](https://discuss.elastic.co/u/hsluoyz)\
**Post date:** [October 2, 2018, 3:25pm UTC](https://discuss.elastic.co/t/how-to-hot-reload-the-modified-contents-html-js-css-automatically-for-the-running-kibana-instance/150723/1 "2018-10-02T15:25:03Z")

</div>

I want to modify the source code of Kibana, e.g., modify some .html or .js files. But I found when I refresh my Chrome browser, my update is not showing up in the browser. I found that the browser uses kibana.bundle.js instead of the .js source files. kibana.bundle.js is like a binary compiled from .js source files and contains no style format. I don't want to modify it.

I'm not familiar with how Kibana .js source files are compiled to kibana.bundle.js an where the configuration is. And it's not hot-reload. So can you tell me how to make Kibana hot-reload? So when I modify .js source files, my browser can show the difference, thanks!

---

<div class="post-metadata">

**Author:** ![thomasneirynck](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomasneirynck/32/23313_2.png) [@thomasneirynck](https://discuss.elastic.co/u/thomasneirynck)\
**Post date:** [October 2, 2018, 6:29pm UTC](https://discuss.elastic.co/t/how-to-hot-reload-the-modified-contents-html-js-css-automatically-for-the-running-kibana-instance/150723/2 "2018-10-02T18:29:05Z")

</div>

hi @hsluoyz,

Kibana needs to recompile the bundle.js files, so you will have to restart the Kibana-server.

---

<div class="post-metadata">

**Author:** ![hsluoyz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hsluoyz/32/35044_2.png) [@hsluoyz](https://discuss.elastic.co/u/hsluoyz)\
**Post date:** [October 3, 2018, 3:16am UTC](https://discuss.elastic.co/t/how-to-hot-reload-the-modified-contents-html-js-css-automatically-for-the-running-kibana-instance/150723/3 "2018-10-03T03:16:07Z")

</div>

@thomasneirynck thanks for your reply.

But restarting the server is so slow. I know for production-use, we show recompiling and packaging everything. But for development, I can't believe that even I change a single text in a page, I have to restart the server to see the effect.

For a large and complex system like Kibana, is this true that this is how Kibana is developed? Or are there any tricks to accelerate and smooth the development experience?

---

<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:** [October 31, 2018, 3:16am UTC](https://discuss.elastic.co/t/how-to-hot-reload-the-modified-contents-html-js-css-automatically-for-the-running-kibana-instance/150723/4 "2018-10-31T03:16:09Z")

</div>

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