# Marketing Development Environment with HMR

**Status:** ✅ **ACTIVE**

The marketing site now has a development environment with Hot Module Replacement (HMR) - just like the app dev environment!

---

## 🚀 Quick Start

### Current Setup
- **Dev Server:** `igny8_marketing_dev` (Vite with HMR)
- **Access:** `https://igny8.com` (routed through Caddy)
- **Direct Access:** `http://localhost:8023`
- **Port:** 5174 (internal), 8023 (external)

### How It Works
1. **Volume Mount:** `/data/app/igny8/frontend` → `/app` (live file watching)
2. **HMR Enabled:** Changes to files/images update in real-time
3. **No Rebuild Needed:** Just edit files and see changes instantly!

---

## 📝 Development Workflow

### Making Changes
1. **Edit files** in `/data/app/igny8/frontend/src/marketing/`
2. **Edit images** in `/data/app/igny8/frontend/public/marketing/images/`
3. **See changes instantly** - HMR updates the browser automatically!

### No Need To:
- ❌ Run `npm run build:marketing`
- ❌ Rebuild Docker image
- ❌ Restart container
- ❌ Copy files manually

### Just:
- ✅ Edit files
- ✅ Save
- ✅ See changes in browser (HMR handles the rest!)

---

## 🔄 Switching Between Dev and Production

### Development Mode (Current)
**Caddyfile routes to:** `igny8_marketing_dev:5174`

```caddyfile
igny8.com {
    reverse_proxy igny8_marketing_dev:5174 {
        # WebSocket support for HMR
        header_up Connection {>Connection}
        header_up Upgrade {>Upgrade}
    }
}
```

### Production Mode
**Caddyfile routes to:** `igny8_marketing:8020`

```caddyfile
igny8.com {
    reverse_proxy igny8_marketing:8020 {
        # Static production build
    }
}
```

**To switch:** Edit `/var/lib/docker/volumes/portainer_data/_data/caddy/Caddyfile` and restart Caddy.

---

## 🛠️ Container Management

### Start Dev Server
```bash
cd /data/app/igny8
docker compose -f docker-compose.app.yml -p igny8-app up -d igny8_marketing_dev
```

### View Logs
```bash
docker logs igny8_marketing_dev -f
```

### Restart Dev Server
```bash
docker compose -f docker-compose.app.yml -p igny8-app restart igny8_marketing_dev
```

### Stop Dev Server
```bash
docker compose -f docker-compose.app.yml -p igny8-app stop igny8_marketing_dev
```

---

## 📂 File Locations

| Type | Location |
|------|----------|
| **Marketing Components** | `/data/app/igny8/frontend/src/marketing/` |
| **Marketing Pages** | `/data/app/igny8/frontend/src/marketing/pages/` |
| **Marketing Images** | `/data/app/igny8/frontend/public/marketing/images/` |
| **Marketing Styles** | `/data/app/igny8/frontend/src/marketing/styles/` |

---

## ✅ Benefits

1. **Real-time Updates** - Changes reflect immediately
2. **No Rebuilds** - Edit and save, that's it!
3. **Fast Development** - Same experience as app dev environment
4. **Image Updates** - Images in `public/marketing/images/` update instantly
5. **Component Updates** - React components hot-reload automatically

---

## 🔍 Troubleshooting

### Changes Not Appearing
1. Check container is running: `docker ps | grep igny8_marketing_dev`
2. Check logs: `docker logs igny8_marketing_dev`
3. Verify volume mount: Files should be in `/data/app/igny8/frontend/`

### HMR Not Working
1. Check browser console for WebSocket errors
2. Verify Caddyfile has WebSocket headers
3. Restart Caddy: `docker compose restart caddy`

### Port Conflicts
- Dev server uses port 5174 (internal), 8023 (external)
- If conflicts occur, change port in `docker-compose.app.yml`

---

## 📊 Current Status

✅ **Dev Server:** Running  
✅ **HMR:** Enabled  
✅ **Volume Mount:** Active  
✅ **Caddy Routing:** Configured  
✅ **WebSocket Support:** Enabled  

---

## 🎯 Next Steps

When ready for production:
1. Build production image: `docker build -t igny8-marketing:latest -f Dockerfile.marketing .`
2. Update Caddyfile to route to `igny8_marketing:8020`
3. Restart Caddy: `docker compose restart caddy`

---

**See Also:**
- [Marketing Deployment Guide](./MARKETING_DEPLOYMENT.md)
- [Deployment Architecture](./DEPLOYMENT_ARCHITECTURE.md)