Cómo hostear una página web completa en n8n con un solo nodo

¿Sabías que puedes hostear una página completa en n8n usando un solo nodo? Con el nodo webhook y un ajuste clave, el método GET sirve el HTML y el POST envía la petición. A continuación verás los pasos, las opciones que marcar y cómo probarlo para que funcione de punta a punta.

¿Cómo hostear una web en n8n con un solo nodo?

La idea central es simple: un único nodo webhook puede manejar varios métodos HTTP. Así, el GET devuelve la interfaz en HTML y el POST procesa el envío del formulario dentro del mismo flujo.

• Hasta ahora se usó el webhook con método POST.
• El cambio: activar varios métodos para que GET sirva el HTML y POST reciba la petición.
• El resultado: una web completa alojada en n8n, con formulario y lógica de servidor en el flujo.

¿Qué cambiar en Settings para usar GET y POST?

• Abrir el nodo webhook y entrar a Settings.
• Activar la opción Allow multiple HTTP methods.
• Volver a Parámetros y seleccionar ambos: GET y POST.
• Salir y reconectar el POST como estaba antes.

¿Cómo responder con HTML desde el flujo?

• Añadir un nodo de respuesta: Respond to Webhook.
• Elegir la opción de responder con texto.
• Pegar el HTML que servirá como interfaz del formulario.
• Recordar: antes, copiar la URL del webhook porque será el backend al que el formulario hará la petición.

¿Cómo generar el formulario con ChatGPT?

• Preparar un prompt para crear un formulario en HTML.
• Incluir donde corresponda la URL del webhook como acción del formulario.
• Puedes añadir CSS y JavaScript para un diseño más completo.
• Copiar y pegar el código en la parte de GET del nodo de respuesta.

¿Qué pasos seguir para pegar, guardar y ejecutar?

Una vez tengas el HTML, solo resta integrarlo y probarlo en n8n. El flujo queda listo para servir interfaz y procesar envíos.

• Pegar el HTML en la sección de GET del nodo Respond to Webhook.
• Cerrar y guardar el flujo.
• Copiar la URL pública del webhook.
• Pulsar Execute workflow para ponerlo a escuchar.
• Abrir la URL en una pestaña del navegador: verás un formulario totalmente diferente, servido por el GET.

¿Cómo validar que la petición entra por la rama correcta?

• Enviar el formulario para probar el POST (ejemplo usado: ivi@test.com).
• Comprobar en el editor que el flujo sigue la rama del GET al servir la página y la del POST al enviar la petición.
• Mensaje esperado: se envió correctamente y el flujo continuó como estaba previsto.

¿Qué habilidades y conceptos refuerzas con este flujo?

Este enfoque potencia tu dominio de n8n y de la web. Entiendes el rol de cada método y cómo integrarlo de forma práctica.

• Métodos HTTP: GET para servir interfaz, POST para procesar datos.
• Nodo webhook: flexibilidad para manejar múltiples métodos en un mismo endpoint.
• Configuración clave: Allow multiple HTTP methods en Settings.
• Respuesta con texto: uso de Respond to Webhook para enviar HTML al navegador.
• Integración frontend–backend: formulario en HTML que apunta con su acción a la URL del webhook como backend.
• Herramientas de apoyo: ChatGPT para generar estructura de formulario, con posibilidad de CSS y JavaScript.
• Pruebas end-to-end: ejecutar con Execute workflow, abrir la URL, verificar ramas GET y POST y confirmar el envío.

¿Te animas a crear tu propio diseño? Sube una captura de pantalla y cuéntanos en los comentarios cómo lo implementaste y qué mejoras añadirías.