Blog · Guías de despliegue

Cómo desplegar una app React Router en 2026: el Dockerfile de la plantilla, un comando y HTTPS

Por el equipo de Pethost · 10 de octubre de 2026 · Actualizado 25 de octubre de 2026 · 8 min de lectura

Creaste una app con create-react-router, se renderiza en el servidor y quieres ponerla en línea en una dirección con HTTPS. La plantilla por defecto ya trae un Dockerfile, y en Pethost eso es todo lo que necesita un proyecto: ejecuta pethost deploy en la carpeta de la app. La plantilla se construyó e inició en 11 s la primera vez, y respondió 200 en su nueva dirección.

Qué necesitas para desplegar una app React Router en 2026

Tres cosas: la app, el comando pethost y una cuenta de Pethost.

La app aquí es la plantilla por defecto, con renderizado en el servidor y Tailwind CSS:

npx create-react-router@latest my-app

Deja package.json, package-lock.json, la carpeta app/ y un Dockerfile. Sus scripts son los que ejecuta el Dockerfile:

"scripts": {
  "build": "react-router build",
  "dev": "react-router dev",
  "start": "react-router-serve ./build/server/index.js",
  "typecheck": "react-router typegen && tsc"
}

El comando es un solo programa, que se instala con una línea. Todos sus comandos están en la referencia de la CLI.

curl -fsSL https://pethost.dev/install.sh | sh      # macOS, Linux
irm https://pethost.dev/install.ps1 | iex           # Windows, in PowerShell

La cuenta necesita un plan. Si no has iniciado sesión, pethost deploy abre tu navegador e inicia sesión por ti. Si aún no tienes plan, te muestra dónde elegir uno, y espera.

Despliega la app React Router con un comando

Ve a la carpeta de la app y ejecuta pethost deploy. Esta es la pantalla entera, para la plantilla por defecto:

$ cd my-app
$ pethost deploy
Name it [my-app]:    it will live at https://my-app.sam.pethost.app
✓ Packed 22 files, 174 KB   (left out node_modules)
✓ Uploaded straight to your machine
✓ Built and started in 11 s
  · wrote compose.yaml for the Dockerfile: the service app, reading .env
✓ app listens on 3000 → https://my-app.sam.pethost.app
  It answers 200.

https://my-app.sam.pethost.app

Wrote .pethost (commit it). Next:   pethost logs -f   ·   pethost open

1. Pregunta una sola cosa El nombre del proyecto, que es la primera palabra de su dirección. Con Enter se queda el nombre de la carpeta.
2. La carpeta va a tu máquina Sin node_modules: el build los instala allí, a partir de package-lock.json.
3. La máquina construye el Dockerfile Es el de la plantilla, sin cambios. La línea de debajo dice lo único que agregó la máquina: un archivo de Compose alrededor del Dockerfile, con un servicio llamado app.
4. La app se inicia y se le hace una petición La máquina ve que el servidor escucha en el 3000 y envía la dirección ahí. Después pethost visita la dirección él mismo e imprime lo que respondió: 200.

Le pedimos a la plantilla desplegada lo que pide un visitante. La página principal respondió 200 con el HTML renderizado en el servidor, /favicon.ico respondió 200, y una dirección sin ruta respondió 404 con la página de error propia de React Router.

El archivo .pethost dice qué proyecto es esta carpeta. Haz commit de él, y el siguiente despliegue no pregunta nada.

El Dockerfile de la plantilla de React Router

Este es el archivo que escribió create-react-router, y que la máquina construyó tal cual:

FROM node:24-alpine AS development-dependencies-env
COPY . /app
WORKDIR /app
RUN npm ci

FROM node:24-alpine AS production-dependencies-env
COPY ./package.json package-lock.json /app/
WORKDIR /app
RUN npm ci --omit=dev

FROM node:24-alpine AS build-env
COPY . /app/
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
WORKDIR /app
RUN npm run build

FROM node:24-alpine
COPY ./package.json package-lock.json /app/
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
COPY --from=build-env /app/build /app/build
WORKDIR /app
CMD ["npm", "run", "start"]

Tres cosas que conviene saber de él en Pethost:

• Necesita el lockfile. Los dos pasos npm ci leen package-lock.json, así que mantenlo en la carpeta y en tu repositorio.
• No declara ningún puerto. El archivo no tiene línea EXPOSE ni la necesita: la máquina encuentra el puerto en el que escucha el servidor en ejecución.
• La app ocupa poco en ejecución. La última etapa contiene las dependencias de producción y el build. La plantilla en ejecución ocupaba 79 MB de memoria.

Una app sin Dockerfile no se queda atascada. En una carpeta que no tiene ni Dockerfile ni archivo de Compose, pethost deploy escribe el Dockerfile para los tipos de proyecto que conoce, como hace con una app Nuxt, y para cualquier otra carpeta dice por qué no escribió ninguno.

Cambia una ruta y vuelve a desplegar

Edita una ruta y ejecuta el mismo comando. El segundo despliegue de la plantilla tardó 6 s, porque la máquina conserva las capas del build:

$ pethost deploy
my-app (.pethost)
✓ Packed 23 files · uploaded · built and started in 6 s
  · wrote compose.yaml for the Dockerfile: the service app, reading .env
  · kept the project's x-pethost
  It answers 200.
https://my-app.sam.pethost.app

Para desplegar en cambio con cada push, conecta el repositorio una vez:

pethost github sam/my-app          # from now on, every push deploys itself

Pethost solo lee los repositorios que diste a su GitHub App. Si un despliegue sale mal, pethost rollback vuelve a poner la versión anterior, y tu máquina conserva las tres versiones anteriores a la actual. Un agente de IA puede hacer todo esto por ti a través del servidor MCP de Pethost: cómo un agente despliega y cuida un proyecto.

Variables de entorno y tu propio dominio

Una variable que lee un loader o una action en el servidor es un comando. Pide el valor sin mostrarlo, lo pone en el archivo .env del proyecto en la máquina, y los despliegues posteriores la conservan:

pethost env set SESSION_SECRET

Cualquier nombre bajo el dominio de tu cuenta es una dirección desde el primer momento, con HTTPS. Un dominio tuyo lleva un comando y un registro DNS:

pethost domain add app.example.com

El comando imprime el registro que hay que crear: un CNAME de tu nombre al nombre de tu máquina. El certificado llega solo en cuanto el nombre resuelve, y se renueva solo. pethost password pone una página de contraseña delante de toda la app, para una que aún no es pública.

Qué obtienes por el precio

Pethost cuesta 9,99 € al mes por todo lo que alojas, con 2 vCPU, 3 GB de memoria y 30 GB de disco. El servidor de la plantilla ocupaba 79 MB de esa memoria, así que en la máquina queda sitio para la base de datos de la app, un worker y tus otros proyectos. No pagas por proyecto y nada se mide por uso: el renderizado en el servidor no se cobra por petición, y un mes con mucho tráfico cuesta lo mismo que uno tranquilo.

• 9,99 € al mes por todos tus proyectos, nada se mide por uso
• 11 s para construir e iniciar la plantilla, la primera vez
• 79 MB de memoria para la app en ejecución

Lo que ya está hecho por ti: HTTPS con certificados que se renuevan solos, despliegues desde GitHub, backups cada noche conservados 14 días, SSH a cualquier contenedor y cada petición contada, con los paths más visitados y la tasa de errores de los últimos 30 días. La máquina está siempre encendida, así que la primera petición de la mañana nunca espera a un arranque en frío. Los planes están en la parte de precios de la página principal.

Las pantallas son despliegues de la plantilla por defecto que escribe create-react-router, con React Router 8.4.0 y pethost 0.2.1, en una máquina de pruebas nuestra. La cuenta que aparece es la de ejemplo, sam.

1. React Router: instalación
2. React Router: despliegue
3. React Router: las plantillas oficiales
4. pethost, la línea de comandos de Pethost