Unraid Mobile

A React Native mobile application for monitoring and managing your Unraid server. Built with TypeScript and GraphQL.

Features

• Real-time server status monitoring
• Array information and disk management
• Docker container status and management
• System resource monitoring (CPU, RAM, disk usage)
• Secure API key authentication
• Auto-refresh functionality
• Pull-to-refresh support

Prerequisites

• Node.js and npm
• React Native CLI
• For iOS: Xcode and CocoaPods
• For Android: Android Studio and SDK
• An Unraid server with API access enabled

Quick Start

1. Install Dependencies

npm install

2. iOS Setup (if building for iOS)

cd ios
pod install
cd ..

3. Start the App

# Start Metro bundler
npm start

# In a new terminal, run the app
npm run ios     # for iOS
npm run android # for Android

Authentication Setup

Generating an API Key

1. Open your Unraid server web interface
2. Navigate to Settings → Management Access → API Keys
3. Click "Add Key" and configure:
   • Name: e.g., "Mobile App"
   • Description: e.g., "React Native monitoring app"
   • Permissions: Grant read/write access as needed
4. Click Generate and copy the API key (save it securely!)

Connecting to Your Server

1. Launch the app
2. Enter your server URL:
   • Local: http://192.168.1.100
   • Remote: https://your-server.unraid.net
   • Custom domain: https://unraid.yourdomain.com
3. Paste your API key
4. Tap Connect

The app uses GraphQL with the /graphql endpoint and authenticates via the x-api-key header.

Project Structure

UnraidMobile/
├── src/
│   ├── api/
│   │   └── unraidApi.ts        # GraphQL API client
│   ├── components/
│   │   ├── ArrayCard.tsx       # Array information display
│   │   ├── ServerCard.tsx      # Server status display
│   │   └── DockerCard.tsx      # Docker container display
│   ├── screens/
│   │   ├── SetupScreen.tsx     # Server configuration
│   │   └── DashboardScreen.tsx # Main dashboard
│   ├── types/
│   │   └── index.ts            # TypeScript definitions
│   └── generated/              # GraphQL codegen output
├── App.tsx                      # Root component
└── codegen.ts                   # GraphQL code generation config

GraphQL Code Generation

The project uses GraphQL Code Generator for type-safe API calls:

npm run codegen

This generates TypeScript types and React hooks from your GraphQL schema and queries.

Development

Available Scripts

• npm start - Start Metro bundler
• npm run android - Run on Android
• npm run ios - Run on iOS
• npm test - Run tests
• npm run lint - Run ESLint
• npm run codegen - Generate GraphQL types

Simulator Shortcuts

When the iOS simulator is open:

• ⌘ + Shift + H - Home button
• ⌘ + K - Toggle keyboard
• ⌘ + R - Reload app
• ⌘ + D - Open developer menu

Troubleshooting

Authentication Issues

"Authentication failed"

• Verify your API key is correct
• Check if the key has been revoked
• Generate a new API key from Unraid settings

"Access forbidden"

• Your API key lacks necessary permissions
• Edit the key in Unraid and grant required permissions

"Server not found"

• Verify your server URL format
• Ensure the server is accessible from your device
• Check network connectivity

Build Issues

iOS Pod Install Failed

cd ios
pod deintegrate
pod install
cd ..

Metro Bundler Issues

npm start -- --reset-cache

Clean Rebuild

# Clear dependencies
rm -rf node_modules
npm install

# iOS clean
cd ios && rm -rf build && cd ..

Security

• API keys are stored securely using AsyncStorage
• Keys are transmitted via headers (not URLs)
• HTTPS is recommended for production
• API keys can be revoked anytime from Unraid settings

Contributing

This is a personal project but contributions are welcome. Please ensure:

• Code follows existing style (ESLint)
• TypeScript types are properly defined
• GraphQL queries are in src/api/queries.ts
• Run npm run codegen after modifying queries

License

MIT