Hot reload during Kibans plugin Dec?

Elastic Stack Kibana
1

Hi all - is there a way to make the front-end / react hot reload during plugin development? Using the elastic & Kibans Dev environment hot reload only appears to work when the API portions of the project are modified, but not on the front end / react side. I'm using the standard 'yarn start' method for bringing Kibana up. This is true on both 7.5.0 and 7.6.0.

Also, is there a way to view better debugging? Sometimes when there are syntax errors in the react side, the console throws out of memory errors when truly the underlying issue is a syntactic issue - this makes debugging reaaaaly hard.

2

About the first part: By hot-reloading do you mean reloading the browser tab automatically when something changes? The dev server is detecting if frontend code changes and runs the compile step again, you just have to refresh your browser tab and it will run the changed code.

About the second part: Kibana is a really big project and it requires a lot of memory to run the Typescript compiler at that size. It sounds like the dev server is running into memory issues, can you follow these steps https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#increase-nodejs-heap-size and report back whether it gets better?

3

Hi @flash1293,

I can confirm what @tiburon_security said about hot realod.
Trying to apply some changes (simply modyfing a text of an EuiButton), reloading the browser I don't see reflect any changes.

Run my kibana istance using "yarn start" command.
When I reload the browser in fact, I don't see any new optimizations server side

I specify I'm using kibana 7.6.

With this problem is very hard to develop plugins :confused:

Thanks in advance,
Nicola

1 Like
4

Hey Flash,

Yeah hot reload / on the fly compilation in response to a code change is what I'm referring too. In 7.6.0 and 7.5.0 this doesn't seem to work. When I make a code change and refresh the browser, the code is not recompiled automatically to reflect those changes. When I make a change on the API side, the console running Kibana indicates that it detected a code change and begins the recompilation automatically - this does not happen when the change is made on the front-end side. This makes developing Kibana plugins a really terrible experience.

RE: weird errors, it looks like upping the RAM helped. Before, I was getting the memory errors even for REALLY simple syntactical issues (like console,log instead of console.log).

1 Like
5

I can't reproduce the reload-problem locally, does it also happen on master for you?

Also, what OS are you using?

6

I'm running this on Ubuntu Server 18.04 x64 via VirtualBox w/ 12GB RAM and 4vCPU's allocated. On a fresh instance I built the dev environment as follows:

    #!/bin/bash

    KIBANA_VERSION=7.6.0

    sudo apt-get update && apt-get install -y --no-install-recommends \
    	git \
    	bzip2 \
    	unzip \
    	xz-utils \
    	openjdk-11-jre 
    	
    echo "===> Installing nvm" \
    	&& sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash \
    	&& export NVM_DIR="$HOME/.nvm" \
    	&& [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" \
    	&& [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
    	
    echo "===> Installing yarn" \
    	&& curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - \
    	&& echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list \
    	&& sudo apt update && sudo apt install yarn -y
    	
    echo "===> Cloning Kibana" \
    	&& cd / \
    	&& sudo git clone --depth 1 -b v${KIBANA_VERSION} https://github.com/elastic/kibana.git

    echo "===> Fix Kibana Dir Permissions" \
    	&& sudo chown $USER:$USER /kibana/ -R

    echo "===> Installing NodeJS version required for Kibana" 
    	NODE_VERSION=$(</kibana/.nvmrc)
    	nvm install ${NODE_VERSION}

    echo "===> Installing elasticdump" \
    	&& yarn global add elasticdump

    echo "===> Building Kibana Environment" \
    	&& cd /kibana/ \
    	&& yarn kbn bootstrap

In my scenario, I have Kibana installed at the system root (i.e. /kibana).

I'm not entirely sure what you meant by 'does it happen on master?' but I assume you're asking whether it happens if I modify Kibana core UI code - quick answer is yes, it still doesn't hot reload. For this test, I navigated to the top level dir (/kibana) and fired up elasticsearch (yarn es snapshot), then I started kibana (yarn start) & the server comes up.

    server    log   [20:46:21.468] [info][server][Kibana][http] http server running at http://localhost:5603/iyk
    optmzr    log   [20:47:00.353] [info][optimize:dynamic_dll_plugin] No need to compile client vendors dll
    optmzr    log   [20:47:00.354] [info][optimize:dynamic_dll_plugin] Finished all dynamic dll plugin tasks
    optmzr    log   [20:47:00.357] [info][optimize] Optimization success in 60.68 seconds

I then modified the text on the homepage (/kibana/src/legacy/core_plugins/kibana/public/home/np_ready/components/home.js) from 'Manage and Administer the Elastic Stack' to 'Hi', saved the file on the server. There was no immediate change in the console (i.e. Kibana didn't inidicate that it observered a change and was recompiling). Refreshing the browser also did not trigger the recompliation, nor cause the text to change. Manually stopping the kibana server (ctrl+c in the console running it) and restarting (yarn start) obviously recompiles the code and the changes are visible via the browser.

This exact scenario is what happens when I modify plugins (for example in plugins/myplugin/public/components/main/main.js). I have to manually stop the kibana server and start it in order for changes to be reflected, which is obviously incredibly tedious and time consuming.

In contrast, when I edit in the API side, auto recompilation occurs:

restarting server due to changes in "plugins/srirachaiq_alerts/server/routes/example.js"

1 Like
7

To avoid this kind of problem, I created a React application (using create-react-app generator) and I installed in It @elastic/eui and other useful dependencies.

In this way, once I finisched at least the front-end, I can include the code inside the kibana plugin

At the moment I think It is the best to speed up the development...

1 Like
8

Sound workaround that I've also been considering... the only reason I've avoided doing this is because my plugin is leveraging various API's so I'd need to temporarily rewrite all the URL's in the dev environment. Not the worst thing in the world, but it'd be real nice if I could do all the work in the Kibana dev envrionment.

Thanks for the tip!

1 Like
9

Wow.....actually I've up an express instance. At this point getting your tip...so I could use the kibana plugin (only the server side) to manage routes...

Thx!.

I hope anyway this problem will be fixed in future... :frowning:

1 Like
10

Hey Nicolap, I think I might have accidentally found a fix. When I was going down the rabbit hole of just doing the dev work in a seperate create-react-app instance, I got an error upon yarn starting my new app: "error enospc system limit for number of file watchers reached." In fixing this, I followed this stackoverflow snippet:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p


After this I tried updating some text in my Kibana plugin out of curiosity and it immediately reloaded in the console:

optmzr    log   [20:44:38.926] [info][optimize:dynamic_dll_plugin] No need to compile client vendors dll
optmzr    log   [20:44:38.927] [info][optimize:dynamic_dll_plugin] Finished all dynamic dll plugin tasks
optmzr    log   [20:44:38.927] [info][optimize] Optimization success in 5.65 seconds

let me know if this works for you? If so we might be able to get it added to the dev guide for Kibana.

2 Likes
11

@tiburon_security It works !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

The time of optimize is around 10sec
It needs only a refresh of the page.... :smiley:

Thanks !

12

@Nicolap I'm glad it worked - you helped me accidentally stumble upon the fix! If you have more RAM available on your box follow flash's recommendation to up the RAM kibana uses, seems to have gotten my optimization time down.

@flash1293 how do we get a comment about upping inotify added to the dev documentation?

13

Thanks a lot for figuring this out - I guess I didn't have this problem because I'm on MacOS which doesn't limit the number of file watchers AFAIK.

Kibana is an open source project and accepts pull requests in Github - you can follow the general steps here: https://opensource.com/article/19/7/create-pull-request-github

Ping me once it's set up, I'll be glad to accept it and welcome another contributor :slight_smile:

1 Like
14

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