Initial commit - Church Music Database
This commit is contained in:
503
legacy-site/documentation/md-files/NOIP_SETUP_GUIDE.md
Normal file
503
legacy-site/documentation/md-files/NOIP_SETUP_GUIDE.md
Normal file
@@ -0,0 +1,503 @@
|
||||
# No-IP Setup Guide for House of Prayer Song Lyric App
|
||||
|
||||
**Domain:** houseofprayer.ddns.net
|
||||
**Date:** November 30, 2025
|
||||
**Public IP:** 170.254.17.146
|
||||
**Local IP:** 192.168.10.178
|
||||
|
||||
---
|
||||
|
||||
## 📋 Overview
|
||||
|
||||
This guide will help you configure No-IP Dynamic DNS so your church song lyric application can be accessed from anywhere using `houseofprayer.ddns.net`.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 What You'll Achieve
|
||||
|
||||
- **Before:** App only accessible on local network (192.168.10.178:3000)
|
||||
- **After:** App accessible worldwide at <https://houseofprayer.ddns.net:3000>
|
||||
|
||||
---
|
||||
|
||||
## 📦 Step 1: Install No-IP Dynamic Update Client (DUC)
|
||||
|
||||
### Download and Install
|
||||
|
||||
1. **Visit No-IP Website:**
|
||||
- Go to: <https://www.noip.com/download>
|
||||
- Download "Dynamic Update Client (DUC) for Windows"
|
||||
|
||||
2. **Run Installer:**
|
||||
- Execute the downloaded file (e.g., `DUC-Win-x64.exe`)
|
||||
- Follow installation wizard
|
||||
- Choose installation directory (default: `C:\Program Files (x86)\No-IP\`)
|
||||
|
||||
3. **Launch No-IP DUC:**
|
||||
- Open from Start Menu or desktop shortcut
|
||||
- **Login** with your No-IP credentials (same as website login)
|
||||
|
||||
### Configure DUC
|
||||
|
||||
1. **Select Hostname:**
|
||||
- In the DUC interface, you should see: `houseofprayer.ddns.net`
|
||||
- **Check the box** next to it to enable automatic updates
|
||||
|
||||
2. **Configure Update Interval:**
|
||||
- Set to update every **5 minutes** (recommended)
|
||||
- This ensures your domain always points to your current public IP
|
||||
|
||||
3. **Set to Run on Startup:**
|
||||
- In DUC settings, enable "Start on Windows Startup"
|
||||
- This ensures your domain stays updated even after PC restarts
|
||||
|
||||
4. **Verify Status:**
|
||||
- DUC should show: ✓ **"Up to Date"** in green
|
||||
- Public IP should match: `170.254.17.146`
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Step 2: Configure Router Port Forwarding
|
||||
|
||||
### Why Port Forwarding?
|
||||
|
||||
Your router acts as a gateway between the internet and your home network. Port forwarding tells the router to direct external traffic to your PC.
|
||||
|
||||
### Access Router Settings
|
||||
|
||||
1. **Open Router Admin Page:**
|
||||
- In browser, go to: `http://192.168.1.1` (or `192.168.0.1`)
|
||||
- Common router IPs:
|
||||
- Netgear: 192.168.1.1
|
||||
- TP-Link: 192.168.0.1
|
||||
- Linksys: 192.168.1.1
|
||||
- ASUS: 192.168.1.1
|
||||
|
||||
2. **Login:**
|
||||
- Use your router admin username/password
|
||||
- Default credentials (if never changed):
|
||||
- Username: `admin`
|
||||
- Password: `admin` or `password` (check router label)
|
||||
|
||||
### Create Port Forwarding Rules
|
||||
|
||||
Navigate to: **Advanced > Port Forwarding** (or similar menu)
|
||||
|
||||
#### Rule 1: Frontend (React App)
|
||||
|
||||
```
|
||||
Service Name: Church_Frontend
|
||||
Internal IP: 192.168.10.178 (your PC's local IP)
|
||||
External Port: 3000
|
||||
Internal Port: 3000
|
||||
Protocol: TCP
|
||||
Status: Enabled
|
||||
```
|
||||
|
||||
#### Rule 2: Backend API
|
||||
|
||||
```
|
||||
Service Name: Church_Backend
|
||||
Internal IP: 192.168.10.178
|
||||
External Port: 5000
|
||||
Internal Port: 5000
|
||||
Protocol: TCP
|
||||
Status: Enabled
|
||||
```
|
||||
|
||||
#### Optional Rule 3: HTTPS (if using SSL later)
|
||||
|
||||
```
|
||||
Service Name: Church_HTTPS
|
||||
Internal IP: 192.168.10.178
|
||||
External Port: 443
|
||||
Internal Port: 443
|
||||
Protocol: TCP
|
||||
Status: Enabled
|
||||
```
|
||||
|
||||
### Important Notes
|
||||
|
||||
- **Save/Apply** changes after adding rules
|
||||
- Some routers require a reboot
|
||||
- Your PC must use a **static local IP** (192.168.10.178) or DHCP reservation
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Step 3: Update Backend Configuration
|
||||
|
||||
### Update Flask Backend to Accept External Connections
|
||||
|
||||
Your backend currently binds to `localhost` or `0.0.0.0`. For external access, ensure it's binding to `0.0.0.0`.
|
||||
|
||||
**File:** `backend/app.py`
|
||||
|
||||
Check the last lines of the file (around line 640):
|
||||
|
||||
```python
|
||||
if __name__ == '__main__':
|
||||
app.run(
|
||||
host='0.0.0.0', # ✓ Allows external connections
|
||||
port=5000,
|
||||
debug=True
|
||||
)
|
||||
```
|
||||
|
||||
If it says `host='127.0.0.1'` or `host='localhost'`, change it to `host='0.0.0.0'`.
|
||||
|
||||
### Update CORS Settings (if needed)
|
||||
|
||||
Check that CORS allows your domain:
|
||||
|
||||
```python
|
||||
# In app.py, near the top
|
||||
from flask_cors import CORS
|
||||
|
||||
CORS(app, resources={
|
||||
r"/api/*": {
|
||||
"origins": [
|
||||
"http://localhost:3000",
|
||||
"http://192.168.10.178:3000",
|
||||
"http://houseofprayer.ddns.net:3000",
|
||||
"https://houseofprayer.ddns.net:3000"
|
||||
]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌍 Step 4: Update Frontend API Configuration
|
||||
|
||||
Update the frontend to use your No-IP domain for external access.
|
||||
|
||||
**File:** `frontend/src/api.js`
|
||||
|
||||
The frontend should detect whether it's running locally or externally and use the appropriate API endpoint.
|
||||
|
||||
### Option A: Manual Configuration
|
||||
|
||||
In Settings page, users can configure:
|
||||
|
||||
- **Protocol:** `https` (if SSL) or `http`
|
||||
- **Hostname:** `houseofprayer.ddns.net`
|
||||
- **Port:** `5000`
|
||||
|
||||
### Option B: Auto-Detection (Recommended)
|
||||
|
||||
Update `getAPIBase()` in `frontend/src/api.js` to detect environment:
|
||||
|
||||
```javascript
|
||||
function getAPIBase() {
|
||||
const settings = getAPISettings();
|
||||
if (settings.useLocalStorage) return null;
|
||||
|
||||
// Auto-detect if accessing via No-IP domain
|
||||
if (window.location.hostname === 'houseofprayer.ddns.net') {
|
||||
return `https://houseofprayer.ddns.net:5000/api`;
|
||||
}
|
||||
|
||||
// Otherwise use configured settings
|
||||
return `${settings.protocol}://${settings.hostname}:${settings.port}/api`;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Step 5: Windows Firewall Configuration
|
||||
|
||||
Ensure Windows Firewall allows incoming connections on ports 3000 and 5000.
|
||||
|
||||
### Create Firewall Rules
|
||||
|
||||
Run these commands in **PowerShell as Administrator**:
|
||||
|
||||
```powershell
|
||||
# Allow Frontend (Port 3000)
|
||||
New-NetFirewallRule -DisplayName "Church App Frontend" -Direction Inbound -LocalPort 3000 -Protocol TCP -Action Allow
|
||||
|
||||
# Allow Backend (Port 5000)
|
||||
New-NetFirewallRule -DisplayName "Church App Backend" -Direction Inbound -LocalPort 5000 -Protocol TCP -Action Allow
|
||||
```
|
||||
|
||||
### Verify Rules
|
||||
|
||||
```powershell
|
||||
Get-NetFirewallRule | Where-Object { $_.DisplayName -like "*Church*" }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Step 6: Testing External Access
|
||||
|
||||
### Test from Inside Network
|
||||
|
||||
1. **Open browser on your PC:**
|
||||
- Go to: `http://houseofprayer.ddns.net:3000`
|
||||
- Should see the app (if DUC is working)
|
||||
|
||||
### Test from Outside Network
|
||||
|
||||
**Use mobile data** (turn off WiFi on phone) or ask someone outside your network:
|
||||
|
||||
1. **Test Backend API:**
|
||||
- Visit: `http://houseofprayer.ddns.net:5000/api/health`
|
||||
- Should see: `{"status":"ok","ts":"..."}`
|
||||
|
||||
2. **Test Frontend:**
|
||||
- Visit: `http://houseofprayer.ddns.net:3000`
|
||||
- Should load the app
|
||||
- Try selecting a profile and viewing songs
|
||||
|
||||
### Troubleshooting Tests
|
||||
|
||||
If external access doesn't work:
|
||||
|
||||
```powershell
|
||||
# Check if ports are listening
|
||||
netstat -an | Select-String ":3000|:5000"
|
||||
|
||||
# Should show:
|
||||
# TCP 0.0.0.0:3000 0.0.0.0:0 LISTENING
|
||||
# TCP 0.0.0.0:5000 0.0.0.0:0 LISTENING
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Step 7: Security Considerations
|
||||
|
||||
### Current Setup (HTTP)
|
||||
|
||||
- **Pros:** Easy to set up, works immediately
|
||||
- **Cons:** Data transmitted in plain text (not encrypted)
|
||||
|
||||
### Recommended: Add HTTPS (SSL/TLS)
|
||||
|
||||
For secure access, you should add SSL certificates:
|
||||
|
||||
1. **Get Free SSL Certificate:**
|
||||
- Use Let's Encrypt (free, automated)
|
||||
- Or use Cloudflare (free proxy + SSL)
|
||||
|
||||
2. **Install Certificate:**
|
||||
- Configure Flask to use SSL
|
||||
- Update frontend URLs to `https://`
|
||||
|
||||
3. **Redirect HTTP → HTTPS:**
|
||||
- Force all traffic to use HTTPS
|
||||
|
||||
### Basic Security Measures
|
||||
|
||||
1. **Add Authentication:**
|
||||
- Require login before accessing app
|
||||
- Use session tokens or JWT
|
||||
|
||||
2. **Rate Limiting:**
|
||||
- Prevent abuse by limiting API requests
|
||||
- Use Flask-Limiter extension
|
||||
|
||||
3. **Keep Updated:**
|
||||
- Regularly update dependencies
|
||||
- Monitor for security vulnerabilities
|
||||
|
||||
---
|
||||
|
||||
## 📱 Step 8: Update Mobile Access Instructions
|
||||
|
||||
Once No-IP is configured, update how family members access the app:
|
||||
|
||||
### For Users at Home (Same WiFi)
|
||||
|
||||
- Use local IP: `http://192.168.10.178:3000`
|
||||
- Faster, no internet required
|
||||
|
||||
### For Users Outside Home
|
||||
|
||||
- Use No-IP domain: `http://houseofprayer.ddns.net:3000`
|
||||
- Works from anywhere with internet
|
||||
|
||||
### For All Users (Universal URL)
|
||||
|
||||
- Use No-IP domain everywhere: `http://houseofprayer.ddns.net:3000`
|
||||
- Works both inside and outside home network
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Step 9: Automatic Startup Configuration
|
||||
|
||||
### Backend Auto-Start
|
||||
|
||||
Create a Windows Task Scheduler task or startup script:
|
||||
|
||||
**File:** `backend/start-backend.bat`
|
||||
|
||||
```batch
|
||||
@echo off
|
||||
cd /d "E:\Documents\Website Projects\Church_SongLyric\backend"
|
||||
call venv\Scripts\activate
|
||||
python app.py
|
||||
```
|
||||
|
||||
**Add to Windows Startup:**
|
||||
|
||||
1. Press `Win + R`
|
||||
2. Type: `shell:startup`
|
||||
3. Create shortcut to `start-backend.bat`
|
||||
|
||||
### Frontend Auto-Start
|
||||
|
||||
**File:** `frontend/start-frontend.bat`
|
||||
|
||||
```batch
|
||||
@echo off
|
||||
cd /d "E:\Documents\Website Projects\Church_SongLyric\frontend"
|
||||
npm start
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Verification Checklist
|
||||
|
||||
Use this checklist to ensure everything is configured correctly:
|
||||
|
||||
### ✅ No-IP DUC
|
||||
|
||||
- [ ] DUC installed and running
|
||||
- [ ] Logged in with No-IP account
|
||||
- [ ] `houseofprayer.ddns.net` selected and enabled
|
||||
- [ ] Status shows "Up to Date" (green)
|
||||
- [ ] Public IP matches current IP (170.254.17.146)
|
||||
- [ ] Set to start on Windows startup
|
||||
|
||||
### ✅ Router Configuration
|
||||
|
||||
- [ ] Port 3000 forwarded to 192.168.10.178
|
||||
- [ ] Port 5000 forwarded to 192.168.10.178
|
||||
- [ ] Rules saved and applied
|
||||
- [ ] Router rebooted (if required)
|
||||
|
||||
### ✅ Windows Firewall
|
||||
|
||||
- [ ] Port 3000 inbound rule created
|
||||
- [ ] Port 5000 inbound rule created
|
||||
- [ ] Rules are enabled
|
||||
|
||||
### ✅ Backend Configuration
|
||||
|
||||
- [ ] `app.py` binds to `0.0.0.0:5000`
|
||||
- [ ] CORS allows `houseofprayer.ddns.net`
|
||||
- [ ] Backend running and accessible locally
|
||||
|
||||
### ✅ Frontend Configuration
|
||||
|
||||
- [ ] API settings support No-IP domain
|
||||
- [ ] Frontend running on port 3000
|
||||
|
||||
### ✅ Testing
|
||||
|
||||
- [ ] Can access `http://houseofprayer.ddns.net:5000/api/health` externally
|
||||
- [ ] Can access `http://houseofprayer.ddns.net:3000` externally
|
||||
- [ ] App loads correctly from outside network
|
||||
- [ ] Can select profiles and view songs
|
||||
- [ ] Database operations work (create/edit/delete)
|
||||
|
||||
---
|
||||
|
||||
## 🆘 Troubleshooting
|
||||
|
||||
### Problem: Domain doesn't resolve
|
||||
|
||||
**Check:**
|
||||
|
||||
```powershell
|
||||
nslookup houseofprayer.ddns.net
|
||||
```
|
||||
|
||||
**Solution:**
|
||||
|
||||
- Ensure No-IP DUC is running and logged in
|
||||
- Check DUC status (should be green)
|
||||
- Wait 5 minutes for DNS propagation
|
||||
- Try from different network (mobile data)
|
||||
|
||||
### Problem: Connection timeout
|
||||
|
||||
**Possible Causes:**
|
||||
|
||||
1. **Port forwarding not configured**
|
||||
- Verify router rules are saved
|
||||
- Check internal IP is correct (192.168.10.178)
|
||||
|
||||
2. **Firewall blocking**
|
||||
- Check Windows Firewall rules exist
|
||||
- Temporarily disable firewall to test
|
||||
|
||||
3. **Services not running**
|
||||
- Ensure backend running: `netstat -an | Select-String ":5000"`
|
||||
- Ensure frontend running: `netstat -an | Select-String ":3000"`
|
||||
|
||||
### Problem: Backend responds but frontend doesn't
|
||||
|
||||
**Check CORS:**
|
||||
|
||||
- Backend CORS must allow your domain
|
||||
- Check browser console for CORS errors
|
||||
- Update `app.py` CORS origins
|
||||
|
||||
### Problem: ISP Blocks Ports
|
||||
|
||||
Some ISPs block common ports like 80, 443, 8080.
|
||||
|
||||
**Solution:**
|
||||
|
||||
- Use non-standard ports (5000, 3000 are usually fine)
|
||||
- Contact ISP to request port unblocking
|
||||
- Consider using Cloudflare tunnel (bypasses port blocking)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Test Commands
|
||||
|
||||
Run these to verify setup:
|
||||
|
||||
```powershell
|
||||
# Test No-IP resolution
|
||||
nslookup houseofprayer.ddns.net
|
||||
|
||||
# Test backend from inside
|
||||
Invoke-RestMethod -Uri "http://houseofprayer.ddns.net:5000/api/health"
|
||||
|
||||
# Test backend from outside (use mobile data)
|
||||
# curl http://houseofprayer.ddns.net:5000/api/health
|
||||
|
||||
# Check listening ports
|
||||
netstat -an | Select-String ":3000|:5000"
|
||||
|
||||
# Check firewall rules
|
||||
Get-NetFirewallRule | Where-Object { $_.DisplayName -like "*Church*" }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📖 Additional Resources
|
||||
|
||||
- **No-IP Documentation:** <https://www.noip.com/support>
|
||||
- **Port Forwarding Guide:** <https://portforward.com>
|
||||
- **Let's Encrypt SSL:** <https://letsencrypt.org>
|
||||
- **Flask Security:** <https://flask.palletsprojects.com/en/2.3.x/security/>
|
||||
|
||||
---
|
||||
|
||||
## 📝 Notes
|
||||
|
||||
- Keep your No-IP account active (free accounts require login every 30 days)
|
||||
- Your public IP may change; No-IP DUC automatically updates the DNS
|
||||
- Consider upgrading to No-IP Plus for better features (no monthly confirmation)
|
||||
- For production use, strongly recommend adding HTTPS/SSL
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** November 30, 2025
|
||||
**Domain:** houseofprayer.ddns.net
|
||||
**Status:** Ready for Configuration
|
||||
**Next Step:** Install No-IP DUC and configure router port forwarding
|
||||
Reference in New Issue
Block a user