504 lines
12 KiB
Markdown
504 lines
12 KiB
Markdown
# 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
|