181 lines
3.6 KiB
Markdown
181 lines
3.6 KiB
Markdown
# 🚀 Starting the Website Monitor
|
|
|
|
## ✅ Setup Complete!
|
|
|
|
Your Website Monitor is ready to run!
|
|
|
|
## Start the Servers
|
|
|
|
### Option 1: Manual Start (Recommended for Development)
|
|
|
|
Open **3 separate terminals**:
|
|
|
|
#### Terminal 1: Docker (Database)
|
|
```bash
|
|
cd website-monitor
|
|
docker-compose up
|
|
```
|
|
Leave this running to see database logs.
|
|
|
|
#### Terminal 2: Backend API
|
|
```bash
|
|
cd website-monitor/backend
|
|
npm run dev
|
|
```
|
|
Backend will run on http://localhost:3002
|
|
|
|
#### Terminal 3: Frontend
|
|
```bash
|
|
cd website-monitor/frontend
|
|
npm run dev
|
|
```
|
|
Frontend will run on http://localhost:3000
|
|
|
|
### Option 2: Background Mode
|
|
|
|
```bash
|
|
# Start databases in background
|
|
cd website-monitor
|
|
docker-compose up -d
|
|
|
|
# Start backend (in one terminal)
|
|
cd backend
|
|
npm run dev
|
|
|
|
# Start frontend (in another terminal)
|
|
cd frontend
|
|
npm run dev
|
|
```
|
|
|
|
## 🎯 Access the Application
|
|
|
|
Once all three are running:
|
|
1. Open http://localhost:3000
|
|
2. Click "Sign up" to create an account
|
|
3. Enter email and password (min 8 chars, needs uppercase, lowercase, number)
|
|
4. Start monitoring websites!
|
|
|
|
## 🔍 Verify Everything Works
|
|
|
|
### Check Backend Health
|
|
```bash
|
|
curl http://localhost:3002/health
|
|
```
|
|
|
|
Should return:
|
|
```json
|
|
{
|
|
"status": "ok",
|
|
"timestamp": "...",
|
|
"uptime": 123
|
|
}
|
|
```
|
|
|
|
### Check Database
|
|
```bash
|
|
docker exec -it website-monitor-postgres psql -U admin -d website_monitor -c "SELECT COUNT(*) FROM users;"
|
|
```
|
|
|
|
### Check Services
|
|
```bash
|
|
docker-compose ps
|
|
```
|
|
|
|
Both containers should show "Up" and "healthy".
|
|
|
|
## 📋 Create Your First Monitor
|
|
|
|
1. **Register Account**: Go to http://localhost:3000 and sign up
|
|
2. **Add Monitor**: Click "+ Add Monitor" button
|
|
3. **Enter URL**: e.g., `https://example.com`
|
|
4. **Set Frequency**: Choose how often to check (5min, 30min, 1hr, etc.)
|
|
5. **Create**: Click "Create Monitor"
|
|
6. **Check Now**: Click "Check Now" to trigger immediate check
|
|
7. **View History**: Click "History" to see results
|
|
|
|
## 🛑 Stopping the Application
|
|
|
|
### Stop Backend/Frontend
|
|
Press `Ctrl+C` in each terminal window
|
|
|
|
### Stop Docker
|
|
```bash
|
|
cd website-monitor
|
|
docker-compose down
|
|
```
|
|
|
|
## 🔧 Configuration
|
|
|
|
### Ports Used
|
|
- Frontend: **3000**
|
|
- Backend API: **3002**
|
|
- PostgreSQL: **5433** (changed from 5432 to avoid conflicts)
|
|
- Redis: **6380** (changed from 6379 to avoid conflicts)
|
|
|
|
### Database Credentials
|
|
- Host: localhost:5433
|
|
- Database: website_monitor
|
|
- User: admin
|
|
- Password: admin123
|
|
|
|
## 📝 Common Commands
|
|
|
|
```bash
|
|
# View backend logs
|
|
cd backend && npm run dev
|
|
|
|
# View frontend logs
|
|
cd frontend && npm run dev
|
|
|
|
# View database logs
|
|
docker logs -f website-monitor-postgres
|
|
|
|
# View Redis logs
|
|
docker logs -f website-monitor-redis
|
|
|
|
# Access database directly
|
|
docker exec -it website-monitor-postgres psql -U admin -d website_monitor
|
|
|
|
# Access Redis directly
|
|
docker exec -it website-monitor-redis redis-cli -p 6379
|
|
```
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Port Already in Use
|
|
If you see "port already in use":
|
|
- Frontend (3000): `npm run dev -- -p 3001`
|
|
- Backend (3002): Change PORT in backend/.env
|
|
|
|
### Database Connection Error
|
|
```bash
|
|
# Restart PostgreSQL
|
|
docker-compose restart postgres
|
|
|
|
# Check if running
|
|
docker ps
|
|
```
|
|
|
|
### Can't Create Account
|
|
Password requirements:
|
|
- Minimum 8 characters
|
|
- At least one uppercase letter
|
|
- At least one lowercase letter
|
|
- At least one number
|
|
- Example: `Password123`
|
|
|
|
## 🎉 You're All Set!
|
|
|
|
Your website monitoring system is running and ready to use!
|
|
|
|
**Next steps:**
|
|
- Create your first monitor
|
|
- Test with simple websites like https://example.com
|
|
- Check the history to see changes
|
|
- Explore the dashboard features
|
|
|
|
For more details, see:
|
|
- `README.md` - Full documentation
|
|
- `SETUP.md` - Detailed setup guide
|
|
- `PROJECT_STATUS.md` - Current features
|