¿Alguna vez te has preguntado cómo hace una página web para mostrar tu nombre de usuario o el saldo de tu cuenta en tiempo real? La respuesta no está solo en el HTML, sino en cómo el servidor (Python) se comunica con el navegador.

Si ya sabes crear una ruta básica en Flask que devuelve un simple “Hola Mundo”, el siguiente paso es aprender a servir archivos HTML reales. En este post, vamos a construir el puente entre tu lógica de backend y tus plantillas de frontend.

1. La estructura de carpetas: La regla de oro

Flask es un framework muy flexible, pero tiene una regla que no puedes romper: tus archivos HTML deben estar dentro de una carpeta llamada templates/ en la raíz de tu proyecto.

mi_proyecto/
├── app.py
└── templates/
    └── index.html

Si no creas esta carpeta exactamente con ese nombre, Flask no encontrará tus archivos y verás el famoso error TemplateNotFound.

2. El comando mágico: render_template

Para enviar un archivo HTML al navegador, usamos la función render_template. No es solo “leer un archivo”, es procesarlo antes de enviarlo.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

3. Pasando datos de Python a HTML

Aquí es donde ocurre la magia. Puedes pasar cualquier variable de tu código Python a tu archivo HTML simplemente añadiéndola como un argumento en render_template.

@app.route('/perfil')
def perfil():
    nombre_usuario = "Miguel Angel"
    edad_usuario = 25
    return render_template('perfil.html', nombre=nombre_usuario, edad=edad_usuario)

En tu archivo perfil.html, Jinja2 (el motor de plantillas de Flask) reconocerá estas variables usando dobles llaves:

<!-- perfil.html -->
<h1>Bienvenido, {{ nombre }}!</h1>
<p>Tienes {{ edad }} años.</p>

Tip: El nombre que pongas a la izquierda del igual en render_template es el que usarás dentro del HTML. El de la derecha es el nombre de la variable en tu código Python.

4. ¿Por qué no usar solo HTML estático?

Podrías pensar: “¿Por qué no simplemente escribir el nombre directamente en el HTML?”. La respuesta es la escalabilidad.

Imagina que tienes 1,000 usuarios. No vas a crear 1,000 archivos HTML. Con Flask, creas una sola plantilla y le pasas los datos dinámicos de cada usuario desde una base de datos. Eso es el verdadero desarrollo backend.

Conclusión: Tu checklist de conexión

Antes de pasar al siguiente nivel, asegúrate de que tu proyecto cumple con esto:

  1. ¿Tus HTML están dentro de la carpeta /templates?
  2. ¿Importaste render_template desde flask?
  3. ¿Estás usando las dobles llaves {{ }} en el HTML para mostrar tus variables?
  4. ¿El nombre de la variable en render_template('template.html', nombre=variable) coincide con el que usas en el HTML?

Siguiente paso recomendado: Rutas Dinámicas en Flask: Crea miles de páginas con una sola función