detachbox
PáginasURL de vista previa y archivos compartidos

URL de vista previa y archivos compartidos

Cada servidor que tu box ejecuta en 0.0.0.0 recibe su propia dirección HTTPS: https://<port>-<box>.detachbox.dev. Los enlaces nacen privados para ti, y haces público un puerto cuando quieres compartirlo. Los archivos del box tienen una segunda dirección, con enlaces para compartir que funcionan sin iniciar sesión.

Vistas previas de shipyard: los puertos 3000, 5173 y 8080 abiertos en su propia dirección HTTPS en detachbox.dev, el puerto 3000 compartido en público y los demás privados para el propietario.

Abre un servidor de desarrollo en tu navegador

  1. Arranca el servidor en 0.0.0.0, en cualquier puerto del 1024 al 65535.
  2. Abre https://<port>-<box>.detachbox.dev. Un servidor de desarrollo en el puerto 3000 del box my-box se abre en https://3000-my-box.detachbox.dev.

Comandos habituales que escuchan en 0.0.0.0:

npm run dev -- --host 0.0.0.0
vite --host 0.0.0.0
next dev -H 0.0.0.0
python3 -m http.server 3000
rails s -b 0.0.0.0
uvicorn app:app --host 0.0.0.0

HTTPS, websockets, hot reload y server-sent events funcionan a través de la vista previa. La app ve cada petición como si viniera de localhost:<port>. allowedHosts de Vite, config.hosts de Rails, ALLOWED_HOSTS de Django y el modo dev de Next.js no necesitan cambios. El cuerpo de una petición puede llegar a 100 MB.

Los agentes ya lo saben. El AGENTS.md compartido les indica la dirección de vista previa y la regla de 0.0.0.0, así que te pasan el enlace cuando un servidor está en marcha. Una página que el agente abre en localhost:<port> llega a tu navegador como URL de vista previa.

Mira lo que sirve el box

Abre el box y elige Vistas previas. La vista lista cada puerto a la escucha con su enlace, un botón de copiar y un código QR. Revisa los puertos cada 10 segundos.

Un servidor en localhost o 127.0.0.1 muestra un aviso: el enlace no puede llegar a él. Vuelve a arrancarlo en 0.0.0.0.

Un enlace que no encuentra nada muestra una página de detachbox en lugar de un error, por ejemplo «No hay nada escuchando en el puerto 3000 de my-box». Un box detenido también lo indica.

Quién puede abrir una vista previa

Los enlaces nacen privados. Solo tú, con la sesión iniciada en el panel, puedes abrirlos.

  • La primera visita pasa por my.detachbox.com para comprobar que eres tú. Después, la vista previa queda abierta en ese navegador durante 12 horas.
  • Cada puerto y cada box tiene su propio pase. Abrir un puerto nunca abre otro.
  • Para abrir una vista previa privada en el teléfono, escanea su código QR. El teléfono inicia sesión en detachbox primero y luego abre el puerto.

Comparte una vista previa con un cliente

  1. En Vistas previas, busca el puerto.
  2. En Quién puede abrir el puerto 3000, elige Público.
  3. Lee el aviso de ¿Hacer público el puerto 3000? y elige Hacer público.
  4. Copia el enlace y envíalo.

Desde ese momento, cualquiera con el enlace ve lo que sirve el puerto, sin iniciar sesión. El cambio se aplica en menos de 5 segundos. A los buscadores se les pide que no indexen las páginas públicas, pero un enlace viaja: chats, capturas de pantalla, historial del navegador.

Vuelve a hacerlo privado cuando quieras. En menos de 5 segundos el enlace solo se abre para ti. Un box mantiene hasta 20 puertos públicos. Los puertos públicos conservan sus direcciones mientras el box está detenido. Un restablecimiento vuelve a hacer privados todos los puertos.

Llega a una base de datos u otro puerto TCP

Las URL de vista previa solo llevan HTTP. Para Postgres, Redis o cualquier puerto TCP sin HTTP, redirígelo por SSH:

ssh -N -L 5432:localhost:5432 <box>@ssh.detachbox.com

Luego conéctate a localhost:5432 en tu ordenador.

Abre los archivos del box en el navegador

Cada box tiene también una dirección de archivos: https://files-<box>.detachbox.dev/<absolute path>. Sirve cualquier archivo que el usuario dev pueda leer, hasta 1 GiB. El inicio de sesión funciona igual que en las vistas previas.

  • Abre un informe de cobertura de tests o una carpeta dist como un sitio. Apunta la URL a la carpeta con una / al final y su index.html se carga con sus recursos relativos.
  • Un informe HTML con sus recursos al lado, como report.html más report_files/, se abre como carpeta.
  • Los recursos con rutas absolutas, como /assets/app.js, no se cargan. En un build de Vite, pon base: './'.

El botón Abrir como página del visor de archivos abre un archivo HTML en esta dirección. La guía de la terminal explica el visor.

Comparte un archivo sin iniciar sesión

  1. Abre el archivo desde la terminal: ⌘-clic o Ctrl-clic en su ruta, o tócala en el teléfono.
  2. En el visor, elige Compartir enlace.
  3. En El enlace funciona durante, elige 15 minutos, 1 hora, 1 día o 7 días.
  4. Elige Crear el enlace y después Copiar enlace.

Cualquiera con el enlace puede descargar ese archivo, sin necesidad de cuenta. El enlace deja de funcionar cuando se acaba su tiempo.

Gestiona los enlaces compartidos

Vistas previas lista tus enlaces en Archivos compartidos. Cada fila muestra cuándo caduca y cuántas veces se abrió.

  • Elige Revocar para cerrar un enlace. Deja de funcionar en menos de 5 segundos.
  • Un box mantiene hasta 50 enlaces activos. Revoca uno que ya no necesites para hacer sitio.
  • Un restablecimiento revoca todos los enlaces del box. Un clon empieza sin ninguno.

Más sobre la dirección de archivos y las vistas previas: /features/previews.