|
1 | 1 | # GitHub Copilot Agent Instructions for MQTT Explorer |
2 | 2 |
|
| 3 | +## Overview |
| 4 | + |
| 5 | +MQTT Explorer is an Electron-based desktop application for exploring MQTT brokers. It provides a comprehensive UI for connecting to MQTT brokers, browsing topics, and analyzing message flows. |
| 6 | + |
| 7 | +## Technology Stack |
| 8 | + |
| 9 | +- **Frontend**: React 16.x with Material-UI |
| 10 | +- **Backend**: Node.js with TypeScript |
| 11 | +- **Desktop Framework**: Electron 29.x |
| 12 | +- **MQTT Client**: [mqttjs](https://github.com/mqttjs/MQTT.js) v4.x |
| 13 | +- **State Management**: Redux with redux-thunk |
| 14 | +- **Build Tools**: webpack, TypeScript compiler |
| 15 | +- **Testing**: Mocha + Chai for unit tests, Playwright for MCP introspection tests |
| 16 | + |
3 | 17 | ## Project Setup |
4 | 18 |
|
5 | 19 | ### Building and Running |
@@ -97,9 +111,128 @@ The project supports MCP (Model Context Protocol) for automated testing with Pla |
97 | 111 | - `src/` - Electron main process and bindings |
98 | 112 | - `src/spec/` - Test specifications including MCP introspection tests |
99 | 113 |
|
| 114 | +## Code Style and Formatting |
| 115 | + |
| 116 | +### Linting |
| 117 | + |
| 118 | +The project uses TSLint with Airbnb config and Prettier for code formatting: |
| 119 | + |
| 120 | +```bash |
| 121 | +# Run all linters |
| 122 | +yarn lint |
| 123 | + |
| 124 | +# Run linters individually |
| 125 | +yarn lint:prettier # Check Prettier formatting |
| 126 | +yarn lint:tslint # Check TSLint rules |
| 127 | +yarn lint:spellcheck # Check spelling in code |
| 128 | + |
| 129 | +# Auto-fix issues |
| 130 | +yarn lint:fix # Fix TSLint and Prettier issues |
| 131 | +yarn lint:tslint:fix # Fix TSLint issues only |
| 132 | +yarn lint:prettier:fix # Fix Prettier issues only |
| 133 | +``` |
| 134 | + |
| 135 | +### Code Style Rules |
| 136 | + |
| 137 | +- **Semicolons**: Never use semicolons (enforced by TSLint and Prettier) |
| 138 | +- **Quotes**: Single quotes for strings |
| 139 | +- **Indentation**: 2 spaces |
| 140 | +- **Line length**: Maximum 120 characters (Prettier) / 200 characters (TSLint) |
| 141 | +- **Arrow functions**: No parentheses for single parameters (`x => x + 1`) |
| 142 | +- **Trailing commas**: Required for multiline objects and arrays (ES5 compatible) |
| 143 | + |
| 144 | +### TypeScript Guidelines |
| 145 | + |
| 146 | +- Enable strict null checks and no implicit any |
| 147 | +- Use TypeScript interfaces for data structures |
| 148 | +- Prefer `const` over `let`, avoid `var` |
| 149 | +- Use type inference when possible, explicit types when clarity is needed |
| 150 | + |
| 151 | +## Dependency Management |
| 152 | + |
| 153 | +### Adding Dependencies |
| 154 | + |
| 155 | +```bash |
| 156 | +# Add to root project |
| 157 | +yarn add <package-name> |
| 158 | + |
| 159 | +# Add to app (frontend) |
| 160 | +cd app && yarn add <package-name> |
| 161 | + |
| 162 | +# Add to backend |
| 163 | +cd backend && yarn add <package-name> |
| 164 | + |
| 165 | +# Add dev dependencies |
| 166 | +yarn add -D <package-name> |
| 167 | +``` |
| 168 | + |
| 169 | +### Important Dependency Notes |
| 170 | + |
| 171 | +- Main dependencies are in the root `package.json` |
| 172 | +- Frontend React app has its own dependencies in `app/package.json` |
| 173 | +- Backend models and logic have dependencies in `backend/package.json` |
| 174 | +- Always use `--frozen-lockfile` in CI to ensure reproducible builds |
| 175 | +- Run `yarn install` after pulling changes that modify `yarn.lock` |
| 176 | + |
| 177 | +## Debugging |
| 178 | + |
| 179 | +### Development Mode |
| 180 | + |
| 181 | +```bash |
| 182 | +# Start with hot reload for frontend |
| 183 | +yarn dev |
| 184 | + |
| 185 | +# This runs two processes in parallel: |
| 186 | +# 1. webpack-dev-server for the React app (port varies) |
| 187 | +# 2. Electron in development mode with the --development flag |
| 188 | +``` |
| 189 | + |
| 190 | +### Debugging TypeScript |
| 191 | + |
| 192 | +- Source maps are enabled in `tsconfig.json` |
| 193 | +- Use `ts-node` for running TypeScript files directly |
| 194 | +- Backend tests can be debugged with: `cd backend && yarn test-inspect` |
| 195 | + |
| 196 | +### Common Issues |
| 197 | + |
| 198 | +- **Build fails**: Clear `dist/` and `app/build/` directories, then rebuild |
| 199 | +- **Electron won't start**: Ensure `yarn build` completed successfully |
| 200 | +- **Tests fail**: Check if MQTT broker (mosquitto) is running for integration tests |
| 201 | +- **UI not updating**: In dev mode, ensure webpack-dev-server is running |
| 202 | + |
| 203 | +## Deployment and Packaging |
| 204 | + |
| 205 | +### Creating Releases |
| 206 | + |
| 207 | +```bash |
| 208 | +# Prepare release (updates version, changelog) |
| 209 | +yarn prepare-release |
| 210 | + |
| 211 | +# Package the application for distribution |
| 212 | +yarn package |
| 213 | + |
| 214 | +# Package with Docker (for consistent builds) |
| 215 | +yarn package-with-docker |
| 216 | +``` |
| 217 | + |
| 218 | +### Release Workflow |
| 219 | + |
| 220 | +- **Beta releases**: Create PR to `beta` branch with "feat:" or "fix:" commits |
| 221 | +- **Production releases**: Create PR to `release` branch with "feat:" or "fix:" commits |
| 222 | +- Semantic release automatically handles versioning and changelog |
| 223 | +- Builds are created for Windows, macOS, and Linux |
| 224 | + |
| 225 | +### Build Artifacts |
| 226 | + |
| 227 | +- Output directory: `build/` |
| 228 | +- Supported formats: DMG (macOS), EXE/NSIS (Windows), AppImage/Snap (Linux), AppX (Windows Store) |
| 229 | +- Code signing is configured via `res/` directory certificates and provisioning profiles |
| 230 | + |
100 | 231 | ## Important Notes |
101 | 232 |
|
102 | 233 | - Always run `yarn build` before starting the application |
103 | 234 | - The app uses Electron (see `package.json` for version) |
104 | 235 | - MQTT communication is handled via [mqttjs](https://github.com/mqttjs/MQTT.js) |
105 | 236 | - All code changes should pass linting (`yarn lint`) |
| 237 | +- Node.js version requirement: >= 18 |
| 238 | +- The project uses workspace-like structure with separate package.json files for app and backend |
0 commit comments