SkyArtShop/DEVELOPMENT_MODE.md

# Development Mode - Localhost:5000 Setup

## ✅ Current Setup

### What Changed

- **Nginx**: Stopped and disabled
- **Backend**: Now serves files from development directory
- **Port**: Website runs on `http://localhost:5000`
- **Auto-reload**: PM2 watch mode enabled for instant changes

### File Locations

- **Development files**: `/media/pts/Website/SkyArtShop/website/`
  - Public pages: `website/public/`
  - Admin panel: `website/admin/`
  - Assets: `website/assets/`
  - Uploads: `website/uploads/`

### How It Works

```javascript
// Backend automatically serves from development directory
const baseDir = path.join(__dirname, "..", "website");
app.use(express.static(path.join(baseDir, "public")));
app.use("/admin", express.static(path.join(baseDir, "admin")));
```

## 🚀 Access Your Site

### URLs

- **Homepage**: <http://localhost:5000/>
- **Admin Login**: <http://localhost:5000/admin/login.html>
- **Admin Dashboard**: <http://localhost:5000/admin/dashboard.html>
- **Any page**: <http://localhost:5000/[page-name].html>

### API Endpoints

- **Admin API**: <http://localhost:5000/api/admin/>*
- **Public API**: <http://localhost:5000/api/>*
- **Health Check**: <http://localhost:5000/health>

## 🔄 Instant Reflection of Changes

### PM2 Watch Mode Enabled

PM2 is watching for changes and will auto-restart the backend when:

- Backend files change (routes, server.js, etc.)
- Configuration changes

### Frontend Changes (HTML/CSS/JS)

Frontend files are served directly from `/media/pts/Website/SkyArtShop/website/`

- Just **refresh your browser** (F5 or Ctrl+R)
- Changes show immediately - no deployment needed!
- No need to restart anything

### Backend Changes

- PM2 watch mode automatically restarts the server
- Changes apply within 1-2 seconds

## 📝 Development Workflow

### Making Changes

1. **Edit any file in `/media/pts/Website/SkyArtShop/website/`**

   ```bash
   # Example: Edit homepage
   nano /media/pts/Website/SkyArtShop/website/public/home.html
   
   # Example: Edit admin dashboard
   nano /media/pts/Website/SkyArtShop/website/admin/dashboard.html
   ```

2. **Refresh browser** - Changes show immediately!

3. **No deployment needed** - You're working directly with source files

### Checking Status

```bash
# Check if backend is running
pm2 status

# View logs
pm2 logs skyartshop

# Restart manually if needed
pm2 restart skyartshop
```

## 🛠️ Useful Commands

### Backend Management

```bash
# View PM2 status
pm2 status

# View real-time logs
pm2 logs skyartshop --lines 50

# Restart backend
pm2 restart skyartshop

# Stop backend
pm2 stop skyartshop

# Start backend
pm2 start skyartshop
```

### Test Endpoints

```bash
# Test homepage
curl http://localhost:5000/

# Test admin login
curl http://localhost:5000/admin/login.html

# Test API
curl http://localhost:5000/api/products

# Test health
curl http://localhost:5000/health
```

## 🌐 When Ready to Push Live

### Re-enable Nginx for Production

```bash
# 1. Deploy files to production
sudo ./deploy-website.sh

# 2. Update backend to production mode
# Edit backend/server.js: Set NODE_ENV=production

# 3. Restart backend
pm2 restart skyartshop

# 4. Enable and start nginx
sudo systemctl enable nginx
sudo systemctl start nginx
```

### Or Use Deployment Script

```bash
# Deploy everything at once
sudo ./deploy-website.sh
```

## 📊 Current Configuration

### Backend (server.js)

- **Environment**: Development (auto-detected)
- **Port**: 5000
- **Static Files**: `/media/pts/Website/SkyArtShop/website/`
- **Watch Mode**: Enabled
- **Session Cookie**: secure=false (for HTTP)

### Nginx

- **Status**: Stopped and disabled
- **Will be re-enabled**: When pushing to production

### Database

- **PostgreSQL**: Still connected and working
- **Session Store**: Active
- **All data preserved**: No changes to database

## ✨ Benefits

✅ **No deployment needed** - Work directly with source files
✅ **Instant changes** - Just refresh browser
✅ **Auto-restart** - PM2 watches for backend changes
✅ **No HTTPS complexity** - Simple HTTP development
✅ **Database intact** - All your data is safe
✅ **Easy testing** - One URL: localhost:5000

## 🎯 Summary

**Before:**

- Nginx on port 80/443 → Served from /var/www/skyartshop/
- Had to deploy every change
- Two different sites (localhost vs domain)

**Now:**

- Backend on port 5000 → Serves from /media/pts/Website/SkyArtShop/website/
- Edit files directly, refresh browser
- One development site on localhost:5000
- Ready to push to production when done

---

**Access your site now at: <http://localhost:5000>** 🚀