161 lines
4.0 KiB
Markdown
161 lines
4.0 KiB
Markdown
# 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)
|
|
|