mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-12-01 02:21:39 +00:00
## Description
This PR adds a new `server:watch` script that runs MagicMirror² in
server-only mode with automatic restart and browser reload capabilities.
Particularly helpful for:
- **Developers** who need to see changes immediately without manual
restarts.
- **Users setting up their mirror** who make many changes to `config.js`
or `custom.css` and need quick feedback.
### What it does
When you run `npm run server:watch`, the watcher monitors files you
specify in `config.watchTargets`. Whenever a monitored file changes:
1. The server automatically restarts
2. Waits for the port to become available
3. Sends a reload notification to all connected browsers via Socket.io
4. Browsers automatically refresh to show the changes
This creates a seamless development experience where you can edit code,
save, and see the results within seconds.
### Implementation highlights
**Zero dependencies:** Uses only Node.js built-ins (`fs.watch`,
`child_process.spawn`, `net`, `http`) - no nodemon or external watchers
needed.
**Smart file watching:** Monitors parent directories instead of files
directly to handle atomic writes from modern editors (VSCode, etc.) that
create temporary files during save operations.
**Port management:** Waits for the old server instance to fully release
the port before starting a new one, preventing "port already in use"
errors.
### Configuration
Users explicitly define which files to monitor in their `config.js`:
```js
let config = {
watchTargets: [
"config/config.js",
"css/custom.css",
"modules/MMM-MyModule/MMM-MyModule.js",
"modules/MMM-MyModule/node_helper.js"
],
// ... rest of config
};
```
This explicit approach keeps the implementation simple (~260 lines)
while giving users full control over what triggers restarts. If
`watchTargets` is empty or undefined, the watcher starts but monitors
nothing, logging a clear warning message.
---
**Note:** This PR description has been updated to reflect the final
implementation. During the review process, we refined the approach
multiple times based on feedback.
---------
Co-authored-by: Jboucly <contact@jboucly.fr>
Co-authored-by: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com>
198 lines
5.5 KiB
JavaScript
198 lines
5.5 KiB
JavaScript
const fs = require("node:fs");
|
|
const path = require("node:path");
|
|
const Log = require("logger");
|
|
|
|
const startUp = new Date();
|
|
|
|
/**
|
|
* Gets the config.
|
|
* @param {Request} req - the request
|
|
* @param {Response} res - the result
|
|
*/
|
|
function getConfig (req, res) {
|
|
res.send(config);
|
|
}
|
|
|
|
/**
|
|
* Gets the startup time.
|
|
* @param {Request} req - the request
|
|
* @param {Response} res - the result
|
|
*/
|
|
function getStartup (req, res) {
|
|
res.send(startUp);
|
|
}
|
|
|
|
/**
|
|
* A method that forwards HTTP Get-methods to the internet to avoid CORS-errors.
|
|
*
|
|
* Example input request url: /cors?sendheaders=header1:value1,header2:value2&expectedheaders=header1,header2&url=http://www.test.com/path?param1=value1
|
|
*
|
|
* Only the url-param of the input request url is required. It must be the last parameter.
|
|
* @param {Request} req - the request
|
|
* @param {Response} res - the result
|
|
*/
|
|
async function cors (req, res) {
|
|
try {
|
|
const urlRegEx = "url=(.+?)$";
|
|
let url;
|
|
|
|
const match = new RegExp(urlRegEx, "g").exec(req.url);
|
|
if (!match) {
|
|
url = `invalid url: ${req.url}`;
|
|
Log.error(url);
|
|
res.send(url);
|
|
} else {
|
|
url = match[1];
|
|
|
|
const headersToSend = getHeadersToSend(req.url);
|
|
const expectedReceivedHeaders = geExpectedReceivedHeaders(req.url);
|
|
|
|
Log.log(`cors url: ${url}`);
|
|
const response = await fetch(url, { headers: headersToSend });
|
|
|
|
for (const header of expectedReceivedHeaders) {
|
|
const headerValue = response.headers.get(header);
|
|
if (header) res.set(header, headerValue);
|
|
}
|
|
const data = await response.text();
|
|
res.send(data);
|
|
}
|
|
} catch (error) {
|
|
Log.error(error);
|
|
res.send(error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets headers and values to attach to the web request.
|
|
* @param {string} url - The url containing the headers and values to send.
|
|
* @returns {object} An object specifying name and value of the headers.
|
|
*/
|
|
function getHeadersToSend (url) {
|
|
const headersToSend = { "User-Agent": getUserAgent() };
|
|
const headersToSendMatch = new RegExp("sendheaders=(.+?)(&|$)", "g").exec(url);
|
|
if (headersToSendMatch) {
|
|
const headers = headersToSendMatch[1].split(",");
|
|
for (const header of headers) {
|
|
const keyValue = header.split(":");
|
|
if (keyValue.length !== 2) {
|
|
throw new Error(`Invalid format for header ${header}`);
|
|
}
|
|
headersToSend[keyValue[0]] = decodeURIComponent(keyValue[1]);
|
|
}
|
|
}
|
|
return headersToSend;
|
|
}
|
|
|
|
/**
|
|
* Gets the headers expected from the response.
|
|
* @param {string} url - The url containing the expected headers from the response.
|
|
* @returns {string[]} headers - The name of the expected headers.
|
|
*/
|
|
function geExpectedReceivedHeaders (url) {
|
|
const expectedReceivedHeaders = ["Content-Type"];
|
|
const expectedReceivedHeadersMatch = new RegExp("expectedheaders=(.+?)(&|$)", "g").exec(url);
|
|
if (expectedReceivedHeadersMatch) {
|
|
const headers = expectedReceivedHeadersMatch[1].split(",");
|
|
for (const header of headers) {
|
|
expectedReceivedHeaders.push(header);
|
|
}
|
|
}
|
|
return expectedReceivedHeaders;
|
|
}
|
|
|
|
/**
|
|
* Gets the HTML to display the magic mirror.
|
|
* @param {Request} req - the request
|
|
* @param {Response} res - the result
|
|
*/
|
|
function getHtml (req, res) {
|
|
let html = fs.readFileSync(path.resolve(`${global.root_path}/index.html`), { encoding: "utf8" });
|
|
html = html.replace("#VERSION#", global.version);
|
|
html = html.replace("#TESTMODE#", global.mmTestMode);
|
|
|
|
let configFile = "config/config.js";
|
|
if (typeof global.configuration_file !== "undefined") {
|
|
configFile = global.configuration_file;
|
|
}
|
|
html = html.replace("#CONFIG_FILE#", configFile);
|
|
|
|
res.send(html);
|
|
}
|
|
|
|
/**
|
|
* Gets the MagicMirror version.
|
|
* @param {Request} req - the request
|
|
* @param {Response} res - the result
|
|
*/
|
|
function getVersion (req, res) {
|
|
res.send(global.version);
|
|
}
|
|
|
|
/**
|
|
* Gets the preferred `User-Agent`
|
|
* @returns {string} `User-Agent` to be used
|
|
*/
|
|
function getUserAgent () {
|
|
const defaultUserAgent = `Mozilla/5.0 (Node.js ${Number(process.version.match(/^v(\d+\.\d+)/)[1])}) MagicMirror/${global.version}`;
|
|
|
|
if (typeof config === "undefined") {
|
|
return defaultUserAgent;
|
|
}
|
|
|
|
switch (typeof config.userAgent) {
|
|
case "function":
|
|
return config.userAgent();
|
|
case "string":
|
|
return config.userAgent;
|
|
default:
|
|
return defaultUserAgent;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets environment variables needed in the browser.
|
|
* @returns {object} environment variables key: values
|
|
*/
|
|
function getEnvVarsAsObj () {
|
|
const obj = { modulesDir: `${config.foreignModulesDir}`, customCss: `${config.customCss}` };
|
|
if (process.env.MM_MODULES_DIR) {
|
|
obj.modulesDir = process.env.MM_MODULES_DIR.replace(`${global.root_path}/`, "");
|
|
}
|
|
if (process.env.MM_CUSTOMCSS_FILE) {
|
|
obj.customCss = process.env.MM_CUSTOMCSS_FILE.replace(`${global.root_path}/`, "");
|
|
}
|
|
|
|
return obj;
|
|
}
|
|
|
|
/**
|
|
* Gets environment variables needed in the browser.
|
|
* @param {Request} req - the request
|
|
* @param {Response} res - the result
|
|
*/
|
|
function getEnvVars (req, res) {
|
|
const obj = getEnvVarsAsObj();
|
|
res.send(obj);
|
|
}
|
|
|
|
/**
|
|
* Get the config file path from environment or default location
|
|
* @returns {string} The absolute config file path
|
|
*/
|
|
function getConfigFilePath () {
|
|
// Ensure root_path is set (for standalone contexts like watcher)
|
|
if (!global.root_path) {
|
|
global.root_path = path.resolve(`${__dirname}/../`);
|
|
}
|
|
|
|
// Check environment variable if global not set
|
|
if (!global.configuration_file && process.env.MM_CONFIG_FILE) {
|
|
global.configuration_file = process.env.MM_CONFIG_FILE;
|
|
}
|
|
|
|
return path.resolve(global.configuration_file || `${global.root_path}/config/config.js`);
|
|
}
|
|
|
|
module.exports = { cors, getConfig, getHtml, getVersion, getStartup, getEnvVars, getEnvVarsAsObj, getUserAgent, getConfigFilePath };
|