Introducción: si estás empezando en el backend o ya conoces lo básico y buscas entender mejor la lógica detrás de servidores, rutas y conceptos fundamentales, este artículo te ayudará a clarificar el camino. Es normal sentirse confuso al principio; con práctica todo encaja.
Routing: Frontend vs Backend. En el frontend moderno con herramientas como Vite y bibliotecas como React Router, gran parte del enrutamiento es automático o se ejecuta en el navegador. El servidor de desarrollo de Vite sirve archivos desde src en memoria, responde a peticiones de /styles/main.css sin que escribas código extra y permite que React Router gestione rutas como /profile una vez que la app carga. En el backend con Express la historia cambia: Express es minimalista y no asume nada. Cada ruta se debe declarar manualmente, por ejemplo app.post(/api/login, handler) o app.get(/api/users, handler). Si alguien pide /main.css y no has configurado static, Express devolverá 404.
De source a server. En desarrollo npm run dev ejecuta servidores orientados a productividad: Vite sirve desde memoria y usa HMR para actualizaciones instantáneas; Express suele correr con nodemon para reinicios automáticos. Antes de publicar hay que compilar con npm run build para generar la carpeta dist o build con archivos optimizados, minificados y listos para producción.
express.static y servir dist. Una vez construido el frontend hay que indicarle a Express dónde servir esos archivos estáticos. Por ejemplo app.use(express.static(path.join(__dirname, client/dist))) hace que cualquier petición que no coincida con una ruta API sea buscada en client/dist y entregue el archivo si existe. Esto es lo que convierte la carpeta dist en la versión pública de la aplicación.
Dev vs Production: no son lo mismo. En Dev se prioriza la velocidad de desarrollo, logs verbosos y herramientas que reinician o muestran errores detallados. En Production se busca estabilidad, seguridad y rendimiento: código compilado y minificado, cachés adecuados y gestores de procesos como PM2. Ejecutar el modo desarrollo en un servidor público expone detalles sensibles, variables de entorno y rutas internas, además de penalizar rendimiento y estabilidad.
Orden importa: middleware y rutas críticas. En Express el orden de app.use importa porque los middlewares se ejecutan secuencialmente. Es común ver un flujo como app.use(cors) app.use(express.json) app.use(/api, apiRouter) app.use(express.static(path.join(__dirname, client/dist))) y después las rutas restantes. Colocar express.static en el punto correcto evita que las peticiones de archivos sean interceptadas por otros handlers.
La trampa de React Router y la ruta catch all. Para que las rutas de una SPA funcionen cuando el usuario pide directamente /profile desde el navegador, Express necesita una ruta que capture todo lo no manejado y devuelva index.html. Por ejemplo app.get(*) res.sendFile(path.resolve(FRONTEND_BUILD_PATH, index.html)) permite que el navegador cargue la SPA y que React Router interprete la URL y muestre el componente correcto.
Sobre Q2BSTUDIO: somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones integrales para empresas. Diseñamos software a medida y aplicaciones a medida, implementamos inteligencia artificial y desarrollamos agentes IA e IA para empresas, ofrecemos servicios de ciberseguridad y pentesting, y gestionamos infraestructuras en servicios cloud aws y azure. Si buscas crear una aplicación empresarial robusta podemos ayudarte desde el diseño hasta la puesta en producción y el mantenimiento.
Servicios y casos prácticos: en Q2BSTUDIO combinamos desarrollo a medida con inteligencia de negocio y analítica avanzada como Power BI para convertir datos en decisiones. Si necesitas una solución a medida visita desarrollo de aplicaciones y software multiplataforma para conocer nuestros procesos. Para proyectos que integren modelos y automatizaciones basadas en IA consulta nuestras capacidades en inteligencia artificial para empresas.
Conclusión: pasar de Vite a Express implica cambiar la mentalidad de servir desde memoria y confiar en tooling automático a definir rutas explícitas, servir la carpeta dist con express.static y gestionar el orden de middleware y rutas para que la SPA funcione correctamente. Si te interesa que un equipo experto te acompañe en la creación de software a medida, soluciones de inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, agentes IA o implementaciones con power bi en Q2BSTUDIO estamos listos para ayudar.
