Proyecto Full Stack 🚀 Backend Python y Frontend React (usando Vite)

En este tutorial aprenderás a conectar una interfaz moderna desarrollada con React y Vite, con un backend en Flask (Python).

Este enfoque de desarrollo full stack permite:

• separar la lógica del cliente (frontend) de la del servidor (backend),
• facilitando la escalabilidad y el mantenimiento del proyecto.

🔧 Requisitos previos

Antes de comenzar, asegúrate de tener instalado:

• Node.js (para desarrollar usando React y Vite).
• Python 3 (para el backend con Flask).
• Un gestor de paquetes (como npm, para instalar las dependencias).

Alternativa: Aprende viendo

Si eres de los que prefiere aprender viendo un tutorial en vez de leerlo.

También pudes hacerlo.

Sólo dale clic al video:

🔨 Paso 1: Crear el proyecto en React con Vite

Empecemos generando una aplicación React usando Vite.

Para esto ejecutamos los siguientes comandos:

npm create vite@latest client-react -- --template react
cd client-react
npm install

Puedes reemplazar client-react por el nombre que desees para tu proyecto.

Esto creará un proyecto liviano con:

• soporte para módulos ES
• y recarga automática.

🐍 Paso 2: Configurar el backend en Flask

Crea una carpeta aparte, llamada server-flask.

Dentro de ella vamos a preparar el entorno para Flask.

0. Crea un entorno virtual:

   python -m venv venv
   

1. Activa el entorno virtual:

   source venv/bin/activate   # macOS / Linux
   venv\Scripts\activate      # Windows
   

2. Instala Flask:

   pip install flask
   

3. Crea el archivo principal app.py:

   from flask import Flask
   
   app = Flask(__name__)
   
   @app.route('/')
   def hello_world():
       return 'Hola mundo, desde Programación y más!'
   
   if __name__ == "__main__":
       app.run(debug=True)
   

Este código devuelve un saludo cuando visitas la ruta raíz /.

Para esto, debes:

• Ejecutar python app.py desde la terminal.
• Usar el puerto por defecto (cuando no se especifica es 5000).

Es decir, tras visitar http://127.0.0.1:5000, verás en tu navegador el saludo.

🔄 Paso 3: Conectar React con Flask

Desde el frontend en React, puedes realizar peticiones HTTP a la API de Flask usando fetch():

useEffect(() => {
  fetch('http://localhost:5000/')
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));
}, []);

• Este código realiza una petición a la API, y
• muestra la respuesta en la consola del navegador:

"Hola mundo, desde Programación y más!"

🌐 Paso 4: Solucionar problemas de CORS

Al ejecutar React y Flask en diferentes puertos durante el desarrollo, pueden surgir errores de CORS (Cross-Origin Resource Sharing).

Para resolver esto, instala flask-cors:

pip install flask-cors

Modifica app.py para permitir solicitudes desde el frontend:

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

Esto permite que React se comunique libremente con el backend, sin restricciones durante el desarrollo.

🛠️ Paso 5: Despliegue y producción

En producción, hay varias formas de combinar ambos proyectos:

• Opción 1: Construir el proyecto React (npm run build) y servir los archivos estáticos desde Flask.
• Opción 2: Desplegar React y Flask como servicios separados en la nube (por ejemplo, Vercel para el frontend y Digital Ocean para el backend).

Haremos lo segundo, a fin de optimizar el rendimiento y mejorar la escalabilidad de nuestra aplicación.

🔗 Resumen general

Qué hicimos hoy:

Tarea	Resultado
Crear React con Vite	Interfaz moderna y rápida
Configurar Flask	Servidor backend en Python
Conectar ambos	Comunicación mediante fetch()
Resolver CORS	Evitar errores de origen cruzado

💡 Próximos pasos

• Integrar una base de datos (MySQL, PostgreSQL, etc) en Flask.
• Implementar autenticación de usuarios.
• Contenerizar ambos servicios con Docker.

Conclusión

Esta combinación de React + Flask ofrece una estructura potente y flexible para proyectos full stack modernos:

• aprovechando la velocidad del frontend React usando Vite,
• y la simplicidad del backend en Python.

# python # react # javascript # vite