Hot Reloading a Custom Widget written for WSO2 Stream Processor

Hot Reloading is keeping the widget running while injecting the new versions of the files we edit at run time. So we don’t lose the states in the app or have to restart the Stream Processor to see the changes we made.

This is how we set up the custom widget we create to reflect the changes we do, real time.

1. Insert the below script to the package.json of the widget

“build-dev”: “webpack -d — config webpack.config.js — watch — progress”

so it looks like this now

2. Now let have a dev build of the widget

npm run build-dev

3. If you follow the WSO2 Doc on creating a customer widget, your app will be built in the dist directory.

<WIDGET_ROOT>/dist

In dist you can see a folder with your widget name. If my widget name is HelloWorld, it’ll be

<WIDGET_ROOT>/dist/HelloWorld 

and it’ll contain the below files

HelloWorld 
- HelloWorld.js
- widgetConf.json

4. Well normally if you want to deploy the widget in WSO2 SP, you have to place the whole HelloWorld directory in

<SP_HOME>/wso2/dashboards/deployment/web-ui-apps/portal/extensions/widgets

Instead of copying the build directory(HelloWorld) with its content
we should create soft links for the files inside the build directory inside the Stream Processor.

Lets create a new directory in “widgets” to add out softlinks inside Stream Processor.

cd <SP_HOME>/wso2/dashboards/deployment/web-ui-apps/portal/extensions/widgets
mkdir HelloWorld
cd HelloWorld

Now create the softlinks for the build directoy content, in the above location

ln -s <WIDGET_ROOT>/dist/HelloWorld/widgetconf.json .
ln -s <WIDGET_ROOT>/dist/HelloWorld/HelloWorld.js .

5. Start WSO2 Stream Processor in dashboard runtime and your HelloWorld widget should be available.

Try changing the custom widget’s source code in <WIDGET_ROOT>/src/HelloWorld.js and saving.

You will notice every time you save, the widget would be updated with the changes you made.

Hope you find this small hack helpful :)