Summary: Static HTML Demo Served from Go Backend

Problem

The project has both a Vue.js app (web/src) and a static HTML demo (web/static), but only the Vue.js app was being served. The improved modal UI we created was in the static folder but couldn't be accessed.

Solution

Configured the Go backend to serve the static HTML demo at the /demo/ route, while keeping the Vue.js app at the root / route.

Changes Made

1. Go Backend (cmd/server/main.go)

Added static file server for the /demo/ route:

// Static demo HTML (for testing/demo purposes)
staticDir := http.Dir("web/static")
staticHandler := http.StripPrefix("/demo/", http.FileServer(staticDir))
r.PathPrefix("/demo/").Handler(staticHandler)

Updated server startup logs:

log.Println("  Static Demo: http://localhost:" + port + "/demo/")

2. Nginx Configuration (web/nginx.conf)

Added proxy rule for /demo/ route:

# Static demo HTML served from Go backend
location /demo/ {
    proxy_pass http://mcp-server:8080;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

3. Docker Build

The web/static folder is already copied into the Go container during build:

COPY web ./web

This makes web/static/ available at /app/web/static/ inside the container.

Architecture

Browser Requests
      │
      ├─── http://localhost/          → Nginx → Vue.js SPA (web/dist)
      │                                          ↓
      │                                    Modern, production-ready
      │
      └─── http://localhost/demo/      → Nginx → Go:8080/demo/
                                                  ↓
                                            File server (web/static)
                                                  ↓
                                            Static HTML with
                                            improved modals

Access URLs

Production Vue.js App

• URL: http://localhost/
• Features: Modern SPA with Vue Router, Pinia, Tailwind CSS
• Purpose: Main production application

Static HTML Demo

• URL (via Nginx): http://localhost/demo/
• URL (direct): http://localhost:8080/demo/
• Features: Vanilla HTML/CSS/JS with improved modal UI
• Purpose: Testing, demos, quick prototyping

API Endpoints

• REST API: http://localhost/api/*
• WebSocket: ws://localhost/ws?project_id=
• Health Check: http://localhost/health
• API Docs: http://localhost/api/docs

File Locations

agent-shaker/
├── web/
│   ├── src/               ← Vue.js app (served at /)
│   │   ├── App.vue
│   │   ├── views/
│   │   └── components/
│   │
│   ├── static/            ← Static demo (served at /demo/)
│   │   ├── index.html    ← Modal improvements here
│   │   ├── app.js
│   │   └── style.css     ← Modern modal styling
│   │
│   ├── dist/              ← Built Vue.js (generated)
│   ├── Dockerfile         ← Builds Vue.js
│   └── nginx.conf         ← Proxies both routes
│
└── cmd/server/main.go     ← Go backend with file server

Benefits

Dual Frontend Approach

1. Production-Ready Vue.js: Optimized, scalable, maintainable
2. Quick Demo Static: Fast, no build step, easy to modify
3. Same API: Both frontends use the same Go backend
4. No Conflict: Clean separation with different routes

Flexibility

• Test features in static HTML (fast iteration)
• Port stable features to Vue.js (production)
• Keep static version for demos/documentation
• Both can coexist indefinitely

Usage Examples

Testing Modal UI

# Open static demo with improved modals
Start-Process "http://localhost/demo/"

# Click "+ Register Agent" to see the modern modal

Viewing Production App

# Open Vue.js SPA
Start-Process "http://localhost/"

# Navigate using Vue Router

Direct Backend Access

# Bypass Nginx, go directly to Go server
Invoke-WebRequest -Uri "http://localhost:8080/demo/" -UseBasicParsing

Development Workflow

Modifying Vue.js App

# Edit files in web/src/
# Rebuild Vue.js container
docker-compose up -d --build web

Modifying Static Demo

# Edit files in web/static/
# Rebuild Go server container (files are copied during build)
docker-compose up -d --build mcp-server

Important: Static files are copied into the Go container during build, so changes require rebuilding the mcp-server service.

Testing

All Endpoints Working

# Test Vue.js app
Invoke-WebRequest -Uri "http://localhost/" -UseBasicParsing
# Should return 200 with Vue.js SPA HTML

# Test static demo
Invoke-WebRequest -Uri "http://localhost/demo/" -UseBasicParsing
# Should return 200 with static HTML

# Test API
Invoke-WebRequest -Uri "http://localhost/api/projects" -UseBasicParsing
# Should return JSON with projects

# Check logs
docker-compose logs mcp-server | Select-Object -Last 20

Documentation Created

1. STATIC_DEMO_SETUP.md

• Complete technical guide
• Architecture diagrams
• Implementation details
• Troubleshooting
• Security considerations

2. FRONTEND_COMPARISON.md

• Side-by-side comparison
• Use case guidelines
• Code examples
• Performance metrics
• Migration paths

3. UI_IMPROVEMENTS.md

• Modal design improvements
• CSS changes
• Before/after comparison
• Color palette
• Spacing system

Key Takeaways

✅ Two Frontends, One Backend

• Vue.js at / for production
• Static HTML at /demo/ for testing
• Same Go API for both

✅ Clean Architecture Maintained

• No mixing of concerns
• Each service has clear purpose
• Easy to understand and modify

✅ Flexible Development

• Quick prototyping in static HTML
• Production-ready in Vue.js
• Both available simultaneously

✅ Well Documented

• Three comprehensive guides
• Clear examples
• Troubleshooting included

Next Steps

Immediate

• ✅ Test modal UI at http://localhost/demo/
• ✅ Verify API calls work from both frontends
• ✅ Review documentation

Future Enhancements

• Add environment variable to enable/disable /demo/ route
• Implement hot reload for static files during development
• Add authentication if demo contains sensitive data
• Consider CDN integration for production

Verification Checklist

• Go backend serves static files from /demo/ route
• Nginx proxies /demo/ requests to Go backend
• Vue.js app still works at root / route
• API endpoints accessible from both frontends
• WebSocket connections work
• Modal improvements visible in static demo
• All containers running and healthy
• Documentation complete and organized

Files Modified

1. cmd/server/main.go - Added static file server
2. web/nginx.conf - Added /demo/ proxy rule
3. docs/STATIC_DEMO_SETUP.md - Technical guide (new)
4. docs/FRONTEND_COMPARISON.md - Comparison guide (new)
5. docs/README.md - Updated with new docs

Conclusion

The project now has a dual frontend architecture where:

• Production users access the optimized Vue.js SPA at /
• Developers/testers access the static demo at /demo/
• AI agents access the API at /api/*
• Everyone benefits from the same reliable Go backend

This setup provides the best of both worlds: modern production app + quick testing/demo capability! 🚀