26ed0aadd2
## Update Dependencies, Node.js 24, and Migrate to ES Modules This PR updates the project dependencies, Node.js version, workflows, and migrates from CommonJS to ES modules. ### Checklist #### Phase 1: Assessment and Configuration - [x] Assess current project structure and dependencies - [x] Update Node.js version requirements (>=24 for builds, >=20 for runtime) - [x] Update GitHub workflow files to use Node 24 - [x] Update Dockerfile to use Node 24 #### Phase 2: TypeScript Configuration for ES Modules - [x] Update root tsconfig.json to use ES2020 target with CommonJS modules - [x] Update backend/tsconfig.json to use ES2020 target with CommonJS modules - [x] Update app/tsconfig.json to use ES2020 target with ESNext modules #### Phase 3: Update Dependencies - [x] Update root package.json dependencies to latest compatible versions - [x] Update app/package.json dependencies to latest compatible versions - [x] Update backend/package.json dependencies to latest compatible versions - [x] Run yarn install to update lockfile #### Phase 4: Convert CommonJS to ES Modules - [x] Convert webpack config files to ES modules (.js → .mjs) - [x] Convert prettier.config.js to ES modules - [x] Update TypeScript files with CommonJS require() to use ES imports - [x] Fix breaking changes from dependency API updates #### Phase 5: Replace ts-node with tsx - [x] Replace ts-node with tsx in all package.json scripts - [x] Update root package.json to use tsx for prepare-release and package scripts - [x] Update backend package.json to use tsx with mocha - [x] Update app package.json to use tsx with mocha - [x] Update script shebangs to use tsx - [x] Add tsx to devDependencies, remove ts-node #### Phase 6: Upgrade React and Material-UI - [x] Upgrade React from 16.14.0 to 18.3.1 - [x] Upgrade React-DOM from 16.14.0 to 18.3.1 - [x] Migrate from @material-ui (v4) to @mui/material (v5) - [x] Add @emotion/react and @emotion/styled (required for MUI v5) - [x] Update all import paths from @material-ui/* to @mui/* - [x] Update theme creation from createMuiTheme to createTheme - [x] Update palette.type to palette.mode - [x] Update ReactDOM.render to ReactDOM.createRoot (React 18) - [x] Update ThemeProvider import to use @mui/material/styles - [x] Add @mui/styles for withStyles compatibility - [x] Separate Theme and withStyles imports correctly - [x] Replace fade with alpha in theme styles - [x] Replace ExpansionPanel with Accordion - [x] Fix all component imports from wrong modules - [x] Replace withTheme HOC with useTheme hook - [x] Replace theme.palette.text.hint with theme.palette.text.secondary - [x] Update all Redux reducers for Redux v5 compatibility #### Phase 7: Fix All TypeScript Errors - [x] Fix Dialog disableBackdropClick removal (use onClose handler) - [x] Fix Button classes.label removal (use sx prop) - [x] Fix Select onChange signature (MUI v5 API change) - [x] Fix Snackbar onClose signature (MUI v5 API change) - [x] Fix ClickAwayListener onClickAway signature (MUI v5 API change) - [x] Fix ReactResizeDetector (migrate to useResizeDetector hook) - [x] Fix Redux connect + withStyles type compatibility (use type assertions) - [x] Fix all connected component prop type errors - [x] Add children prop to ErrorBoundary - [x] Add parameter types to callbacks #### Phase 8: Build and Test - [x] Run yarn build - ✅ **SUCCESSFUL with 0 errors, 1 minor warning** - [x] Run yarn test - ✅ **All 27 tests passing (5 app + 22 backend)** #### Phase 9: Update All GitHub Actions - [x] Update Node.js to 24 in copilot-setup.yml workflow - [x] Update Node.js to 24 in update-website.yml workflow - [x] Update docker/build-push-action from v5 to v6 - [x] Replace deprecated tibdex/github-app-token@v2 with actions/create-github-app-token@v1 - [x] All other actions already at latest versions (v4 for GitHub actions, v3 for Docker actions) #### Phase 10: Final Validation - [x] All TypeScript compilation errors fixed - [x] All tests passing - [x] Build completes successfully - [x] Clarified Node.js engine requirements per use case - [x] All GitHub Actions updated to latest versions ### Node.js Version Requirements This project has different Node.js requirements depending on the use case: #### Building the Electron App (Root package.json) - **Required:** Node.js >= 24 - **Why:** Build tools like @electron/notarize and semantic-release require Node.js 24+ - **Affected files:** `/package.json` #### Running the Backend/Server (Backend package.json) - **Required:** Node.js >= 20 - **Why:** The MQTT server runtime is compatible with Node.js 20+ - **Affected files:** `/backend/package.json` #### Frontend App (App package.json) - **Required:** Node.js >= 20 - **Why:** React and webpack tools are compatible with Node.js 20+ - **Affected files:** `/app/package.json` ### Summary of All Changes **Major Dependency Updates:** - TypeScript: 4.5.5 → 5.9.3 - Node.js: >=24 for builds, >=20 for runtime - React: 16.14.0 → 18.3.1 - React-DOM: 16.14.0 → 18.3.1 - Redux: 4.2.1 → 5.0.1 - @material-ui/core → @mui/material 5.18.0 - @material-ui/icons → @mui/icons-material 5.18.0 - mqtt: 4.3.6 → 5.14.1 - axios: 0.28.0 → 1.13.2 - redux-thunk: 2.3.0 → 3.1.0 - electron-builder: 24.13.3 → 26.0.12 - @electron/notarize: 3.1.1 (latest) - semantic-release: 25.0.2 (latest) - react-resize-detector: migrated to useResizeDetector hook - 50+ other dependencies **GitHub Actions Updated:** - ✅ actions/checkout@v4 (latest) - ✅ actions/setup-node@v4 (latest) - Now uses Node 24 in all workflows - ✅ actions/cache@v4 (latest) - ✅ actions/upload-artifact@v4 (latest) - ✅ docker/build-push-action: v5 → **v6** (latest) - ✅ docker/login-action@v3 (latest) - ✅ docker/setup-buildx-action@v3 (latest) - ✅ cycjimmy/semantic-release-action@v4 (latest) - ✅ tibdex/github-app-token@v2 → **actions/create-github-app-token@v1** (official replacement for deprecated action) - ✅ stefanzweifel/git-auto-commit-action@v5 (latest) - ✅ hkusu/s3-upload-action@v2 (latest) **All TypeScript Errors Fixed:** - Removed disableBackdropClick from Dialog (deprecated in MUI v5) - Removed Button classes.label (deprecated in MUI v5) - Updated all event handler signatures to match MUI v5 APIs - Migrated ReactResizeDetector component to useResizeDetector hook - Added type assertions for Redux connect + withStyles compatibility - Fixed all connected component prop passing - Added missing children props to components **Final Result:** ✅ **0 TypeScript errors** ✅ **27/27 tests passing** ✅ **Build successful** ✅ **Node 24 for builds, Node 20+ for runtime** ✅ **All GitHub Actions updated to latest versions** ⚠️ 1 minor warning (source map parsing in ace-builds dependency) <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>update dependencies</issue_title> > <issue_description>- update to nodejs 24 > - update npm dependencies > - update workflows > - change from commons to esmodules</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes thomasnordquist/MQTT-Explorer#939 <!-- START COPILOT CODING AGENT TIPS --> --- 💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey). --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com> Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>
MQTT Explorer
 |
 |
 |
The App has moved to mqtt-explorer.com
MQTT Explorer is a comprehensive and easy-to-use MQTT Client.
Downloads can be found at the link above.
This page is dedicated to its development. Pull-Requests and error reports are welcome.
Quick Start with GitHub Codespaces
The fastest way to start developing is with GitHub Codespaces:
- Click the green "Code" button above
- Select "Codespaces" tab
- Click "Create codespace on [branch]"
- Wait for the environment to set up (includes Node.js and MQTT broker)
- Run
yarn dev:serverto start development
The devcontainer includes a pre-configured MQTT broker and all development tools. See .devcontainer/README.md for details.
Run from sources
Desktop Application (Electron)
npm install -g yarn
yarn
yarn build
yarn start
Browser Mode (Web Application)
MQTT Explorer can also run as a web application served by a Node.js server:
npm install -g yarn
yarn
yarn build:server
yarn start:server
Then open your browser to http://localhost:3000. For more details, see BROWSER_MODE.md.
Develop
Desktop Application
Launch Application
npm install -g yarn
yarn
yarn dev
Browser Mode
Launch in development mode with hot reload:
npm install -g yarn
yarn
yarn dev:server
The app directory contains all the rendering logic, the backend directory currently contains the models, tests, connection management, src contains all the electron bindings. mqttjs is used to facilitate communication to MQTT brokers.
Automated Tests
To achieve a reliable product automated tests run regularly on CI.
- Data model tests:
yarn test:backend - App tests:
yarn test:app - UI test suite:
yarn test:ui(independent, deterministic tests) - Demo video:
yarn ui-test(UI test recording for documentation)
Run UI Test Suite
The UI test suite validates core functionality through automated browser tests. Each test is independent and deterministic.
# Run with automated setup (recommended)
./scripts/runUiTests.sh
# Or run directly (requires manual MQTT broker setup)
yarn build
yarn test:ui
See docs/UI-TEST-SUITE.md for more details.
Run Demo Video Generation
A mosquitto MQTT broker is required to generate the demo video.
yarn build
yarn ui-test
Create a release
Create a PR to release branch.
There needs to be a "feat: some new feature" or "fix: some bugfix" commit for a new release to be created
Create a beta release
Create a PR to beta branch. A "feat" or "fix" commit is necessary to create a new version.
Write docs
git clone --single-branch -b gh-pages https://github.com/thomasnordquist/MQTT-Explorer.git mqtt-explorer-pages
cd mqtt-explorer-pages
bundle install
bundle exec jekyll serve --incremental
Readme file: Readme.tpl.md
Preview is available at http://localhost:4000/Readme.tpl
Update docs
npm install
./updateReadme.ts
The readme will be generated from the docs.
License
The license allows for anyone to adapt, share, and redistribute the material, as long as it is non-commercial.