157 lines
3.8 KiB
Markdown
157 lines
3.8 KiB
Markdown
# Configuration Guide - Port Setup Explained
|
|
|
|
## Understanding the Two Ports
|
|
|
|
Your worship system has **two separate services** running on **two different ports**:
|
|
|
|
| Service | Port | What It Does |
|
|
|---------|------|--------------|
|
|
| **Backend (Flask API)** | 5000 | Handles data storage, database queries, API endpoints |
|
|
| **Frontend (React UI)** | 3000 | Displays the user interface (web pages) |
|
|
|
|
## How It Works
|
|
|
|
1. You **access** the app by opening the **frontend** at port **3000** in your browser
|
|
2. The frontend JavaScript then makes **API calls** to the **backend** at port **5000**
|
|
3. You must configure the Settings page to tell the frontend where the backend API is located
|
|
|
|
## Desktop/Local Machine Setup
|
|
|
|
### Step 1: Start Both Services
|
|
|
|
**Backend (API Server):**
|
|
|
|
```powershell
|
|
cd "E:\Documents\Website Projects\Church_SongLyric\backend"
|
|
python app.py
|
|
```
|
|
|
|
✅ Backend running on `http://localhost:5000`
|
|
|
|
**Frontend (React UI):**
|
|
|
|
```powershell
|
|
cd "E:\Documents\Website Projects\Church_SongLyric\frontend"
|
|
npm start
|
|
```
|
|
|
|
✅ Frontend running on `http://localhost:3000`
|
|
|
|
### Step 2: Configure Settings
|
|
|
|
1. Open `http://localhost:3000` in your browser
|
|
2. Click **Settings** (⚙️)
|
|
3. **Toggle OFF "Local Mode"** (disable the switch)
|
|
4. Enter these values:
|
|
- **Protocol**: `http`
|
|
- **Hostname**: `localhost`
|
|
- **Port**: `5000` ← **This is the BACKEND port**
|
|
5. Click **💾 Save DNS Settings**
|
|
6. Page will reload
|
|
|
|
✅ Your desktop is now configured!
|
|
|
|
## Mobile/Tablet Setup
|
|
|
|
### Step 1: Find Your Desktop's LAN IP
|
|
|
|
The backend script shows your LAN IP when it starts. Common examples:
|
|
|
|
- `10.5.0.2`
|
|
- `192.168.1.50`
|
|
- `192.168.0.100`
|
|
|
|
### Step 2: Access Frontend on Mobile
|
|
|
|
Open your mobile browser and go to:
|
|
|
|
```
|
|
http://YOUR_LAN_IP:3000
|
|
```
|
|
|
|
Examples:
|
|
|
|
- `http://10.5.0.2:3000`
|
|
- `http://192.168.1.50:3000`
|
|
|
|
### Step 3: Configure Settings on Mobile
|
|
|
|
1. Click **Settings** (⚙️)
|
|
2. **Toggle OFF "Local Mode"** (disable the switch)
|
|
3. Enter these values:
|
|
- **Protocol**: `http`
|
|
- **Hostname**: `10.5.0.2` ← **Your desktop's LAN IP**
|
|
- **Port**: `5000` ← **This is the BACKEND port (NOT 3000)**
|
|
4. Click **💾 Save DNS Settings**
|
|
5. Page will reload with synced data
|
|
|
|
✅ Your mobile is now configured!
|
|
|
|
## Common Mistakes
|
|
|
|
❌ **Wrong**: Setting mobile port to `3000`
|
|
|
|
- Port `3000` is just the React UI - it has no API backend
|
|
|
|
✅ **Correct**: Setting mobile port to `5000`
|
|
|
|
- Port `5000` is where the backend API lives
|
|
|
|
❌ **Wrong**: Accessing `http://10.5.0.2:5000` on mobile
|
|
|
|
- This shows raw API responses, not the user interface
|
|
|
|
✅ **Correct**: Accessing `http://10.5.0.2:3000` on mobile
|
|
|
|
- This loads the React UI, which then calls the API at port 5000
|
|
|
|
## Troubleshooting
|
|
|
|
### "Showing Offline" on Desktop
|
|
|
|
**Cause**: Settings are in "Local Mode" or not configured correctly
|
|
|
|
**Fix**:
|
|
|
|
1. Go to Settings
|
|
2. Toggle OFF "Local Mode"
|
|
3. Set hostname=`localhost`, port=`5000`
|
|
4. Click Save
|
|
|
|
### "Can't Sync" on Mobile
|
|
|
|
**Cause**: Wrong port or hostname in Settings
|
|
|
|
**Fix**:
|
|
|
|
1. Go to Settings on mobile
|
|
2. Toggle OFF "Local Mode"
|
|
3. Set hostname to your desktop's LAN IP (e.g., `10.5.0.2`)
|
|
4. Set port to `5000` (NOT 3000)
|
|
5. Click Save
|
|
|
|
### How to Check Backend Health
|
|
|
|
Desktop:
|
|
|
|
```
|
|
http://localhost:5000/api/health
|
|
```
|
|
|
|
Mobile (replace with your LAN IP):
|
|
|
|
```
|
|
http://10.5.0.2:5000/api/health
|
|
```
|
|
|
|
Should show: `{"status":"ok"}`
|
|
|
|
## Quick Reference Card
|
|
|
|
| Where | Access URL | Settings Hostname | Settings Port |
|
|
|-------|-----------|-------------------|---------------|
|
|
| **Desktop** | `http://localhost:3000` | `localhost` | `5000` |
|
|
| **Mobile** | `http://10.5.0.2:3000` | `10.5.0.2` | `5000` |
|
|
|
|
Remember: **Access on 3000, Configure to 5000**
|