localhost:5173 - Guía del puerto del servidor de desarrollo de Vite


Actualizado el 1 ago 2026

localhost:5173

Puerto del servidor de desarrollo de Vite

⚡ Abrir localhost:5173

El servidor de desarrollo de Vite, con HMR sobre módulos ES nativos

localhost:5173 es la dirección a la que se enlaza el servidor de desarrollo de Vite por defecto al ejecutar npm run dev. localhost resuelve a 127.0.0.1 (tu máquina) y 5173 es el puerto que Vite eligió en la v2.7 para no chocar con Create React App en el 3000 y compañía.

Hay un pequeño chiste en el número: 5-1-7-3 se lee como V-I-T-E si miras un teclado de teléfono. Ingenioso, pero la razón de que casi cualquier proyecto de frontend que toques en 2026 acabe en este puerto es más aburrida: Vite es el servidor de desarrollo por defecto de casi todos los frameworks modernos.

En 2026, Vite 8 viene con Rolldown, un empaquetador escrito en Rust que sustituye a la antigua combinación de Rollup y esbuild. Las compilaciones de producción son entre 1,6 y 7,7 veces más rápidas que en Vite 7 sobre bases de código reales (Linear pasó de 46 s a 6 s; Ramp bajó un 57 %; Beehiiv un 64 %). Se mantuvo la compatibilidad de la API de plugins, pero algunos plugins de Rollup que tocan detalles internos todavía necesitan actualizarse: compruébalo antes de actualizar un monorepo grande. El servidor de desarrollo en localhost:5173 funciona igual que antes, aunque por dentro usa ahora la Environment API (introducida en Vite 6) para tratar los entornos de cliente, SSR y edge como entornos separados y configurables, la base sobre la que TanStack Start, Nuxt y SvelteKit construyen su paridad entre desarrollo y producción. A su alrededor, el ecosistema ha sumado TanStack Start (React full-stack sobre Vite, en RC de la v1 desde principios de 2026), Vite+ (la cadena de herramientas integrada de VoidZero) y agentes de programación como Claude Code y Cursor, que manejan el servidor de Vite para automatizar el navegador.

Acceder a localhost:5173 desde otros dispositivos

localhost solo resuelve en la máquina donde corre Vite, así que un móvil en el mismo wifi o un compañero al otro lado de la oficina no pueden entrar directamente. Tienes dos opciones: enlazar Vite a tu IP de la red local (npm run dev -- --host y luego entrar en http://<tu-ip>:5173), o abrir un túnel para cualquiera en internet. Para lo segundo, un comando de Pinggy funciona sin instalar nada:

ssh -p 443 -R0:localhost:5173 free.pinggy.io

Recibirás una URL pública HTTPS que hace de proxy a localhost:5173. Va bien para enseñar un trabajo en curso a un cliente, probar en Safari de iOS sin pelearte con certificados o apuntar un webhook (Stripe, Clerk, GitHub) a un manejador local. Aviso: el HMR de Vite va por WebSockets y, según tu vite.config.js, puede que tengas que poner server.hmr.clientPort: 443 y añadir el host del túnel a server.allowedHosts para que la recarga en caliente siga funcionando.

Servicios y programas que usan el puerto 5173

El puerto 5173 lo usan sobre todo Vite y las aplicaciones construidas sobre él. Estas son las principales:

⚡ Frameworks basados en Vite

  • TanStack Start: React (y Solid) full-stack sobre Vite. En RC de la v1 desde principios de 2026: usable en producción, con el ecosistema aún completándose
  • Vue.js 3: el scaffold por defecto (npm create vue@latest) monta Vite
  • React: Vite es el punto de partida recomendado por el equipo de React desde que CRA se retiró en 2025
  • SvelteKit: el framework full-stack de Svelte, sobre Vite
  • Astro: estático orientado a contenido con arquitectura de islas, construido sobre Vite
  • Nuxt 3: el framework full-stack de Vue, sobre Vite y Nitro
  • Remix: React full-stack, basado en Vite desde la v2
  • Qwik: framework centrado en la resumibilidad, con Vite por debajo
  • Solid.js: runtime reactivo de grano fino, con plantilla de Vite
  • Analog: metaframework de Angular sobre Vite
  • Waku: framework mínimo de React Server Components sobre Vite
  • Lit: librería de web components que funciona bien con Vite
  • Preact: alternativa a React de 3 KB, con plantilla de Vite

🛠️ Herramientas de desarrollo

  • Servidor de Vite 8: el proceso que realmente escucha en el 5173. La v8 trae Rolldown como empaquetador (compilaciones de 10 a 30 veces más rápidas que con Rollup)
  • Vite+: la cadena de herramientas de VoidZero que junta Vite, Vitest, Rolldown y Oxc en una sola CLI
  • Vitest: ejecutor de pruebas unitarias nativo de Vite; reutiliza tu vite.config.js
  • TanStack DevTools: panel unificado para Query, Router, Form y Start, instalado como plugin de Vite
  • Storybook: usa Vite como constructor (Storybook 7 en adelante)
  • Playwright / Cypress: ejecutores de pruebas E2E que apuntan a la URL de desarrollo de Vite
  • Agentes de programación con IA: Cursor, Claude Code y similares arrancan Vite con server.open: false y strictPort: true para que la URL sea predecible en los pasos de navegador sin interfaz
  • MSW: Mock Service Worker, intercepta fetch durante el desarrollo para que programes contra una API que aún no existe
  • vite-plugin-pwa: añade un service worker y un manifiesto a tu build; funciona en el 5173 en desarrollo con devOptions.enabled: true
  • Oxc / Biome: herramientas de lint y formato en Rust; Oxc mueve ahora @vitejs/plugin-react-oxc para transformar más rápido
  • Hono: framework web orientado a edge con integración de primera con Vite (@hono/vite-dev-server) para aplicaciones full-stack en un solo puerto
  • Plugins de Vite: desde vite-plugin-svelte hasta @vitejs/plugin-react-oxc

📱 Aplicaciones web modernas

  • Aplicaciones de una sola página (SPA): aplicaciones completas que corren enteras en el navegador
  • Aplicaciones web progresivas (PWA): funcionan sin conexión y se sienten como una app nativa
  • Proyectos en TypeScript: tipado completo desde el primer momento
  • JavaScript sin framework: solo módulos ES modernos
  • Web components: elementos HTML propios y reutilizables
  • Aplicaciones móviles: apps de iOS y Android con Capacitor o Tauri

🎨 Herramientas de frontend

  • Frameworks de CSS: Tailwind CSS, UnoCSS, Sass
  • Librerías de componentes: crear y probar componentes con recarga en vivo
  • Microfrontends: federación de módulos para aplicaciones componibles
  • Sitios de documentación: VitePress o Dumi
  • Sistemas de diseño: construir y mantener sistemas de componentes
  • Generadores de blogs: Astro para sitios con mucho contenido

Ejecuta npm run dev, yarn dev o pnpm dev y Vite arranca en el 5173 sin configurar nada. Consigues arranques en frío de decenas de milisegundos (frente a los ~10 s de CRA en una aplicación comparable), HMR por WebSocket en el mismo puerto, ESM nativo en el navegador, preempaquetado de dependencias con esbuild en la primera ejecución y transpilación de TypeScript sin configuración (ojo: transpilación, no comprobación de tipos; ejecuta tsc --noEmit aparte o con Vitest).

Cómo resolver problemas con localhost:5173

Cuando el servidor no responde en el 5173, casi siempre es una de estas cuatro cosas:

🔍 Paso 1: asegúrate de que Vite está corriendo

La solución: arranca el servidor de desarrollo si no lo está ya.

Qué hacer:

  • Arranca Vite: npm run dev, yarn dev o pnpm dev
  • Mira la terminal: busca el mensaje «Local: http://localhost:5173/»
  • Comprueba el proyecto: asegúrate de estar dentro de un proyecto de Vite
  • Revisa package.json: verifica que el script dev está bien configurado

🚫 Paso 2: libera el puerto 5173

La solución: el puerto 5173 ya lo tiene otra cosa.

Atajos:

  • Localiza el proceso: lsof -i :5173 (Linux/macOS) o netstat -ano | findstr :5173 (Windows)
  • Párale: kill -9 <PID>
  • Usa otro puerto: npm run dev -- --port 5174

🔧 Paso 3: problemas de configuración o dependencias

La solución: algo va mal en tu configuración.

Prueba esto:

  • Revisa vite.config.js: comprueba la sintaxis y los plugins
  • Instala las dependencias: npm install o yarn install
  • Limpia la caché: borra el directorio node_modules/.vite

🌐 Paso 4: comprueba que funciona

La solución: verifica que el servidor responde de verdad.

Cómo comprobarlo:

  • Navegador: abre http://localhost:5173
  • Terminal: curl http://localhost:5173
  • Acceso en red: usa npm run dev -- --host para permitir conexiones externas

Detalles del puerto que conviene conocer

Algunas cosas sobre cómo Vite gestiona el 5173 que pillan a mucha gente:

  • Se autoincrementa. Si el 5173 está ocupado, Vite pasa al 5174 sin avisar, luego al 5175 y así. Va bien con dos proyectos a la vez, y fatal cuando tus scripts o marcadores dan por hecho el 5173. Fíjalo con server.strictPort: true en vite.config.js (o --strictPort en la CLI) y Vite fallará en lugar de moverse.
  • vite dev y vite preview usan puertos distintos. El de desarrollo va en el 5173. vite preview (que sirve tu dist/ de producción para probarlo) usa por defecto el 4173. Son procesos distintos sirviendo bundles distintos: no compartas estado entre ellos.
  • --host te expone en la red local. Sin ese flag, Vite se enlaza a 127.0.0.1 y solo es accesible desde tu máquina. Con --host (o server.host: true) se enlaza a 0.0.0.0, y cualquiera en el mismo wifi puede entrar. En casa da igual; en la red de un hotel o una cafetería, menos.
  • allowedHosts se aplica. Desde Vite 6, las peticiones con una cabecera Host que no esté en server.allowedHosts se rechazan con un 403. Esto importa al pasar por un túnel o un proxy inverso: añade el nombre público o ponlo a true en desarrollo.
  • Dentro de Docker, localhost no es tu host. En un contenedor, localhost es el propio contenedor. Ejecuta Vite con --host 0.0.0.0, expón el 5173 en tu Dockerfile o en compose, y entra en http://localhost:5173 desde el host. Para el HMR quizá necesites también server.hmr.host con el nombre que use el navegador.
  • HTTPS en localhost requiere un plugin. Vite tiene server.https, pero lo doloroso es generar un certificado de confianza. vite-plugin-mkcert lo automatiza (usa mkcert por debajo) y es la respuesta estándar cuando necesitas HTTPS para callbacks de OAuth, PWAs o cualquier cosa que exija un contexto seguro.

Problemas habituales y sus soluciones

Estos son los fallos típicos con localhost:5173 y cómo resolverlos:

❌ Error «Port Already in Use»

Verás: «Port 5173 is in use...»

Solución rápida: lsof -i :5173 para ver quién lo usa, kill -9 <PID> para pararlo, o simplemente cambia de puerto con npm run dev -- --port 5174

⚠️ El servidor de Vite no arranca

Verás: errores durante el arranque o un fallo inmediato

Solución rápida: npm install para reinstalar dependencias, revisa vite.config.js por si hay erratas o borra la caché de node_modules/.vite

🔄 El HMR no funciona (los cambios no recargan)

Verás: guardas un archivo y el navegador no se actualiza

Solución rápida: revisa la consola del navegador por si hay errores de WebSocket, comprueba que tu editor está vigilando los archivos, o reinicia Vite

🌐 No se puede acceder desde otros equipos de la red

Verás: funciona en localhost pero no desde el móvil u otro PC

Solución rápida: npm run dev -- --host y entra por la IP de tu máquina, por ejemplo http://192.168.1.100:5173

🐌 Carga inicial o arranque lentos

Verás: tarda una eternidad en arrancar o la primera carga va pesada

Solución rápida: rm -rf node_modules package-lock.json && npm install, borra la carpeta node_modules/.vite u optimiza las dependencias en vite.config.js

🔌 Errores de plugins

Verás: Vite arranca pero se queja de un plugin

Solución rápida: comprueba que las versiones de los plugins encajan con tu versión de Vite, revisa la configuración y actualiza con npm update

🔄 El HMR se desconecta detrás de un túnel o proxy inverso

Verás: la página carga bien, pero la consola muestra WebSocket connection to 'wss://...:5173' failed y los cambios no recargan

Solución rápida: el cliente de Vite intenta abrir el WebSocket en el puerto 5173, pero los túneles y proxies solo exponen el 443. Pon server.hmr.clientPort: 443 (y server.hmr.protocol: 'wss' si hace falta) en vite.config.js, y añade el host público a server.allowedHosts.

📦 Monorepos: «The request url ... is outside of Vite serving allow list»

Verás: importar un paquete hermano en un workspace de pnpm o npm da un 403 con ese error

Solución rápida: añade la raíz del workspace (o las rutas concretas de los paquetes) a server.fs.allow en tu vite.config.js. Por defecto solo se sirve la raíz del proyecto; en un monorepo, Vite se niega a servir archivos por encima de ella por seguridad.

Resumen

  • Qué es: localhost:5173 es la dirección por defecto del servidor de desarrollo de Vite (127.0.0.1 en el puerto TCP 5173).
  • Quién lo usa: cualquier stack basado en Vite: Vue, React, Svelte, Astro, Nuxt, TanStack Start, Solid, Qwik, Analog, Waku, además de Vitest y Storybook en desarrollo.
  • Primer paso al depurar: lsof -i :5173 para ver qué está enlazado, y luego npm run dev mirando la terminal por la línea «Local: http://localhost:5173/».
  • Soluciones habituales: mata lo que ocupe el puerto, pasa --port 5174, borra node_modules/.vite o usa --host para exponerlo en la red local.

🚀 Comandos rápidos

# Vue
npm create vue@latest my-app && cd my-app && npm install

# React (plantilla de Vite)
npm create vite@latest my-app -- --template react-ts

# TanStack Start (React full-stack sobre Vite)
npm create @tanstack/start@latest my-app

# El mismo scaffold con Bun (instalación más rápida)
bunx create-vite@latest my-app --template svelte-ts

# Arrancar el servidor (se enlaza a localhost:5173)
npm run dev

Usa estos comandos para empezar rápido con Vite en localhost:5173

Si has tocado herramientas de frontend en los últimos años, el 5173 es probablemente uno de los números más recurrentes de tu historial de comandos. No tiene nada de mágico: es el puerto que eligió Vite, y resulta que Vite es lo que casi todos los frameworks montan hoy como servidor de desarrollo. Saber qué hay enlazado ahí, cómo moverte a otro puerto y cómo exponerlo con seguridad cubre el 90 % de lo que vas a necesitar.