# Include js in dashboard custom widget frontend

**URL:** <https://discourse.nodered.org/t/include-js-in-dashboard-custom-widget-frontend/10451>\
**Category:** Dashboard\
**Created:** [23 April 2019 10:03 UTC](https://discourse.nodered.org/t/include-js-in-dashboard-custom-widget-frontend/10451 "2019-04-23T10:03:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)\
**Post date:** [23 April 2019 10:03 UTC](https://discourse.nodered.org/t/include-js-in-dashboard-custom-widget-frontend/10451/1 "2019-04-23T10:03:42Z")

</div>

I am writing a dashboard node and want include a script in frontend of dashboard. I can use script tag in HTML object. However this way required JS file must be in static folder or a cloud hosting so frontend can access.

if i distribute my widget, I must host my script for others to access or user must manual copy js file to static folder, none is good.

So anyone know how to include js in frontend of dashboard where js file in node module folder. The structure below. Tks for any help

Widget folder  
——widget.html  
——widget.js  
——my-script-need-to-include-frontend.js

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 April 2019 12:32 UTC](https://discourse.nodered.org/t/include-js-in-dashboard-custom-widget-frontend/10451/2 "2019-04-23T12:32:06Z")

</div>

Nodes run inside the context of Node-RED which actually uses 2 ExpressJS web server "apps". In your case, you want to add a path (ExpressJS middleware) to the user-facing app that is also used by the http-in/-out and Dashboard (and uibuilder) nodes.

You will find some example code in the uibuilder node amongst others.

---

<div class="post-metadata">

**Author:** ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)\
**Post date:** [24 April 2019 16:46 UTC](https://discourse.nodered.org/t/include-js-in-dashboard-custom-widget-frontend/10451/3 "2019-04-24T16:46:02Z")

</div>

Could you explain more, or help me with sample code. I still not figure out how to do.

Tks a lot

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [24 April 2019 18:22 UTC](https://discourse.nodered.org/t/include-js-in-dashboard-custom-widget-frontend/10451/4 "2019-04-24T18:22:51Z")

</div>

Hi Zacharias,

You can have a look at the code of my [node-red-contrib-ui-heatmap](https://github.com/bartbutenaers/node-red-contrib-ui-heatmap/blob/master/heat_map.js) node. In that node I load a (third-party) javascript library from the server (where the Node-RED flow is running), and I also don't want users have to install anything manually...

1. I have a javascript **library** file (heatmap.min.js) located inside a "_lib_" **folder** :

2. On the server side a **raw HTML** string will be generated (which contains the html part for the **client-side** dashboard). In that code I generate a **script** tag to load that javascript library file:

3. And there is some **server-side** code to respond to the request (from point 2), and return the requested javascript library file:

Good luck with it !!!  
Bart

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 April 2019 19:28 UTC](https://discourse.nodered.org/t/include-js-in-dashboard-custom-widget-frontend/10451/5 "2019-04-24T19:28:28Z")

</div>

Here is where I get a reference to the web server app:

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/v2/nodes/uibuilder.js#L239>

Here is an example of adding a folder as a static folder to the web server. In uibuilder there are a number of these but this is the main one:

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/v2/nodes/uibuilder.js#L487-L502>

Anything you add as a path, you need to remove during the "close" event.

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/v2/nodes/uibuilder.js#L703>

  

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/v2/nodes/uiblib.js#L75>

---

<div class="post-metadata">

**Author:** ![linhtranvu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/linhtranvu/32/30053_2.png) [@linhtranvu](https://discourse.nodered.org/u/linhtranvu)\
**Post date:** [25 April 2019 17:23 UTC](https://discourse.nodered.org/t/include-js-in-dashboard-custom-widget-frontend/10451/6 "2019-04-25T17:23:26Z")

</div>

Tks alot for your help. I will try now