How to access environment variables in HTML of custom node

BShashwat · 13 January 2021 20:21

Hi,
How can I access environment variables which are being passed to Node red docker container via. shell script, in the HTML file of a custom node. In HTML file I need to make Ajax calls to get data from API that will be displayed in dropdown as shown below.

I tried $env('API_BASE_URL'), process.env.API_BASE_URL but it doesn't work. Flow and context are unavailable too. Kindly help.

RED.nodes.registerType('some node', { category: 'custom', color: '#a6bbcf', defaults: { name: { value: "" }, source: { value: "", required: true }, }, inputs: 1, outputs: 1, icon: "amazon.png", label: function () { return this.name || " : custom node"; }, oneditprepare: function () { var node = this; var source = node.source || []; const api_root = $env('API_BASE_URL'); const api_url = api_root + '/source/'; const token = JSON.parse(localStorage.getItem("auth-tokens"))["access_token"]; //var flowContext = this.context().flow; // var selectedOptionValue = flowContext.get('Id'); $.ajax({ url: api_url, type: 'GET', dataType: 'json', headers: { 'Content-Type': 'application/json;charset=utf-8', "Authorization": "Bearer " + token } }).done(function (json) { $.each(json["data"], function (i, option) { $('#node-input-source-select').append($('').attr("value", option.id).text(option.name)); }); }).fail(function (xhr) { // handle request failures var errorMessage = xhr.status + ': ' + xhr.statusText; console.log(errorMessage); valid = false; }); },

chiche · 15 January 2021 04:40

1. Must run NODE-RED with directive settings.js

    `node-red --settings {path to settings.js}`

2. Setting variable must correct name
Ex: dbc-custom set for color => dbcCustomColor
If has any variable incorrect name in setting.js => cannot load setting of node 

3. Must setting in 2 places:
In settings.js
`dbcCustomColor: true,`

In dbc-custom component

RED.nodes.registerType("dbc-custom", DbcCustomNode, {
	    settings: {
	        dbcCustomColor: {
	        value: false,
	        exportable: true,
	      }
	    },
	  });

4. Get value of setting variable
      RED.settings.dbcCustomColor (in html or js file is fine)

JGKK · 20 January 2021 08:10

Hello,
The html file code is the code that runs client side and not server side. So not necessarily even on the machine that nodered runs on but instead on the machine with the browser sandboxed in the browser you use to view the editor.
So to use any server side variables in the client side code of the html you would have to create an endpoint in your js file. You than call that endpoint from your html. The endpoint than includes the code to send back the needed information to the nodes edit dialogues html as a response.
This is also how you should retrieve informations from external apis (CORS policy). Create an endpoint in the js and do the request to the external api from there.
An example of how to setup an endpoint and use it can be found for example in the node-red-node-serialport s js:

github.com

node-red/node-red-nodes/blob/010669037ae13c2a90f56b1e172801fa5b305646/io/serialport/25-serial.js#L489


                catch(err) { }
                delete connections[port];
            }
            else {
                done();
            }
        }
    }
}());
RED.httpAdmin.get("/serialports", RED.auth.needsPermission('serial.read'), function(req,res) {
    serialp.list().then(
        ports => {
            const a = ports.map(p => p.path);
            res.json(a);
        },
        err => {
            res.json([RED._("serial.errors.list")]);
        }
    )
});

and html:

github.com

node-red/node-red-nodes/blob/010669037ae13c2a90f56b1e172801fa5b305646/io/serialport/25-serial.html#L397


$("#node-config-input-waitfor").on('blur', function () { $("#tip-waitfor").hide(); });
$("#node-config-input-addchar").on('focus', function () { $("#tip-addchar").show(); });
$("#node-config-input-addchar").on('blur', function () { $("#tip-addchar").hide(); });
try {
    $("#node-config-input-serialport").autocomplete( "destroy" );
} catch(err) {
}
$("#node-config-lookup-serial").click(function() {
    $("#node-config-lookup-serial").addClass('disabled');
    $.getJSON('serialports',function(data) {
        $("#node-config-lookup-serial").removeClass('disabled');
        var ports = data || [];
        $("#node-config-input-serialport").autocomplete({
            source:ports,
            minLength:0,
            close: function( event, ui ) {
                $("#node-config-input-serialport").autocomplete( "destroy" );
            }
        }).autocomplete("search","");
    });

Johannes

BShashwat · 15 January 2021 13:51

Cool... this looks like what I need. Will implement and get back. Many thanks for helping with the issue.