igny8/docs/MARKETING_DEV_ENVIRONMENT.md

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

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

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

cd /data/app/igny8
docker compose -f docker-compose.app.yml -p igny8-app up -d igny8_marketing_dev

View Logs

docker logs igny8_marketing_dev -f

Restart Dev Server

docker compose -f docker-compose.app.yml -p igny8-app restart igny8_marketing_dev

Stop Dev Server

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
• Deployment Architecture