4.9 KiB
n8n Webhook Routing Configuration
Overview
n8n is intentionally kept internal to the Docker network and not exposed to the internet. To allow the browser to trigger n8n workflows via webhooks, Kong (the API gateway) proxies webhook requests to the internal n8n service.
Architecture
Browser Kong (Port 55521) n8n (Port 5678, internal)
| | |
| POST /webhook/* | |
|----------------------> | (no strip_path) |
| | POST /webhook/* |
| |--------------------------> |
| | Webhook triggers |
| | workflow |
|<----- Response --------|<---------------------------|
Configuration Changes
1. Kong Configuration (supabase/kong.yml)
Added a new service to route webhook traffic to internal n8n:
- name: n8n-webhooks
url: http://n8n:5678/
routes:
- name: n8n-webhooks-all
strip_path: false
paths:
- /webhook/
plugins:
- name: cors
strip_path: falseensures the full/webhook/...path is forwarded to n8n- CORS plugin allows browser cross-origin requests (all origins for internal workflow triggers)
2. Docker Compose (docker-compose.yml)
Kong service:
- Added
n8nto thedepends_onlist (waits for n8n to start before Kong)
n8n service:
- Updated
WEBHOOK_URLenvironment variable to use${WEBHOOK_DOMAIN:http://localhost:55590}/ - This allows production deployments to override the default localhost URL
3. Frontend Configuration (frontend/config.js)
Updated the webhook URL configuration:
N8N_WEBHOOK_URL: "/webhook/manual-email-send"
This is a same-origin request path that works for both:
- Local:
http://localhost:55521/webhook/manual-email-send(Kong on port 55521) - Production:
https://your-domain.com/webhook/manual-email-send
4. Admin UI (frontend/admin.js)
Updated sendOrderEmailDirect() function to use the configured webhook URL directly:
const n8nUrl = window.MCCARS_CONFIG?.N8N_WEBHOOK_URL || "/webhook/manual-email-send";
Deployment Steps
For Production Deployment:
-
Update Kong configuration by deploying the modified
supabase/kong.yml- Kong will automatically reload the config and start proxying
/webhook/*requests
- Kong will automatically reload the config and start proxying
-
Set environment variables (in your
.envfile):# Optional: Override n8n webhook domain (defaults to localhost) WEBHOOK_DOMAIN=https://your-domain.comIf not set, n8n will use the default
http://localhost:55590/(only works internally) -
Deploy the updated code:
frontend/config.jswith the new webhook URLfrontend/admin.jswith the updated sendOrderEmailDirect functiondocker-compose.ymlwith Kong n8n dependencysupabase/kong.ymlwith the new n8n service
-
Restart the stack:
docker-compose up -d
For Local Development:
No special configuration needed:
- Kong is already on port 55521
- Browser requests to
/webhook/manual-email-sendwill be proxied to internal n8n - Works the same as production (same-origin requests)
How It Works
- Browser action: User clicks "Email senden" button in order dialog
- Browser request: JavaScript POSTs to
/webhook/manual-email-send(same origin) - Kong routing: Kong receives request, forwards to
http://n8n:5678/webhook/manual-email-send - n8n webhook: n8n webhook listener triggers the manual-email-send workflow
- Workflow execution: n8n fetches order data, builds email, sends via SMTP
- Response: Workflow returns success/error response to browser
Security
- Network isolation: n8n remains internal, not exposed to internet
- No authentication required: Webhook path is open (can be restricted later if needed)
- CORS enabled: Allows browser requests to Kong
- Kong isolation: Kong is the only service exposed; internal services hidden behind it
Troubleshooting
"Failed to fetch" error in browser
-
Check Kong is routing properly:
# Test from inside docker network docker-compose exec kong curl -v http://n8n:5678/webhook/manual-email-send -
Verify Kong config loaded:
docker-compose logs kong | grep "n8n-webhooks" -
Check n8n is running:
docker-compose logs n8n
n8n workflow not triggering
- Verify webhook path in n8n workflow (should be exactly
/webhook/manual-email-send) - Check n8n logs for webhook errors:
docker-compose logs n8n | grep webhook
References
- Kong configuration format: https://docs.konghq.com/deck/latest/
- n8n webhooks: https://docs.n8n.io/nodes/n8n-nodes-base.Webhook/
- Docker networking: https://docs.docker.com/engine/reference/commandline/network_connect/