vibetunnel/docs/CONTRIBUTING.md
Peter Steinberger c6a299ac5f
Add push notifications onboarding screen (#474)
Co-authored-by: Diego Petrucci <baulei@icloud.com>
2025-07-27 12:12:30 +00:00

316 lines
8.2 KiB
Markdown

# Contributing to VibeTunnel
We love your input! We want to make contributing to VibeTunnel as easy and transparent as possible, whether it's:
- Reporting a bug
- Discussing the current state of the code
- Submitting a fix
- Proposing new features
- Becoming a maintainer
## Development Setup
### Prerequisites
1. **macOS 14.0+** (Sonoma or later)
2. **Xcode 16.0+** with Swift 6.0 support
3. **Node.js 20+**: `brew install node`
4. **Bun runtime**: `curl -fsSL https://bun.sh/install | bash`
5. **Git**: For version control
### Getting Started
1. **Fork and clone the repository**
```bash
git clone https://github.com/[your-username]/vibetunnel.git
cd vibetunnel
```
2. **Set up development environment**
```bash
# Install Node.js dependencies
cd web
pnpm install
# Start the development server (keep this running)
pnpm run dev
```
3. **Open the Xcode project**
```bash
# From the root directory
open mac/VibeTunnel-Mac.xcodeproj
```
4. **Configure code signing (optional for development)**
- Copy `apple/Local.xcconfig.template` to `apple/Local.xcconfig`
- Add your development team ID (or leave empty for ad-hoc signing)
- This file is gitignored to keep your settings private
## Development Workflow
### Working with the Web Server
The web server (Node.js/TypeScript) runs in development mode with hot reloading:
```bash
cd web
pnpm run dev # Keep this running in a separate terminal
```
**Custom Port Configuration** (if port 4020 is already in use):
```bash
# Option 1: Run server directly with custom port (cleanest approach)
pnpm run dev:server --port 4021
# Option 2: Using environment variable
PORT=4021 pnpm run dev
# Option 3: Using the full dev command with arguments (requires --)
pnpm run dev -- --port 4021
```
**Development Commands**:
- `pnpm run dev` - Run everything (server, client watcher, CSS, assets)
- `pnpm run dev:server` - Run just the server (accepts --port directly!)
- `pnpm run dev:client` - Run just client-side watchers
**Important**: Never manually build the web project - the development server handles all compilation automatically.
### Working with the macOS App
1. Open `mac/VibeTunnel.xcworkspace` in Xcode
2. Select the VibeTunnel scheme
3. Build and run (⌘R)
The app will automatically use the development server running on `http://localhost:4020`.
### Working with the iOS App
1. Open `ios/VibeTunnel.xcodeproj` in Xcode
2. Select your target device/simulator
3. Build and run (⌘R)
## Code Style Guidelines
### Swift Code
We use modern Swift 6.0 patterns with strict concurrency checking:
- **SwiftFormat**: Automated formatting with `.swiftformat` configuration
- **SwiftLint**: Linting rules in `.swiftlint.yml`
- Use `@MainActor` for UI-related code
- Use `@Observable` for SwiftUI state objects
- Prefer `async/await` over completion handlers
Run before committing:
```bash
cd mac
swiftformat .
swiftlint
```
### TypeScript/JavaScript Code
- **Biome**: For code formatting and linting (replaces ESLint + Prettier)
- **TypeScript**: Strict mode enabled
Run before committing:
```bash
cd web
pnpm run precommit # Runs format + lint fixes + typecheck in one command
```
Or run individually if needed:
```bash
pnpm run format # Format with Biome
pnpm run lint # Check with Biome + TypeScript
pnpm run lint:fix # Auto-fix Biome issues
pnpm run typecheck # Check TypeScript types only
```
### Important Rules
- **NEVER use `setTimeout` in frontend code** unless explicitly necessary
- **Always fix ALL lint and type errors** before committing
- **Never commit without user testing** the changes
- **No hardcoded values** - use configuration files
- **No console.log in production code** - use proper logging
## Project Structure
```
vibetunnel/
├── mac/ # macOS application
│ ├── VibeTunnel/ # Swift source code
│ │ ├── Core/ # Business logic
│ │ ├── Presentation/ # UI components
│ │ └── Utilities/ # Helper functions
│ ├── VibeTunnelTests/ # Unit tests
│ └── scripts/ # Build and release scripts
├── ios/ # iOS companion app
│ └── VibeTunnel/ # Swift source code
├── web/ # Web server and frontend
│ ├── src/
│ │ ├── server/ # Node.js server (TypeScript)
│ │ └── client/ # Web frontend (Lit/TypeScript)
│ └── public/ # Static assets
└── docs/ # Documentation
```
## Testing
### macOS Tests
We use Swift Testing framework:
```bash
# Run tests in Xcode
xcodebuild test -workspace mac/VibeTunnel.xcworkspace -scheme VibeTunnel
# Or use Xcode UI (⌘U)
```
Test categories (tags):
- `.critical` - Must-pass tests
- `.networking` - Network-related tests
- `.concurrency` - Async operations
- `.security` - Security features
### Web Tests
We use Vitest for Node.js testing:
```bash
cd web
pnpm run test
```
### Writing Tests
- Write tests for all new features
- Include both positive and negative test cases
- Mock external dependencies
- Keep tests focused and fast
## Making a Pull Request
1. **Create a feature branch**
```bash
git checkout -b feature/your-feature-name
```
2. **Make your changes**
- Follow the code style guidelines
- Write/update tests
- Update documentation if needed
3. **Test your changes**
- Run the test suite
- Test manually in the app
- Check both macOS and web components
4. **Commit your changes**
```bash
# Web changes
cd web && pnpm run precommit
# Swift changes
cd mac && swiftformat . && swiftlint
# Commit
git add .
git commit -m "feat: add amazing feature"
```
5. **Push and create PR**
```bash
git push origin feature/your-feature-name
```
Then create a pull request on GitHub.
## Commit Message Convention
We follow conventional commits:
- `feat:` New feature
- `fix:` Bug fix
- `docs:` Documentation changes
- `style:` Code style changes (formatting, etc)
- `refactor:` Code refactoring
- `test:` Test changes
- `chore:` Build process or auxiliary tool changes
## Debugging Tips
### macOS App
- Use Xcode's debugger (breakpoints, LLDB)
- Check Console.app for system logs
- Enable debug logging in Settings → Debug
### Web Server
- Use Chrome DevTools for frontend debugging
- Server logs appear in the terminal running `pnpm run dev`
- Use `--inspect` flag for Node.js debugging
### Common Issues
**"Port already in use"**
- Another instance might be running (e.g., production VibeTunnel app)
- Check Activity Monitor for `vibetunnel` processes
- Quick fix: `pnpm run dev:server --port 4021` (no -- needed!)
- Or use environment variable: `PORT=4021 pnpm run dev`
- See "Custom Port Configuration" section above for all options
**"Binary not found"**
- Run `cd web && node build-native.js` to build the Bun executable
- Check that `web/native/vibetunnel` exists
**WebSocket connection failures**
- Ensure the server is running (`pnpm run dev`)
- Check for CORS issues in browser console
- Verify the port matches between client and server
## Documentation
When adding new features:
1. Update the relevant documentation in `docs/`
2. Add JSDoc/Swift documentation comments
3. Update README.md if it's a user-facing feature
4. Include examples in your documentation
## Security Considerations
- Never commit secrets or API keys
- Use Keychain for sensitive data storage
- Validate all user inputs
- Follow principle of least privilege
- Test authentication and authorization thoroughly
## Getting Help
- Join our [Discord server](https://discord.gg/vibetunnel) (if available)
- Check existing issues on GitHub
- Read the [Technical Specification](spec.md)
- Ask questions in pull requests
## Code Review Process
All submissions require review before merging:
1. Automated checks must pass (linting, tests)
2. At least one maintainer approval required
3. Resolve all review comments
4. Keep PRs focused and reasonably sized
## License
By contributing, you agree that your contributions will be licensed under the MIT License. See [LICENSE](../LICENSE) for details.
## Thank You!
Your contributions make VibeTunnel better for everyone. We appreciate your time and effort in improving the project! 🎉