feat(core): add `server:watch` script with automatic restart on file changes #3920

jboucly · 2025-10-19T17:40:48Z

Description

This pull request aims to add new features for contribution as well as local use :

Add new script to run server npm run server:watch ➡️ This script run server only with live reload support for usage on development mode. Example for developers who develop modules and want to update them automatically when a change occurs 🚀

Test this pull-request

Hot reload

Run npm run server:watch
Make a change in any node helpers file of your modules and save it
Your server reload

sdetweil · 2025-10-19T18:13:54Z

You can reload the browser side anytime, ctl-r, or f5

it only loads the web side. You have to stop server and start to reload node_helpers

sdetweil · 2025-10-19T18:16:07Z

What does server dev do? dev was only for web side

if you open your own browser it doesn’t get that parm

sdetweil · 2025-10-19T18:22:45Z

The scripted installer handles node install plus other things

jboucly · 2025-10-19T19:22:51Z

Yes, but stopping the server and then restarting it quickly becomes redundant when we make a lot of modifications and tests on the module side in development....

jboucly · 2025-10-19T19:24:27Z

You can reload the browser side anytime, ctl-r, or f5

it only loads the web side. You have to stop server and start to reload node_helpers

Yes, but stopping the server and then restarting it quickly becomes redundant when we make a lot of modifications and tests on the module side in development....

What does server dev do? dev was only for web side

if you open your own browser it doesn’t get that parm

I don't understand

sdetweil · 2025-10-19T19:28:21Z

So again, change module, ctrl-r if cursor is over web side, f5 if over dev window side

what does server:dev do?
The dev parm is only used when electron is the browser in full mode, npm run start:dev

in run server mode
You have to start your own browser. Chrome/firefox/surf/safari pointing at the MagicMirror address and port

dev mode curl-shift-I , toggles the dev window open or closed

.nvmrc

package.json

KristjanESPERANTO · 2025-10-19T20:27:28Z

what does server:dev do?

To start MagicMirror in server mode + Nodemon keeps an eye on server-side files, and whenever a change is detected the server restarts automatically.

sdetweil · 2025-10-19T20:29:25Z

Ah

KristjanESPERANTO · 2025-10-21T22:48:32Z

Thanks for the changes 🙂 I would like to test something relevant. Give me some time for the review.

…r configuration

….nvmrc entry

…g and port management - Add port availability checks before restart to prevent race conditions - Add error handler for spawn failures - Extract hardcoded values to constants (RESTART_DELAY_MS, PORT_CHECK_*) - Add getConfigFilePath() helper for cleaner config path resolution - Watch js/ and serveronly/ directories in addition to modules/ and config/ - Watch all JS files (.js, .mjs, .cjs) instead of just node_helper.js - Improve restart mechanism with isRestarting flag - Better error messages for watcher and spawn failures - Remove unused app.restart() method from app.js These changes make the watcher more robust and easier to maintain.

KristjanESPERANTO · 2025-10-22T13:03:37Z

I have re-based the branch.

During my tests, I encountered various issues. For example, the restart was triggered by files that my editor created temporarily when saving. Furthermore, the restart did not wait until the old instance released the port, so the new instance could not use it. I have adjusted this and other details in one commit.

Please feel free to give feedback on my changes.

From my point of view, everything looks good now 😃 However, I would wait for the opinion of at least one other contributor on the current status.

Edit: I removed the manual restart option since it would be another feature. One feature per PR is easier to handle.

jboucly · 2025-10-22T13:48:16Z

I have re-based the branch.

During my tests, I encountered various issues. For example, the restart was triggered by files that my editor created temporarily when saving. Furthermore, the restart did not wait until the old instance released the port, so the new instance could not use it. I have adjusted this and other details in one commit.

Please feel free to give feedback on my changes.

From my point of view, everything looks good now 😃 However, I would wait for the opinion of at least one other contributor on the current status.

Edit: I removed the manual restart option since it would be another feature. One feature per PR is easier to handle.

Nice jobs ! Thanks for the changes ! I see that I don't have the whole history of the project when I see all the changes you made 🫣

Ok for the removal of manual reload and sorry for my english in changelog file x')

But i don't understand why on your local you have this bug with my version of watcher 🤔

Edit: I change the description of the PR

khassel · 2025-10-22T17:51:06Z

serveronly/watcher.js

+// We watch specific directories instead of the whole project root to avoid
+// watching unnecessary files like node_modules (even though we filter it),
+// tests, translations, css, fonts, vendor, etc.
+watchDir(path.join(__dirname, "..", "modules"));


@KristjanESPERANTO

Nitpicking stuff from my side ...

AFAIR only modules/default is fix, the modules path for 3rd-party can be changed in config.js (see foreignModulesDir defined in defaults.js). There is an environment variable MM_MODULES_DIR too. You can search for modulesDir in the project to see the construction ...

Other point: You excluded css in the comment above, but what about custom.css? If this file should be watched: Same construction as for modules, customCss in defaults.js, env var MM_CUSTOMCSS_FILE ...

So better approach here would be (untested):

const { getEnvVarsAsObj } = require("#server_functions"); const env = getEnvVarsAsObj(); watchDir(path.join(__dirname, "..", env.modulesDir)); watchDir(path.join(__dirname, "..", env.customCss));

You excluded css in the comment above, but what about custom.css?

Hm... If the CSS changes and the watcher restarts the server, the frontend would not restart/reload. That's why I removed the CSS monitoring, as it would not make sense with the current logic.

AFAIR only modules/default is fix, the modules path for 3rd-party can be changed in config.js (see foreignModulesDir defined in defaults.js). ...

Good point. That should be manageable.

I just had an idea for how to create a common watcher that would work in both server and electron mode and can reload the browser/electron. I'll give it a try, but that needs some refactoring.

I think a watch mode also for electron would definitely be nice. Don't you think? I'll try to look into that over the next few days.

I think the frontend will restart after server restart (with a little delay), AFAIR this was implemented some times ago. I use this in my setup (Browser gets refreshed when docker container was restarted).

Watching/Restarting is also possible with pm2 ...

I think the frontend will restart after server restart

Okay, I'll test it. My previous tests were probably too short.

Watching/Restarting is also possible with pm2 ...

Or do you think a watch mode in the core is unnecessary? I find it kind of interesting to be able to do this without nodemon or pm2. But of course, we don't want the core to complex.

pm2 is already in this project (not happy with this because I remove this when building the container images) so was only meant as hint before reinventing the wheel ...

Hence the fact that I proposed Nodemon to have everything already built without reinventing the wheel.
Nodemon already handles these reloading aspects for CSS, js, etc.

What I'm afraid of is that the watcher.js will become complex... Nodemon can be implemented in devDependencies and therefore not installed during a Prod installation?

KristjanESPERANTO reviewed Oct 19, 2025

View reviewed changes

.nvmrc Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

jboucly changed the title ~~Create .nvmrc file and create server:dev script~~ Create server:dev script Oct 21, 2025

jboucly changed the title ~~Create server:dev script~~ Create server:watch script Oct 21, 2025

jboucly requested a review from KristjanESPERANTO October 21, 2025 14:19

Jboucly and others added 10 commits October 22, 2025 13:26

feat: add .nvmrc file with Node.js v22.20.0

8da1f1c

feat: add nodemon for development et and created nodemon.json file fo…

74506e5

…r configuration

feat: update changelog file

4dbfe29

feat: remove .nvmrc file

925d91d

refactor(deps): remove nodemon

833aca9

feat: add feature to reload server with rs or restart in stdin

95c6d7f

feat: add a monitoring script to restart the server on changes

fa3dcad

feat: update changelog to reflect new server:watch script and remove …

8b24dbf

….nvmrc entry

feat: remove useless config file

dfb1a55

KristjanESPERANTO force-pushed the feat/add-server-auto-reload-and-nvm-config branch from 206421c to c2103f5 Compare October 22, 2025 12:54

KristjanESPERANTO changed the title ~~Create server:watch script~~ feat(core): add server:watch script with automatic restart on file changes Oct 22, 2025

khassel reviewed Oct 22, 2025

View reviewed changes

Uh oh!

feat(core): add server:watch script with automatic restart on file changes #3920

Are you sure you want to change the base?

feat(core): add server:watch script with automatic restart on file changes #3920

Conversation

jboucly commented Oct 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Test this pull-request

Hot reload

Uh oh!

sdetweil commented Oct 19, 2025

Uh oh!

sdetweil commented Oct 19, 2025

Uh oh!

sdetweil commented Oct 19, 2025

Uh oh!

jboucly commented Oct 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jboucly commented Oct 19, 2025

Uh oh!

sdetweil commented Oct 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

KristjanESPERANTO commented Oct 19, 2025

Uh oh!

sdetweil commented Oct 19, 2025

Uh oh!

KristjanESPERANTO commented Oct 21, 2025

Uh oh!

KristjanESPERANTO commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jboucly commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

khassel Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

KristjanESPERANTO Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

khassel Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

KristjanESPERANTO Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

khassel Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

jboucly Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(core): add `server:watch` script with automatic restart on file changes #3920

feat(core): add `server:watch` script with automatic restart on file changes #3920

jboucly commented Oct 19, 2025 •

edited

Loading

jboucly commented Oct 19, 2025 •

edited

Loading

sdetweil commented Oct 19, 2025 •

edited

Loading

KristjanESPERANTO commented Oct 22, 2025 •

edited

Loading

jboucly commented Oct 22, 2025 •

edited

Loading