Search code examples
javascriptnode-red

template node local library import

I have to setup a, most of the time, offline installation of Node-RED and need to use the "Chart.js" Library in a template node. Currently my working approach is to copy the Chart.js dictory to node-red-dashboard/dist/js and import it with <script src= "js/chart.js/dist/Chart.min.js"></script>. But when I want to update the dashboard I need to copy everything again. So it would be nice to have a permanent Solution for this.

I tryed two other approaches until now. For both I installed Chart.js to the .node-red dictory. First I tryed it like this:

var canvas = document.getElementById('myChart').getContext('2d');
var ChartJs = require('Chart.js');
var chart = new ChartJs(canvas, {... }

in a script tag (... stands for the working chart code that is not edited), but it didn't work aswell as to put functionGlobalContext: {chartjs:require('Chart.js')} into settings.js and change require('Chart.js') to global.get('chartjs')

Does anyone here has an Idea to solve this properly? Unfortunately the node throws no Error to the console so I don't get an idea whats wrong here.

Thanks in advance for every hint or solution,

manni

Solution

  • When I want to use any 3rd party charting library in my node-red dashboard, I put 2 ui_template nodes into my flow:

    1. under "Template Type" select the "Added to site <head> section" and add the link to the library's url:

      <script src="url/to/library.js"></script>

      (which in your offline case would be a local url)

    2. use the library's exported objects directly within the template, without using require, such as:

      <div id="myChart"></div>

<script>
    var canvas = document.getElementById('myChart').getContext('2d');
    var chart = new ChartJs(canvas, { ... }
</script>

    The trick is to have your local node-red instance serve the ChartJS library through a local url. For that, first add this require path line to the settings.js file, before the exports section:

    // The `https` setting requires the `fs` module. Uncomment the following
// to make it available:
var fs = require("fs");
var path = require ("path");

    then, uncomment the httpStatic section below that, within the exports:

    // When httpAdminRoot is used to move the UI to a different root path, the
// following property can be used to identify a directory of static content
// that should be served at http://localhost:1880/.
httpStatic: path.join(__dirname, 'public'),

    (you can use any directory name, in place of public) The __dirname references the node-red server's working directory, usually .node-red under your home directory.

    Create this new public directory, copy the ChartJS files under it, and restart node-red. At startup, you should see a line in the console log showing the path to your new static file location:

    5 Feb 12:12:23 - [info] Settings file  : C:\NODE\node_red_ui\settings.js
5 Feb 12:12:23 - [info] HTTP Static    : C:\NODE\node_red_ui\public
5 Feb 12:12:23 - [info] User directory : C:\NODE\node_red_ui

    Now you can serve the local file public\scripts\abc.js using the local url http://localhost:1880/scripts/abc.js This way, npm updates to the dashboard code will not overwrite your static files.