Debugging node-red-dashboard

366 views
Skip to first unread message

Colin Law

unread,
Sep 24, 2017, 11:32:55 AM9/24/17
to node...@googlegroups.com
I want to try to find out what is causing this issue on my system (the
Connection Lost popup message does not disappear when re-connected)
https://github.com/node-red/node-red-dashboard/issues/278

I need to stick some console log messages in the code to work out what
is going on, but I don't know how to install the node so that I can
edit node-red-dashboard/src/main.js and then run it. When I install it
using npm I end up with js in dist/js/app.min.js (I think) which is
not helpful.

Any help will be much appreciated.

Colin

Julian Knight

unread,
Sep 24, 2017, 5:44:34 PM9/24/17
to Node-RED
I think that Dashboard has to be run through a build process.

Nick O'Leary

unread,
Sep 24, 2017, 5:48:08 PM9/24/17
to Node-RED Mailing List
Colin,

you'll have to checkout the code from git, edit and rebuild. See https://github.com/node-red/node-red-dashboard#developers for the details.

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/ea5e816e-b28b-421a-93fa-7cdbe94dd722%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Colin Law

unread,
Sep 25, 2017, 5:05:01 AM9/25/17
to node...@googlegroups.com
Thanks nick, I was missing the fact that I can stop it running the
minified version by deleting the dist folder.
It seems it is not actually necessary to rebuild it during debugging,
it will run the files from src.

I have added my findings to the issue, and I don't understand what is
going on, which is not unusual.
https://github.com/node-red/node-red-dashboard/issues/278

Colin
>> email to node-red+u...@googlegroups.com.
>> To post to this group, send email to node...@googlegroups.com.
>> Visit this group at https://groups.google.com/group/node-red.
>> To view this discussion on the web, visit
>> https://groups.google.com/d/msgid/node-red/ea5e816e-b28b-421a-93fa-7cdbe94dd722%40googlegroups.com.
>>
>> For more options, visit https://groups.google.com/d/optout.
>
>
> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/CAF%3DvhqdSOvnr1snyHcDyVuOGiuBA3-uiy8hX0yYFriCF1V5nsQ%40mail.gmail.com.

steve rickus

unread,
Sep 25, 2017, 11:02:17 AM9/25/17
to Node-RED
Hi Colin,

When I want to run the "development" version of the dashboard directly from the src files, I just rename dist/index.html to dist/index.orig (or something else).
Then when I restart node-red, I see confirmation in the console, like this:

Welcome to Node-RED
===================


25 Sep 10:57:01 - [info] Node-RED version: v0.17.5-git
25 Sep 10:57:01 - [info] Node.js  version: v6.9.1
25 Sep 10:57:01 - [info] Windows_NT 10.0.15063 x64 LE
25 Sep 10:57:09 - [info] Loading palette nodes
25 Sep 10:57:22 - [info] Dashboard version 2.5.1 started at /red/ui
25 Sep 10:57:25 - [info] Dashboard using development folder

Makes it a bit easier to revert back to the original files... but you are right that it does not require rebuilding.

The docs are a bit vague on whether the whole dist directory or just the index.html file needs to be deleted -- for me, the latter seems to work fine.
--
Steve

Dave C-J

unread,
Sep 25, 2017, 11:47:50 AM9/25/17
to node...@googlegroups.com
Actually it just checks for the presence of dist/index.html, but the build step will overwrite the whole dist dir so it's no problem to delete it all. Up to you.

steve rickus

unread,
Sep 25, 2017, 2:53:49 PM9/25/17
to Node-RED
Sure, sure -- i just don't like the fact that the build step recreates the whole dist dir using different line endings, so git thinks the whole shebang needs committing. Instead, I just usually rename the .orig file back to .html instead of running gulp. Ah, the joys of working in Windoze...

Which makes me wonder -- can gulp be forced to use unix line endings during the build step, even on other platforms? Maybe a config setting?

Colin Law

unread,
Sep 25, 2017, 2:56:30 PM9/25/17
to node...@googlegroups.com
If you want to put the files back to original you could just git
checkout the relevant files.

Colin
> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/aa9ec459-12fc-45c4-abe1-610d9b60b5bd%40googlegroups.com.

Dave C-J

unread,
Sep 25, 2017, 5:29:11 PM9/25/17
to node...@googlegroups.com
Steve,
good shout - there are loads of gulp plugins to help - I will check some out...

Colin Law

unread,
Sep 26, 2017, 8:40:12 AM9/26/17
to node...@googlegroups.com
I have just noticed that if you delete the complete dist folder then
it complains about tinycolor-min.js missing. I haven't noticed any ill
effects though.

Colin
> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/CACXWFwLYL%3DA0Yrh%2BauvNTcsmqONhnvw0N4oRLLzX0Dmf1rd6mw%40mail.gmail.com.

Colin Law

unread,
Sep 28, 2017, 4:37:46 AM9/28/17
to node...@googlegroups.com
On 24 September 2017 at 22:47, Nick O'Leary <nick....@gmail.com> wrote:
> Colin,
>
> you'll have to checkout the code from git, edit and rebuild. See
> https://github.com/node-red/node-red-dashboard#developers for the details.

The technique in the above link:

cd ~\.node-red\node_modules
git clone https://github.com/node-red/node-red-dashboard.git
cd node-red-dashboard
npm install

does work, but later gives problems with npm, for example an attempt
to install a new node gives the error

npm ERR! git /home/user/.node-red/node_modules/node-red-dashboard:
Appears to be a git repo or submodule.
npm ERR! git /home/user/.node-red/node_modules/node-red-dashboard
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

even though I have not asked it to remove the dashboard node.
Google shows that others have this problem with git repos, and some
have suggested to checkout to a different location and use a soft link
from node_modules to where it is checked out. Is this the best way?

Colin

Julian Knight

unread,
Sep 28, 2017, 4:46:28 AM9/28/17
to Node-RED
Which I copied mercilessly for my uibuilder code ;-)

Julian Knight

unread,
Sep 28, 2017, 4:48:08 AM9/28/17
to Node-RED
I think that is actually a Git setting, you should be able to tell git to leave the line-endings alone. Github for Windows lets you set that I think.

steve rickus

unread,
Sep 28, 2017, 2:09:05 PM9/28/17
to Node-RED
Colin,

I've been using a clone of the git repo for the dashboard code for a while now. I also have several different node-red project directories, each using this same dashboard repo code. For me, developing on a Windows 10 PC, the simplest way to set this up was this:

1. git clone node-red-dashboard to a folder outside of my node-red project directories
2. in the node-red-dashboard repo directory, run 'npm link' (only need to do this one time)
3. inside each node-red project directory, run 'npm link node-red-dashboard` (once for each project)
4. add "node-red-dashboard": "*" to the package.json dependencies section

This way, I can make a change in the repo, or pull down the latest code and build it -- then each project picks up the latest changes upon restart.

C:\NODE\node_red_ui>npm outdated
Package                       Current  Wanted  Latest  Location
node-red                       0.17.5  linked  linked  node-red-ui
node-red-contrib-pythonshell    1.0.0   1.0.0   1.1.1  node-red-ui
node-red-dashboard              2.5.1  linked  linked  node-red-ui

C:\NODE\node_red_ui>npm list --depth=0
node-...@0.0.3 C:\NODE\node_red_ui
+-- node...@0.17.5 -> C:\NODE\node-red
+-- node-red-con...@1.7.7
+-- node-red-cont...@1.0.2
+-- node-red-con...@0.1.4
+-- node-red-co...@2.0.6
+-- node-red-co...@0.0.7
+-- node-red-contr...@1.0.0
+-- node-red-c...@1.1.0
+-- node-red-...@2.5.1 -> C:\NODE\node-red-dashboard
`-- node-red-n...@0.0.8


The only minor annoyance is that 'npm outdated' always lists them as linked. Of course, npm doesn't try to mess with them either, so I'm free to manage them only through git.
--
Steve

Julian Knight

unread,
Sep 29, 2017, 4:56:01 AM9/29/17
to Node-RED
And just a note that npm link does a standard soft link so if you have other tools to do links, they work just fine too. I use a File Explorer addin that lets me do links very easily from the GUI and saves me always having to remember whether to put the source or target first in the command :)

Colin Law

unread,
Sep 29, 2017, 5:58:50 AM9/29/17
to node...@googlegroups.com
On 28 September 2017 at 19:09, steve rickus <sri...@gmail.com> wrote:
> Colin,
>
> I've been using a clone of the git repo for the dashboard code for a while
> now. I also have several different node-red project directories, each using
> this same dashboard repo code. For me, developing on a Windows 10 PC, the
> simplest way to set this up was this:
>
> 1. git clone node-red-dashboard to a folder outside of my node-red project
> directories
> 2. in the node-red-dashboard repo directory, run 'npm link' (only need to do
> this one time)
> 3. inside each node-red project directory, run 'npm link node-red-dashboard`
> (once for each project)

Is there any difference between doing 2 and 3 versus just making a
link in node_modules directly to the checkout dir?

Colin
> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/0d7bf179-fb34-4362-a942-6bfe1bd72a71%40googlegroups.com.

steve rickus

unread,
Sep 29, 2017, 8:14:29 AM9/29/17
to Node-RED

Probaby not -- but since I'm on Windoze and don't have an easy way to create a soft link in the file explorer, I'm just using what is available via standard npm commands.

(I know, learn powershell, blah blah)

On the other hand, the first command adds a reference to the npm cache in my home directory, so that module can then be linked into my other project dirs, So I'll keep doing it the npm recommended way...

Colin Law

unread,
Oct 2, 2017, 11:39:48 AM10/2/17
to node...@googlegroups.com
On 28 September 2017 at 19:09, steve rickus <sri...@gmail.com> wrote:
> Colin,
>
> I've been using a clone of the git repo for the dashboard code for a while
> now. I also have several different node-red project directories, each using
> this same dashboard repo code. For me, developing on a Windows 10 PC, the
> simplest way to set this up was this:
>
> 1. git clone node-red-dashboard to a folder outside of my node-red project
> directories
> 2. in the node-red-dashboard repo directory, run 'npm link' (only need to do
> this one time)

A note about step 2. On Ubuntu I had to use sudo with the command (not
surprisingly) but also, following an update of the node, I had to run
the command again as on node red start I got the error
[uibuilder] Error: Cannot find module 'fs-extra'
In this case uibuilder was the node I was linking. I guess this is
because the dependencies of uibuilder changed so it had to install the
new dependencies. So it is not always right to say that I need
do this only once (in a French accent or otherwise).

Colin

steve rickus

unread,
Oct 2, 2017, 3:46:26 PM10/2/17
to Node-RED
Then I guess the npm link command does more than just create a soft link -- probably rescans the node_modules and updates the npm cache...
I would imagine there is another npm cache command that would have the same effect, but I'm no expert. Thanks for the additional info!

Julian Knight

unread,
Oct 2, 2017, 4:08:54 PM10/2/17
to Node-RED
Not noticed any difference at least when developing. The results of an npm outdated are the same as far as I can tell as well.

Colin Law

unread,
Oct 2, 2017, 4:18:48 PM10/2/17
to node...@googlegroups.com
On 2 October 2017 at 20:46, steve rickus <sri...@gmail.com> wrote:
> Then I guess the npm link command does more than just create a soft link --
> probably rescans the node_modules and updates the npm cache...

Note that is the first npm link that has to be repeated (the one run
from the checked out source folder). I think this effectively does an
npm install as on initially cloning the source its node_modules folder
is empty (or even non-existent). After the npm link it is populated.
So running it again presumably interprets its package.json and does
whatever is necessary if it has changed.

Colin

> I would imagine there is another npm cache command that would have the same
> effect, but I'm no expert. Thanks for the additional info!
>
> On Monday, October 2, 2017 at 11:39:48 AM UTC-4, Colin Law wrote:
>>
>>
>> A note about step 2. On Ubuntu I had to use sudo with the command (not
>> surprisingly) but also, following an update of the node, I had to run
>> the command again as on node red start I got the error
>> [uibuilder] Error: Cannot find module 'fs-extra'
>> In this case uibuilder was the node I was linking. I guess this is
>> because the dependencies of uibuilder changed so it had to install the
>> new dependencies. So it is not always right to say that I need
>> do this only once (in a French accent or otherwise).
>>
>> Colin
>
> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/955fb525-668a-406b-a9e9-6fb80116a9bb%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages