mirror of
https://github.com/netbirdio/netbird.git
synced 2026-04-21 17:56:39 +00:00
158 lines
3.0 KiB
Markdown
158 lines
3.0 KiB
Markdown
# Quick Start Guide
|
|
|
|
## Getting Started in 3 Steps
|
|
|
|
### 1. Install Dependencies
|
|
|
|
```bash
|
|
cd /home/pascal/Git/Netbird/netbird/client/ui-electron
|
|
npm install
|
|
```
|
|
|
|
This will install all required packages including:
|
|
- Electron 28
|
|
- React 18
|
|
- TypeScript 5
|
|
- Tailwind CSS
|
|
- Framer Motion
|
|
- gRPC libraries
|
|
|
|
### 2. Start Development Server
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
This command:
|
|
- Starts Vite dev server on `http://localhost:5173`
|
|
- Compiles Electron TypeScript code
|
|
- Launches Electron window
|
|
- Enables hot reload for React components
|
|
|
|
### 3. Start Using the App
|
|
|
|
The app will open with:
|
|
- Modern glass-themed interface
|
|
- System tray icon
|
|
- Real-time connection status
|
|
- Full feature access
|
|
|
|
## What You'll See
|
|
|
|
### Dashboard Page
|
|
- Connection status with animated icon
|
|
- Connect/Disconnect button
|
|
- Quick feature overview
|
|
- Configuration summary
|
|
|
|
### Networks Page
|
|
- List of available networks
|
|
- Select/deselect networks
|
|
- View domains and IPs
|
|
- Filter by type
|
|
|
|
### Settings Page
|
|
- Connection configuration
|
|
- Feature toggles (SSH, Rosenpass, etc.)
|
|
- Advanced settings
|
|
- Save changes instantly
|
|
|
|
### Profiles Page
|
|
- View all profiles
|
|
- Switch between profiles
|
|
- Active profile indicator
|
|
|
|
### Debug Page
|
|
- Create debug bundles
|
|
- Anonymization option
|
|
- Export diagnostics
|
|
|
|
## Development Tips
|
|
|
|
### File Structure
|
|
```
|
|
src/
|
|
├── App.tsx # Main app with routing
|
|
├── store/ # Zustand state management
|
|
└── pages/ # Individual page components
|
|
```
|
|
|
|
### Making Changes
|
|
|
|
1. **UI Changes**: Edit files in `src/pages/` - auto-reloads
|
|
2. **State Logic**: Modify `src/store/useStore.ts`
|
|
3. **Electron Main**: Edit `electron/main.ts` - requires restart
|
|
4. **gRPC Client**: Update `electron/grpc/client.ts`
|
|
5. **Styles**: Customize `tailwind.config.js`
|
|
|
|
### Testing Connection
|
|
|
|
Ensure NetBird daemon is running:
|
|
|
|
```bash
|
|
netbird status
|
|
```
|
|
|
|
Should show daemon is operational.
|
|
|
|
## Building for Production
|
|
|
|
### Quick Build
|
|
|
|
```bash
|
|
npm run build
|
|
npm run build:linux
|
|
```
|
|
|
|
Creates distributable packages in `release/` directory.
|
|
|
|
### Packages Created
|
|
|
|
- **AppImage**: Portable Linux application
|
|
- **.deb**: Debian/Ubuntu package
|
|
- **Unpacked**: Direct executable
|
|
|
|
## Troubleshooting
|
|
|
|
### Port 5173 already in use
|
|
```bash
|
|
kill $(lsof -t -i:5173)
|
|
npm run dev
|
|
```
|
|
|
|
### Cannot connect to daemon
|
|
```bash
|
|
systemctl status netbird
|
|
netbird service start # if not running
|
|
```
|
|
|
|
### Build errors
|
|
```bash
|
|
rm -rf node_modules package-lock.json dist
|
|
npm install
|
|
npm run build
|
|
```
|
|
|
|
## Next Steps
|
|
|
|
1. **Customize Theme**: Edit `tailwind.config.js` colors
|
|
2. **Add Features**: Extend pages in `src/pages/`
|
|
3. **Add Icons**: Place PNGs in `assets/` directory
|
|
4. **Test Build**: Run `npm run build:linux`
|
|
|
|
## Resources
|
|
|
|
- **NetBird Docs**: https://docs.netbird.io
|
|
- **Electron Docs**: https://electronjs.org/docs
|
|
- **React Docs**: https://react.dev
|
|
- **Tailwind Docs**: https://tailwindcss.com
|
|
|
|
## Support
|
|
|
|
- GitHub Issues: https://github.com/netbirdio/netbird/issues
|
|
- NetBird Slack: Join via netbird.io
|
|
|
|
---
|
|
|
|
Happy coding! Enjoy the modern NetBird UI.
|