# Import JavaScript library into node-red

**URL:** https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665
**Category:** Dashboard
**Created:** [6 February 2019 15:45 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665 "2019-02-06T15:45:40Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![abra](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/abra/32/3443_2.png) [@abra](https://discourse.nodered.org/u/abra)
#### Post date: [6 February 2019 15:45 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/1 "2019-02-06T15:45:40Z")

</div>

Can somebody please explain how can a third party plugin library like for instance Chart.js be locally installed into node-red? If I download Chart.js from github I get actually a Chart.js-master root directory with a lot of subdirectories and files. Do I have to copy everything into the node-red installation directory ?  
I would like to use some charts from Chart.js into a UI template.

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [6 February 2019 15:50 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/2 "2019-02-06T15:50:05Z")

</div>

Hi @abra

If you want to use third party libraries as part of your node-red dashboard then you need to:

1. copy those libraries to a directory of your choosing
2. set `httpStatic` in your node-red settings file to point at that directory.

The node-red runtime will then serve the files from the directory.

You can then add the appropriate `<script>` and `<style>` tags to a ui\_template node in order to load that content into your dashboard.

For example,

1. create a directory called `/home/user/node-red-static/charts/`
2. copy all of the chart.js content into that directory - lets assume that includes a file called `chart.js`.
3. set `httpStatic` in your settings file to `/home/user/node-red-static`
4. restart Node-RED
5. check you can load `http://localhost:1880/charts/chart.js` in your browser.

In your ui\_template you'd need:

```auto
<script src="http://localhost:1880/charts/chart.js"></script>

```

Of course, you'll have to refer to the chart.js documentation to understand exactly what files need including in your html page.

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [6 February 2019 16:16 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/3 "2019-02-06T16:16:26Z")

</div>

I think you only need the file referenced in the readme `dist/Chart.min.js` (or the similar one with moment included), which you can find in the Releases section on github [https://github.com/chartjs/Chart.js/releases](https://github.com/chartjs/Chart.js/releases)

---

<div class="post-metadata">

### Author: ![mvargasevans](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mvargasevans/32/7990_2.png) [@mvargasevans](https://discourse.nodered.org/u/mvargasevans)
#### Post date: [1 May 2019 08:10 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/4 "2019-05-01T08:10:41Z")

</div>

Hello everyone,

I have been struggling with adding third party libraries such as chart.js and Leaflet.  
So far I have been loading them directly from the source, instead of having them locally as this post indicates.

After searching, I am still not able to solve this one.  
Is there a known way to import scripts and have the node to wait for libraries to be loaded?

Regards

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [1 May 2019 08:41 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/5 "2019-05-01T08:41:38Z")

</div>

You can put the library in a folder such as `.node-red/static`, then in `settings.js` set `httpStatic` to the full path to that folder, for example  
`httpStatic: '/home/pi/.node-red/static/',`  
then the library can be accessed via  
`http://localhost:1880/libraryname.js`  
or possibly just as `libraryname.js`, I am not sure about that.  
There may well be alternatives, in which case someone else will point that out.

You may still have to make sure that you wait for it to loaded in your page, depending on what you are doing with it. It should load much quicker than across the internet, but it will still take time.

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [1 May 2019 10:25 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/6 "2019-05-01T10:25:10Z")

</div>

Here is a sample flow using chart.js so you can see how it was used.[https://gist.github.com/juggledad/d1b9f2c606e536ce4a3960abcd887754](https://gist.github.com/juggledad/d1b9f2c606e536ce4a3960abcd887754)

---

<div class="post-metadata">

### Author: ![mvargasevans](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mvargasevans/32/7990_2.png) [@mvargasevans](https://discourse.nodered.org/u/mvargasevans)
#### Post date: [1 May 2019 13:38 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/7 "2019-05-01T13:38:01Z")

</div>

Thanks both.  
Clear now 🙂

---

<div class="post-metadata">

### Author: ![Miliks](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/miliks/32/7598_2.png) [@Miliks](https://discourse.nodered.org/u/Miliks)
#### Post date: [17 May 2019 13:28 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/8 "2019-05-17T13:28:21Z")

</div>

Hi @knolleary, i was trying to create a flow with the node able to get notification on changes using SSE technology. I created a function node and added the script

`var source = new EventSource("http://localhost:8080/api/2/things?ids=smart:factory_lwb"); source.onmessage = function(msg) { console.log('recieved: ' + msg.data); };`  
i have a node modules for eventsource installed in node-red (at least i can see the folder with this name in the .node-red/node-modules directory. But when i start the flow i get the following error:

> function : (error)  
> "ReferenceError: EventSource is not defined (line 4, col 14)"

when i run this short script odirectly in terminal i need to add the line: var EventSource = require("eventsource"); othrwise i'm getting hte same error, but adding the same line in node-red i'm getting an error:` function : (error) "ReferenceError: require is not defined (line 3, col 19)"`  
import giving me the same error.

Could you please help me to undestand what i'm doing wrong?  
Thanks a lot in advance,  
Mila

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [17 May 2019 13:30 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/9 "2019-05-17T13:30:33Z")

</div>

Hi @Miliks

installing a node module does not make it automatically available to the Function node.

The docs show the additional steps you have to do through: [https://nodered.org/docs/writing-functions#loading-additional-modules](https://nodered.org/docs/writing-functions#loading-additional-modules)

Nick

---

<div class="post-metadata">

### Author: ![Miliks](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/miliks/32/7598_2.png) [@Miliks](https://discourse.nodered.org/u/Miliks)
#### Post date: [17 May 2019 16:10 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/10 "2019-05-17T16:10:45Z")

</div>

Thank you very much for your response, it was really helpful!  
So i put the following code into the function node:

```auto
msg.options = [];
var EventSource = global.get('oseventsource');
var source = new EventSource("http://localhost:8080/api/2/things?ids=smart:factory_lwb");
source.onmessage = function(msgs) {
msg.options.push(msgs.data);    
};
msg.payload = msg.options;
return msg;

```

and from the syntax point of view everything fine, but the array returned (i print it into the debug pannel) is empty. Is there something wrong with the server side where messages are generated or there is some error in the message payload assignment?  
Could you please take a look?  
Thanks again,  
Mila

---

<div class="post-metadata">

### Author: ![moebius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moebius/32/2872_2.png) [@moebius](https://discourse.nodered.org/u/moebius)
#### Post date: [17 May 2019 16:21 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/11 "2019-05-17T16:21:15Z")

</div>

You have to use node.send() inside the callback to get the values...

---

<div class="post-metadata">

### Author: ![Miliks](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/miliks/32/7598_2.png) [@Miliks](https://discourse.nodered.org/u/Miliks)
#### Post date: [17 May 2019 16:26 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/12 "2019-05-17T16:26:18Z")

</div>

Could you please explain what do u mean?

---

<div class="post-metadata">

### Author: ![moebius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/moebius/32/2872_2.png) [@moebius](https://discourse.nodered.org/u/moebius)
#### Post date: [17 May 2019 17:06 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/13 "2019-05-17T17:06:42Z")

</div>

Maybe you could search for "node.send" on the same page Nick gave you? Or maybe "callback"?

A little activity (like reading the basic docs or using search and / or google) before, would help us all 🙂

---

<div class="post-metadata">

### Author: ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [17 May 2019 17:10 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/14 "2019-05-17T17:10:29Z")

</div>

The function as you have it will return immediately, before onmessage gets called, so you need to build the message inside the onmessage function and then use node.send to send it. Note though that there will only ever be one entry in the array if you do it like that. If you want to build a complete array then you will need some way of knowing when the last one arrives and wait till then to send it.  
You also need `return null` (or no `return` at all) at the end of your function so it doesn't send anything immediately.

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [17 May 2019 18:07 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/15 "2019-05-17T18:07:09Z")

</div>

> [@Miliks](#):
>
> i was trying to create a flow with the node able to get notification on changes using SSE technology.

Did you consider using the existing SSE node for that purpose ?

> [@\[ANNOUNCE\] node-red-contrib-sse-client](https://discourse.nodered.org/t/announce-node-red-contrib-sse-client/1025):
>
> Hi folks, A couple of weeks ago there was a [topic](https://discourse.nodered.org/t/http-response-not-receiving-data/521) on this forum about listening to an SSE stream (Server Sent Events). Seemed that there was no real SSE client available in Node-Red, so I decided to create [node-red-contrib-sse-client](https://github.com/bartbutenaers/node-red-contrib-sse-client). Will publish it to NPM in a couple of days. Until then it can be installed directly from my Github account: npm install bartbutenaers/node-red-contrib-sse-client All 'constructive' feedback is more than welcome ! P.S. I have a minor CSS issue. My config scr…

---

<div class="post-metadata">

### Author: ![Miliks](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/miliks/32/7598_2.png) [@Miliks](https://discourse.nodered.org/u/Miliks)
#### Post date: [18 May 2019 13:13 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/16 "2019-05-18T13:13:13Z")

</div>

Thanks for the suggestion, i didn't know about this specific node. I tryed it out, but i'm getting the 401 error during deployment phase. The URL i'm trying to get notification about is password protected, so i added the header to the form as on image attached. Do i miss something or there some problem with the url i'm trying to work with? using REST client i'm getting this encoding of the username/password, so i suppose they are correct.

 ![immagine](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0c70f62f96580d0086eca439aa5a791f7bf33aed.png)

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [18 May 2019 14:10 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/17 "2019-05-18T14:10:37Z")

</div>

You say it works using REST client, then I suggest doing a test where you configure the authentication in the msg headers.

The doc for the node says:

> When the Http headers are not specified in the config screen, they can be specified in the `msg.headers` field.

If it fails then you may try to troubleshoot using a tool that Nick mentioned in an earlier post : [https://requestbin.fullcontact.com/](https://requestbin.fullcontact.com/)

---

<div class="post-metadata">

### Author: ![Miliks](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/miliks/32/7598_2.png) [@Miliks](https://discourse.nodered.org/u/Miliks)
#### Post date: [20 May 2019 08:55 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/18 "2019-05-20T08:55:43Z")

</div>

Dear @Andrei, thanks for the suggestion, i'll try it out.  
I think the problem however is somehow related to the missing argument in the interpretation of the node definition. If you see the information screen of the sse-client node u can see what the partHeaders is empty, unless i use the wrong syntax, but from the list of HTTP headers it looks the correct (i tryed with quotation marks and without). Moreover, when i'm changing something in this field the Deploy button is not getting updated, so it looks like this parameters are not considered at all. Any thoughts?  
Thanks a lot!

 ![immagine](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/64f8fffcf1258b04ed787382634e056a8531628a.png)

---

<div class="post-metadata">

### Author: ![Miliks](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/miliks/32/7598_2.png) [@Miliks](https://discourse.nodered.org/u/Miliks)
#### Post date: [20 May 2019 10:59 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/19 "2019-05-20T10:59:55Z")

</div>

I tryed also to define in the change node parameters of the request as you suggested, but still 401 error on deployment phase.

 ![immagine](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d1b5b11c03003c5bc24a407fe12938ad3d17fb0e.png)

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [20 May 2019 14:47 UTC](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/20 "2019-05-20T14:47:05Z")

</div>

> [@Miliks](#):
>
> I tryed also to define in the change node parameters of the request as you suggested, but still 401 error on deployment phase.

The config you tried with the change node for the http header is not correct. I suggest using a function node instead.

Please remove the http header information from the `SSE node` (leave empty) and add a function node configured like below in front of the `SSE node`

Just replace YOUR\_ACCESS\_TOKEN, of course

```auto

msg.headers = {};
msg.headers['Authorization'] = "Basic "+ "YOUR_ACCESS_TOKEN"
return msg;

```

[Next page](https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665.md?page=2)
