Skip to content

Commit 7e6783a

Browse files
Enhance Copilot instructions with comprehensive best practices
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
1 parent 831eeee commit 7e6783a

1 file changed

Lines changed: 133 additions & 0 deletions

File tree

.github/copilot-instructions.md

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
# GitHub Copilot Agent Instructions for MQTT Explorer
22

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+
317
## Project Setup
418

519
### Building and Running
@@ -97,9 +111,128 @@ The project supports MCP (Model Context Protocol) for automated testing with Pla
97111
- `src/` - Electron main process and bindings
98112
- `src/spec/` - Test specifications including MCP introspection tests
99113

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+
100231
## Important Notes
101232

102233
- Always run `yarn build` before starting the application
103234
- The app uses Electron (see `package.json` for version)
104235
- MQTT communication is handled via [mqttjs](https://github.com/mqttjs/MQTT.js)
105236
- 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

Comments
 (0)