@gregoriusrippenstein/node-red-contrib-nodedev 0.1.2 → 0.1.3

package/examples/config-node-with-sidebar.json

@@ -0,0 +1,113 @@
+[
+    {
+        "id": "e68c8450d6e047e6",
+        "type": "NpmTarBall",
+        "z": "5644e181ee8af639",
+        "name": "",
+        "x": 905,
+        "y": 656,
+        "wires": [
+            [
+                "ddb9e4e7ca9e2797"
+            ]
+        ]
+    },
+    {
+        "id": "ddb9e4e7ca9e2797",
+        "type": "NodeRedInstall",
+        "z": "5644e181ee8af639",
+        "name": "",
+        "x": 983,
+        "y": 710,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "6f04b8605d139351",
+        "type": "group",
+        "z": "5644e181ee8af639",
+        "name": "Step 1: Generate the missing nodes",
+        "style": {
+            "label": true
+        },
+        "nodes": [
+            "4f2e91f3e9fa51b7"
+        ],
+        "x": 326,
+        "y": 562,
+        "w": 232,
+        "h": 82
+    },
+    {
+        "id": "4f2e91f3e9fa51b7",
+        "type": "NodeFactory",
+        "z": "5644e181ee8af639",
+        "g": "6f04b8605d139351",
+        "name": "",
+        "nodename": "Fubar",
+        "color": "#FFF0F0",
+        "hasbutton": true,
+        "hasinput": true,
+        "outputcount": 1,
+        "category": "snafu",
+        "summary": "Summary",
+        "description": "Description",
+        "icon": "font-awesome/fa-venus-double",
+        "frt2bakcomm": false,
+        "bak2frtcomm": false,
+        "createmanifest": true,
+        "isplugin": true,
+        "x": 422,
+        "y": 603,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "a599fd3ebf69cdb1",
+        "type": "group",
+        "z": "5644e181ee8af639",
+        "name": "Step 2: Connect and installing to Node-RED",
+        "style": {
+            "label": true
+        },
+        "nodes": [
+            "b45307819c625e63"
+        ],
+        "x": 326,
+        "y": 232,
+        "w": 284,
+        "h": 82
+    },
+    {
+        "id": "b45307819c625e63",
+        "type": "NodeDevOps",
+        "z": "5644e181ee8af639",
+        "g": "a599fd3ebf69cdb1",
+        "name": "",
+        "pname": "@johnsmith/fubar-node",
+        "pversion": "0.0.1",
+        "pauthorname": "Alfred E. Neumann",
+        "pauthoremail": "alfred@example.com",
+        "pdescription": "Fubar nods.",
+        "noderedinstall": true,
+        "randompackagename": true,
+        "gitcommit": false,
+        "gitcheckforchange": false,
+        "githubowner": "",
+        "githubrepo": "",
+        "githubbranch": "main",
+        "githubauthor": "",
+        "githubauthoremail": "",
+        "githubmessage": "",
+        "npmpublish": false,
+        "npmunpublish": false,
+        "npmotp": "",
+        "x": 442,
+        "y": 273,
+        "wires": [
+            []
+        ]
+    }
+]

package/nodes/05-node-dev-ops.html

@@ -47,20 +47,23 @@
     defaults: {
       name: { value:"" },
 
-      pname: { value: "", required: true },
-      pversion: { value: "", required: true },
+      pname:        { value: "", required: true },
+      pversion:     { value: "", required: true },
+      pauthorname:  { value: "", required: true },
+      pauthoremail: { value: "", required: true },
+      pdescription: { value: "", required: true },
 
       noderedinstall: { value: false },
       randompackagename: { value: false },
 
-      gitcommit: { value: false },
+      gitcommit:         { value: false },
       gitcheckforchange: { value: false },
-      githubowner: { value: ""},
-      githubrepo: { value: ""},
-      githubbranch: { value: "main"},
-      githubauthor: { value: ""},
+      githubowner:       { value: ""},
+      githubrepo:        { value: ""},
+      githubbranch:      { value: "main"},
+      githubauthor:      { value: ""},
       githubauthoremail: { value: "" },
-      githubmessage: { value: "" },
+      githubmessage:     { value: "" },
 
       npmpublish: { value: false },
       npmunpublish: { value: false },
@@ -196,6 +199,21 @@
     <input type="text" id="node-input-pversion" placeholder="0.0.1"/>
   </div>
   
+  <div class="form-row">
+    <label for="node-input-pauthorname" style="min-width: 250px;"><i class="fa fa-address-book-o"></i> Package Author Name</label>
+    <input type="text" id="node-input-pauthorname" placeholder="Alfred E. Neumann"/>
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-pauthoremail" style="min-width: 250px;"><i class="fa fa-envelope-o"></i> Package Author Email</label>
+    <input type="text" id="node-input-pauthoremail" placeholder="joe.blog@example.com"/>
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-pdescription" style="min-width: 150px;"><i class="fa fa-book"></i> Package Description</label>
+    <input type="text" id="node-input-pdescription" placeholder="Package description"/>
+  </div>
+
   <hr/>
 
   <div class="form-row">
@@ -248,15 +266,15 @@
 
   <div id="github-options">
     <div class="form-row">
-      <label for="node-input-githubowner" style="min-width: 150px;"><i class="fa fa-tag"></i> GitHub Username</label>
+      <label for="node-input-githubowner" style="min-width: 150px;"><i class="fa fa-user-o"></i> GitHub Username</label>
       <input type="text" id="node-input-githubowner" placeholder="username"/>
     </div>
     <div class="form-row">
-       <label for="node-input-githubrepo" style="min-width: 150px;"><i class="fa fa-tag"></i> Repository</label>
+       <label for="node-input-githubrepo" style="min-width: 150px;"><i class="fa fa-paw"></i> Repository</label>
        <input type="text" id="node-input-githubrepo" placeholder=""/>
     </div>
     <div class="form-row">
-       <label for="node-input-githubbranch" style="min-width: 150px;"><i class="fa fa-tag"></i> Branch</label>
+       <label for="node-input-githubbranch" style="min-width: 150px;"><i class="fa fa-tree"></i> Branch</label>
        <input type="text" id="node-input-githubbranch" placeholder="main"/>
     </div>
   </div>
@@ -267,11 +285,11 @@
       <input type="text" id="node-input-githubmessage" placeholder="Initial Commit"/>
     </div>
     <div class="form-row">
-      <label for="node-input-githubauthor" style="min-width: 150px;"><i class="fa fa-tag"></i> Author Name</label>
+      <label for="node-input-githubauthor" style="min-width: 150px;"><i class="fa fa-address-book-o"></i> Author Name</label>
       <input type="text" id="node-input-githubauthor" placeholder="Joe Blog"/>
     </div>
     <div class="form-row">
-      <label for="node-input-githubauthoremail" style="min-width: 150px;"><i class="fa fa-tag"></i> Author Email</label>
+      <label for="node-input-githubauthoremail" style="min-width: 150px;"><i class="fa fa-envelope-o"></i> Author Email</label>
       <input type="text" id="node-input-githubauthoremail" placeholder="joe@spreads-the.love"/>
     </div>
   </div>

package/nodes/10-node-factory.html

@@ -47,7 +47,7 @@
     <div class="form-row">
         <label for="node-input-summary">
           <i class="fa fa-tag"></i>
-          <span>Summary</span>
+          <span>Summary (REQUIRED)</span>
         </label>
         <div style="height: 150px; min-height:150px; max-height: 150px;" class="node-text-editor" id="node-input-summary">
         </div>
@@ -56,12 +56,19 @@
     <div class="form-row">
         <label for="node-input-description">
               <i class="fa fa-tag"></i>
-              <span>Description</span>
+              <span>Description (REQUIRED)</span>
             </label>
         <div style="height: 350px; min-height:350px; max-height: 350px;" class="node-text-editor" id="node-input-description">
         </div>
     </div>
 
+    <div class="form-row">
+        <label for="node-input-isplugin" style="min-width: 250px;">
+                    <span>Plugin: Sidebar + Config?</span>
+                </label>
+        <input type="checkbox" id="node-input-isplugin" style="display:inline-block; width:15px; vertical-align:baseline;">
+    </div>
+    
     <div class="form-row">
         <label for="node-input-frt2bakcomm" style="min-width: 250px;">
                 <span>Frontend to Backend communication?</span>
@@ -119,7 +126,9 @@
         
         data["color"]       = $('#node-input-colour').val();
         data["icon"]        = $('#red-ui-editor-node-icon').val();
+        data["iconclass"]   = "fa " + data["icon"].split("/")[1]; /* Assume font-awesomeness */
         data["name"]        = $('#node-input-nodename').val();
+        data["namelwr"]     = data["name"].toLowerCase();
         data["outputcount"] = $('#node-input-outputcount').val();
         data["category"]    = $('#node-input-category').val();
 
@@ -128,7 +137,8 @@
         data["bak2frtcomm"]    = $('#node-input-bak2frtcomm').is(":checked");
         data["frt2bakcomm"]    = $('#node-input-frt2bakcomm').is(":checked");
         data["createmanifest"] = $('#node-input-createmanifest').is(":checked");
-        
+        data["isplugin"]       = $('#node-input-isplugin').is(":checked");
+
         data["__task"]      = "generate_from_templates";
                 
         $.ajax({
@@ -177,19 +187,20 @@
         color: "#e5e4ef",
         category: 'nodedev',
         defaults: {
-            name: { value: "" },
-            nodename: { value: "" },
-            color: { value: "#e5e4ef" },
-            hasbutton: { value: false },
-            hasinput: { value: true },
-            outputcount: { value: 1 },
-            category: { value: "" },
-            summary: { value: ""},
-            description: { value: ""},
-            icon: { value: "font-awesome/fa-industry" },
-            frt2bakcomm: { value: false },
-            bak2frtcomm: { value: false },
-            createmanifest: { value: false }
+            name:           { value: "" },
+            nodename:       { value: "", required: true },
+            color:          { value: "#e5e4ef" },
+            hasbutton:      { value: false },
+            hasinput:       { value: true },
+            outputcount:    { value: 1 },
+            category:       { value: "" },
+            summary:        { value: "", required: true },
+            description:    { value: "", required: true },
+            icon:           { value: "font-awesome/fa-industry" },
+            frt2bakcomm:    { value: false },
+            bak2frtcomm:    { value: false },
+            createmanifest: { value: false },
+            isplugin:       { value: false },
         },
         inputs: 1,
         outputs: 1,

package/nodes/10-node-factory.js

@@ -165,62 +165,137 @@ module.exports = function (RED) {
         });
     }
 
-    function convertToPkgFileNodes(msg, jsCtnt, htmlCtnt) {
-        var allNodes = [];
-
-        var secondId = RED.util.generateId();
-
-        allNodes.push({
-            id: RED.util.generateId(),
-            type: "PkgFile",
-            name: msg.node.name + ".js",
-            filename: "nodes/" + msg.node.name.toLowerCase() + ".js",
-            template: jsCtnt,
-            syntax: "mustache",
-            format: "javascript",
-            output: "str",
-            x: 100,
-            y: 50,
-            wires: [[secondId]]
+    function createPluginNodeDefintions(msg, node) {
+        var sidebarHtmlPath = path.join(__dirname, 'templates', 'tmplsidebar.html');
+        var nodeJsPath = path.join(__dirname, 'templates', 'tmplsidebarnode.js');
+        var nodeHtmlPath = path.join(__dirname, 'templates', 'tmplsidebarnode.html');
+
+        var content = {};
+
+        var promises = [
+            handleTemplate(msg, node, fs.readFileSync(sidebarHtmlPath, 'utf8')).then((c) => { content["sbht"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(nodeJsPath, 'utf8')).then((c) => { content["ndjs"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(nodeHtmlPath, 'utf8')).then((c) => { content["ndht"] = c }),
+        ];
+
+        return Promise.all(promises).then(() => {
+            var secondId = RED.util.generateId();
+            var thirdId = RED.util.generateId();
+
+            return [{
+                id: RED.util.generateId(),
+                type: "PkgFile",
+                name: msg.node.name + "Cfg.js",
+                filename: "nodes/" + msg.node.namelwr + ".js",
+                template: content["ndjs"],
+                syntax: "mustache",
+                format: "javascript",
+                output: "str",
+                x: 100,
+                y: 50,
+                wires: [[secondId]]
+            },
+
+            {
+                id: secondId,
+                type: "PkgFile",
+                name: "Sidebar: " + msg.node.name + ".html",
+                filename: "plugins/" + msg.node.namelwr + ".html",
+                template: content["sbht"],
+                syntax: "mustache",
+                format: "html",
+                output: "str",
+                x: 100,
+                y: 100,
+                wires: [[thirdId]]
+            },
+
+            {
+                id: thirdId,
+                type: "PkgFile",
+                name: msg.node.name + "Cfg.html",
+                filename: "nodes/" + msg.node.namelwr + ".html",
+                template: content["ndht"],
+                syntax: "mustache",
+                format: "html",
+                output: "str",
+                x: 100,
+                y: 150,
+                wires: [[]]
+            }]
         })
+    }
+
+    function createSimpleNodeDefintions(msg,node) {
+        var htmlPath = path.join(__dirname, 'templates', 'tmpl.html');
+        var jsPath = path.join(__dirname, 'templates', 'tmpl.js');
+
+        var content = {};
 
-        allNodes.push({
-            id: secondId,
-            type: "PkgFile",
-            name: msg.node.name + ".html",
-            filename: "nodes/" + msg.node.name.toLowerCase() + ".html",
-            template: htmlCtnt,
-            syntax: "mustache",
-            format: "html",
-            output: "str",
-            x: 100,
-            y: 100,
-            wires: [[]]
+        var promises = [
+            handleTemplate(msg, node, fs.readFileSync(htmlPath, 'utf8')).then((c) => { content["html"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(jsPath, 'utf8')).then((c) => { content["jasc"] = c }),
+        ];
+
+        return Promise.all(promises).then(() => {
+            var secondId = RED.util.generateId();
+
+            return [{
+                id: RED.util.generateId(),
+                type: "PkgFile",
+                name: msg.node.name + ".js",
+                filename: "nodes/" + msg.node.namelwr + ".js",
+                template: content["jasc"],
+                syntax: "mustache",
+                format: "javascript",
+                output: "str",
+                x: 100,
+                y: 50,
+                wires: [[secondId]]
+            },
+
+            {
+                id: secondId,
+                type: "PkgFile",
+                name: msg.node.name + ".html",
+                filename: "nodes/" + msg.node.namelwr + ".html",
+                template: content["html"],
+                syntax: "mustache",
+                format: "html",
+                output: "str",
+                x: 100,
+                y: 100,
+                wires: [[]]
+            }]
         })
+    }
 
-        return allNodes;
+    function createNodeDefintions(msg, node) {
+        if ( msg.node.isplugin ) {
+            return createPluginNodeDefintions(msg, node)
+        } else {
+            return createSimpleNodeDefintions(msg, node)
+        }
     }
 
     function createManifestFiles(msg, node, nodeDefinitions) {
-        /* ASSUMPTION: assume the .js file is defined first and 
-        then the .html file in the node definitions */
-
         var packageJsonPath = path.join(__dirname, 'templates', 'tmplpackage.json');
         var readmePath = path.join(__dirname, 'templates', 'tmplreadme.md');
         var licensePath = path.join(__dirname, 'templates', 'tmpllicense');
 
-        var pkjsTmpl = fs.readFileSync(packageJsonPath, 'utf8');
-        var rdmeTmpl = fs.readFileSync(readmePath, 'utf8');
-        var lcnsTmpl = fs.readFileSync(licensePath, 'utf8');
-
-        spcRepDict["nodestanza"] = " \"" + msg.node.name.toLowerCase() + "\": \"" + nodeDefinitions[0].filename + "\""
+        /* ASSUMPTION: assume the .js file is defined first and
+            then the .html file in the node definitions */
+        spcRepDict["nodestanza"] = " \"" + msg.node.namelwr + "\": \"" + nodeDefinitions[0].filename + "\""
+        if ( msg.node.isplugin ) {
+            spcRepDict["pluginstanza"] = " \"sidebar-plugin\": \"" + nodeDefinitions[1].filename + "\""
+        }
 
         var content = {};
 
         var promises = [
-            handleTemplate(msg, node, pkjsTmpl).then((c) => { content["pkjs"] = c }),
-            handleTemplate(msg, node, rdmeTmpl).then((c) => { content["rdme"] = c }),
-            handleTemplate(msg, node, lcnsTmpl).then((c) => { content["lcns"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(packageJsonPath, 'utf8')).then((c) => { content["pkjs"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(readmePath, 'utf8')).then((c) => { content["rdme"] = c }),
+            handleTemplate(msg, node, fs.readFileSync(licensePath, 'utf8')).then((c) => { content["lcns"] = c }),
         ];
 
         return Promise.all(promises).then( () => {
@@ -284,43 +359,15 @@ module.exports = function (RED) {
         });
 
         node.on("input", function (msg, send, done) {
+            send({ payload: msg.node })
+            
             if (msg.node && msg.node.__task == "generate_from_templates") {
                 try {
-                    var htmlPath = path.join(__dirname, 'templates', 'tmpl.html');
-                    var jsPath = path.join(__dirname, 'templates', 'tmpl.js');
-
-                    var jsonTmpl = fs.readFileSync(jsPath, 'utf8');
-                    var htmlTmpl = fs.readFileSync(htmlPath, 'utf8');
-
-                    handleTemplate(msg, node, jsonTmpl).then(function (data) {
-                        var jsData = data;
-
-                        handleTemplate(msg, node, htmlTmpl).then(function (data) {
-                            var nodeDef = convertToPkgFileNodes(msg, jsData, data)
-
-                            if (msg.node.createmanifest ) {
-                                /* create the package.json, readme and license files */
-                                createManifestFiles(msg, node, nodeDef).then( (data) => {
-                                    var nodeImpStr = JSON.stringify(data);
-
-                                    send({ payload: nodeImpStr })
-
-                                    RED.comms.publish(
-                                        "nodedev:perform-autoimport-nodes",
-                                        RED.util.encodeObject({
-                                            msg: "autoimport",
-                                            payload: nodeImpStr,
-                                            topic: msg.topic,
-                                            nodeid: node.id,
-                                            _msg: msg
-                                        })
-                                    );
-                                }).catch( (err) => {
-                                    msg.error = err
-                                    done(err.message, msg)
-                                })
-                            } else {
-                                var nodeImpStr = JSON.stringify(nodeDef);
+                    createNodeDefintions(msg,node).then( (nodeDef) => {
+                        if (msg.node.createmanifest ) {
+                            /* create the package.json, readme and license files */
+                            createManifestFiles(msg, node, nodeDef).then( (data) => {
+                                var nodeImpStr = JSON.stringify(data);
 
                                 send({ payload: nodeImpStr })
 
@@ -334,17 +381,31 @@ module.exports = function (RED) {
                                         _msg: msg
                                     })
                                 );
-                            }
-                            done()
-                        }).catch((err) => {
-                            msg.error = err
-                            done(err.message, msg)
-                        })
+                            }).catch( (err) => {
+                                msg.error = err
+                                done(err.message, msg)
+                            })
+                        } else {
+                            var nodeImpStr = JSON.stringify(nodeDef);
+
+                            send({ payload: nodeImpStr })
+
+                            RED.comms.publish(
+                                "nodedev:perform-autoimport-nodes",
+                                RED.util.encodeObject({
+                                    msg: "autoimport",
+                                    payload: nodeImpStr,
+                                    topic: msg.topic,
+                                    nodeid: node.id,
+                                    _msg: msg
+                                })
+                            );
+                        }
+                        done()
                     }).catch((err) => {
                         msg.error = err
                         done(err.message, msg)
                     })
-                    //send({ payload: jsonString })
                 } catch (err) {
                     msg.error = err
                     done(err.message, msg)

package/nodes/templates/tmpl.js

@@ -1,5 +1,5 @@
 module.exports = function(RED) {
-  function {{ node.name }}Functionality(config) {
+  function Core{{ node.name }}Functionality(config) {
     RED.nodes.createNode(this,config);
 
     var node = this;
@@ -24,7 +24,7 @@ module.exports = function(RED) {
     });
   }
 
-  RED.nodes.registerType("{{ node.name }}", {{ node.name }}Functionality);
+  RED.nodes.registerType("{{ node.name }}", Core{{ node.name }}Functionality);
 
 {{ #node.frt2bakcomm }}
   RED.httpAdmin.post("/{{ node.name }}/:id",

package/nodes/templates/tmplpackage.json

@@ -1,28 +1,33 @@
 {
   "name" : "{{__.ocb3}} pname {{__.ccb3}}",
-  "version": "{{__.ocb2}} pversion {{__.ccb2}}",
+  "version": "{{__.ocb3}} pversion {{__.ccb3}}",
   "dependencies": {
   },
 
+  "description": "{{__.ocb3}} pdescription {{__.ccb3}}",
   "keywords": [
     "node-red"
   ],
 
-  "homepage": "https://github.com/{{__.ocb2}} githubowner {{__.ccb2}}/{{__.ocb2}} githubrepo {{__.ccb2}}#readme",
   "license": "Don't do evil.",
-  "author": "Joe Blog <joe.blog@spreads-the.love>",
+  "homepage": "https://github.com/{{__.ocb2}} githubowner {{__.ccb2}}/{{__.ocb2}} githubrepo {{__.ccb2}}#readme",
+  "author": "{{__.ocb3}} pauthorname {{__.ccb3}} <{{__.ocb3}} pauthoremail {{__.ccb3}}>",
   "engines": {
     "node": ">=14"
   },
 
   "node-red" : {
     "version": ">=3.0.0",
+    {{#node.isplugin}}
+    "plugins": {
+       {{{__.pluginstanza}}}
+     },
+    {{/node.isplugin}}
     "nodes": {
       {{{__.nodestanza}}}
     }
   },
 
-  "description": "Description of what these nodes do.",
   "repository": {
     "type": "github",
     "url": "git+https://github.com/{{__.ocb2}} githubowner {{__.ccb2}}/{{__.ocb2}} githubrepo {{__.ccb2}}.git"

package/nodes/templates/tmplsidebar.html

@@ -0,0 +1,138 @@
+<script type="text/javascript">
+(function() {
+   var globalYourConfigNode = null;
+
+   function ensureYourConfigNodeExists() {
+      // This function makes sure there is 1 instance of your config node is available, and that the globalYourConfigNode variable refers to it.
+      // Explained in the next step of this tutorial... --> https://discourse.nodered.org/t/tutorial-create-a-sidebar-plugin-and-persist-the-data-in-a-config-node/82020
+
+      // If we had found it previously, check if it has been deleted by the user behind our back
+      if (globalYourConfigNode !== null) {
+         var configNode = RED.nodes.node(globalYourConfigNode.id);
+         if (configNode === null) { globalYourConfigNode = null; }
+      }
+
+      // If not found previously, let's go find it
+      if (globalYourConfigNode === null) {
+         var configNodes = [];
+         RED.nodes.eachConfig(function(configNode) {
+             if (configNode.type === '{{ node.name }}') { 
+                 configNodes.push(configNode); 
+             }
+         });
+
+         // Make sure we only have 1 config node
+         while (configNodes.length > 1) {
+             var configNode = configNodes.pop();
+             RED.nodes.remove(configNode.id);
+             RED.nodes.dirty(true);
+         }
+
+         // When we found a config node, let's use that one
+         if (configNodes.length === 1) { globalYourConfigNode = configNodes[0]; }
+      }
+
+      // When it doesn't exist yet, create it if required
+      if (globalYourConfigNode === null) {
+         // Remark: since this config node is dynamically created (and only used in this sidebar which isn't another node), the config
+         // node is in fact "unused".  But since we don't want it to appear "unused" in the "config nodes" panel, we need to set hasUsers
+         // to false (see https://github.com/node-red/node-red/blob/master/CHANGELOG.md#0161-maintenance-release).
+         // The hasUsers needs also to be specified in the RED.nodes.registerType statement!
+         globalYourConfigNode = {
+             id: RED.nodes.id(), // on the server side, this is called RED.util.generateId()
+             _def: RED.nodes.getType("{{ node.name }}Cfg"),
+             type: "{{ node.name }}Cfg",
+             hasUsers: false, 
+             users: [],
+             name: "{{ node.name }}",
+             label: function() { return this.name || "{{ node.name }}"},
+             /* values and data defined by this config node */
+             data: "some default value", // Default data
+         }
+
+         // Add the new config node to the collection of Node-RED nodes
+         RED.nodes.add(globalYourConfigNode);
+
+         // Make sure the "Deploy" button becomes active
+         RED.nodes.dirty(true);
+      }      
+   }
+
+   // Add your plugin as a new tabsheet in the right sidebar AFTER the flow editor is completely started
+   var initialiseConfigNodeOnce = () => {
+      RED.events.off('runtime-state', initialiseConfigNodeOnce);
+
+      // The html content of the sidebar has been specified below as a data-template, from where it can be loaded:
+      var content = $($('script[type="text/x-red"][data-template-name="{{ node.name }}"]').i18n().html());
+    
+      // Add a "Your sidebar" tabsheet to the right sidebar panel, in which this sidebar panel can be displayed
+      // --> more details: https://nodered.org/docs/api/ui/sidebar/
+      RED.sidebar.addTab({
+         id: "{{ node.name }}",
+         label: "{{ node.namelwr }}", // short name for the tab
+         name: "{{ node.name }}", // long name for the menu
+         content: content,
+         closeable: true,
+         // disableOnEdit: true,
+         enableOnEdit: true,
+         iconClass: "{{{ node.iconclass }}}" // your fontawesome icon
+      });
+
+      ensureYourConfigNodeExists();
+
+      {{#node.hasbutton}}
+      var doSomething = (e) => {
+         if (e) { e.preventDefault(); }
+         RED.notify("Button pressed in the side or action "+
+                    "triggered. Current value: <b>" + globalYourConfigNode.data + "</b>", 
+                    "success");
+      }
+
+      $('#node-input-button').on('click', (e) => {
+         doSomething(e);
+      })
+
+      /* name of action will become "My Sidebar Action", label is generated
+         from action name - see https://nodered.org/docs/api/ui/actions/ */
+      RED.actions.add("{{ node.namelwr }}:my-sidebar-action",function() {
+        doSomething();
+      });
+      {{/node.hasbutton}}
+
+      // At startup load your config node data into the plugin sidebar html elements
+      $("#node-input-data").val(globalYourConfigNode.data);
+
+      // When the user has entered new data in the sidebar, then store it into the config node
+      $("#node-input-data").on("change", function() {
+        ensureYourConfigNodeExists();
+
+        let data = $(this).val();
+
+         if (globalYourConfigNode.data != data) {
+            globalYourConfigNode.data = data;
+            // Since the config node has been updated, the 'Deploy' button should become active
+            RED.nodes.dirty(true);
+         }
+      })
+   };
+   RED.events.on('runtime-state', initialiseConfigNodeOnce);
+})();
+</script>
+
+<!-- The html for the right sidebar plugin screen -->
+<script type="text/x-red" data-template-name="{{ node.name }}">
+  <div class="form-row">
+    <div style="position: relative; height: 100%; margin: 15px;">
+      <label for="node-input-data" style="margin-top: 15px"><i class="fa fa-cog"></i> Data</label>
+      <input type="text" id="node-input-data" style="width: 100%; margin-top: 30px">
+    </div>
+  </div>
+  
+{{#node.hasbutton}}
+ <div class="form-row">
+   <div style="position: relative; height: 100%; margin: 15px;">
+      <button id="node-input-button" class="success" style="width: 100%; margin-top: 30px">Do something</button>
+   </div>
+ </div>
+{{/node.hasbutton}}
+</script>

package/nodes/templates/tmplsidebarnode.html

@@ -0,0 +1,22 @@
+<script type="text/javascript">
+(function ($) {
+   RED.nodes.registerType('{{ node.name }}Cfg', {
+      category: 'config',
+      hasUsers: false,
+      defaults: {
+         name: { value: "" },
+         data: { value: "" }
+      },
+      paletteLabel: '{{ node.name }}Cfg',
+      label: function () {
+         return this.name;
+      }
+  });
+})(jQuery);
+</script>
+
+<!-- The html for the config node info panel (in right sidebar) -->
+<script type="text/x-red" data-template-name="{{ node.name }}Cfg">
+   <p>{{{ node.summary }}}</p>
+   {{{ node.description }}}
+</script>

package/nodes/templates/tmplsidebarnode.js

@@ -0,0 +1,6 @@
+module.exports = function (RED) {
+  function Config{{ node.name }}Functionality(config) {
+    RED.nodes.createNode(this, config)
+  }
+  RED.nodes.registerType('{{ node.name }}Cfg', Config{{ node.name }}Functionality);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name" : "@gregoriusrippenstein/node-red-contrib-nodedev",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "dependencies": {
     "pako":          "latest",
     "tar-stream":    "latest",