Npm run dev does not refresh ui with changes

dali · July 2, 2020, 9:03am

When running npm run dev, the added changes are not updated in the ui-editor,
I tried reinstalling the npm modules and executing npm run dev separately for each package. But no luck. Any one had this issue before ? any idea how can i solve it ?

note : the changes are related to node description, credentials & properties

jan · July 2, 2020, 9:28am

Welcome to the community @dali!

What port are you using? Port 5678 uses the built version, to get the auto refresh you would have to use port 8080 instead.

dali · July 2, 2020, 9:39am

Thank you, yes i am using 8080

jan · July 2, 2020, 10:09am

Ah sorry did not see the note that it is about node descriptions, credentials & properties.

They only get read once when n8n starts.

Is mentioned here in the guide:

github.com

n8n-io/n8n/blob/master/CONTRIBUTING.md#create-a-new-node-to-contribute-to-n8n

# Contributing to n8n

Great that you are here and you want to contribute to n8n

## Contents

- [Code of Conduct](#code-of-conduct)
- [Directory Structure](#directory-structure)
- [Development Setup](#development-setup)
- [Development Cycle](#development-cycle)
- [Create Custom Nodes](#create-custom-nodes)
- [Create a new node to contribute to n8n](#create-a-new-node-to-contribute-to-n8n)
- [Checklist before submitting a new node](#checklist-before-submitting-a-new-node)
- [Extend Documentation](#extend-documentation)
- [Contributor License Agreement](#contributor-license-agreement)

## Code of conduct

This project and everyone participating in it are governed by the Code of
Conduct which can be found in the file [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md).

This file has been truncated. show original

When developing n8n must get restarted and the browser reloaded every time parameters of a node change (like new ones added, removed or changed). Only then will the new data be loaded and the node displayed correctly.```

dali · July 2, 2020, 10:15am

Oh, i get it now, probably it’s better to put that note under Development Cycle section directly next to

While iterating on n8n modules code, you can run npm run dev . It will then automatically build your code, restart the backend and refresh the frontend (editor-ui) on every change you make.

so others developers don’t miss it, Thank you for the help and have a nice day!

jan · July 2, 2020, 10:22am

Yes, that is a very good point. Thanks! We will change that.

Have fun!

cmprmsd · April 22, 2021, 8:54am

Hi,

I am facing the same issue. However, I cannot solve the problems by stopping npm and starting it again with npm run dev.
Any ideas why the UI is not refreshed? Did anything change?
I followed these instructions: Creating Your First Node | Docs
Even refreshing with CTRL+F5 after restarting the server or using another browser does not make the changes visible.

Edit: It seems somehow the webserver on 5678 did not get killed properly when stopping my dev-server. That’s the reason why it did not reload. Sorry for bumping

jan · April 23, 2021, 7:19am

Welcome to the community @cmprmsd!

Glad to hear that you found the problem.

It is also best to open the editor-UI via port 8080 if you have it started via npm run dev. If you use that port, it will auto-update and you do also not have to restart n8n.

More background. If you use the port:

5678: it uses the already build code of the editor-ui package. So it will only display you the changes after you did rebuild the package (which does not happen automatically, you would have to run npm run build), you then restarted n8n and you refreshed the browser.
8080: it uses a totally different process that looks automatically for changes, rebuilds the changed parts and updates in the browser.

So when you make UI changes you should always work with port 8080 else it is simply a huge pain.

cmprmsd · April 23, 2021, 7:38am

Hi Jan, thanks for open sourcing and creating this great project. I love automating all the things and this tools adds a plethora of possibilities

In some older posts there was a comment about having to stop and restart the webserver each time, I change something in my customized node.
Did this change within the last months? I’d love to have auto recompilation of the nodes, when I change them so that I only have to refresh the page.

jan · April 23, 2021, 8:16am

Thanks a lot, that is is very great to hear!

Ah, those are different things. I assumed you meant with UI changes, changes to the actual editor-UI. It now however sounds more like you meant changes to parameters on nodes. In that case there is no way around restarting n8n as it loads the nodes only 1x at the startup. But you can still speed up that process. I do the following:

Run npm run watch in the root-folder. That will automatically rebuild every time a change is detected.
Go into the folder packages/cli and run npm run start

So if you now developed a node and you make only changes in the execute method you have to do nothing as it always uses the latest code if you start the workflow again.

If you change node parameters, you only stop and directly restart the process from step 2. That will only take a few seconds. Then you can reload the browser.

Hope that helps!

cmprmsd · April 23, 2021, 10:03am

Cool, that’s indeed faster
Is there a way to add cd packages/cli/ && npm run start (in bash speak) to the lerne run command or to the npm-watch command?
That way the webserver would kill itself and restart after each detected change.
At least for developing on the other stuff beside the execute method this would be nice

Thanks for your time!

jan · April 23, 2021, 11:50am

Could theoretically be added but was never needed in my case. Normally I do not have to restart because it is only node-changes. For all core-changes I normally preferred restarting it manually and so control when it happens and to see how things work. But is probably partly a personal preference.