Blog · Guides de déploiement

Comment déployer une application React Router en 2026 : le Dockerfile du template, une commande et HTTPS

Par l’équipe Pethost · 10 octobre 2026 · Mis à jour le 25 octobre 2026 · 8 min de lecture

Vous avez créé une application avec create-react-router, elle fait le rendu côté serveur, et vous voulez la mettre en ligne à une adresse en HTTPS. Le template par défaut a déjà un Dockerfile, et sur Pethost, c’est tout ce qu’il faut à un projet : lancez pethost deploy dans le dossier de l’application. La première fois, le template a été construit et démarré en 11 secondes, et a répondu 200 à sa nouvelle adresse.

Ce qu’il faut pour déployer une application React Router en 2026

Trois choses : l’application, la commande pethost et un compte Pethost.

L’application est ici le template par défaut, avec rendu côté serveur et Tailwind CSS :

npx create-react-router@latest my-app

Il laisse package.json, package-lock.json, le dossier app/ et un Dockerfile. Ses scripts sont ceux que lance le Dockerfile :

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

La commande est un seul programme, installé en une ligne. Toutes ses commandes sont dans la référence de la CLI.

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

Le compte a besoin d’une offre. Si vous n’êtes pas connecté, pethost deploy ouvre votre navigateur et vous connecte. Si vous n’avez pas encore d’offre, la commande vous montre où en choisir une, et attend.

Déployer l’application React Router en une commande

Allez dans le dossier de l’application et lancez pethost deploy. Voici l’écran entier, pour le template par défaut :

$ 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. Elle demande une seule chose Le nom du projet, qui est le premier mot de son adresse. Entrée prend le nom du dossier.
2. Le dossier part sur votre machine Sans node_modules : le build les installe là-bas, à partir de package-lock.json.
3. La machine construit le Dockerfile C’est celui du template, inchangé. La ligne en dessous dit la seule chose que la machine a ajoutée : un fichier Compose autour du Dockerfile, avec un service nommé app.
4. L’application démarre et on l’interroge La machine voit que le serveur écoute sur le 3000 et y envoie l’adresse. Puis pethost interroge l’adresse elle-même, et affiche ce qu’elle a répondu : 200.

Nous avons demandé au template déployé ce que demande un visiteur. La page d’accueil a répondu 200 avec le HTML rendu côté serveur, /favicon.ico a répondu 200, et une adresse sans route a répondu 404 avec la page d’erreur de React Router lui-même.

Le fichier .pethost indique quel projet est ce dossier. Committez-le, et le prochain déploiement ne demande rien.

Le Dockerfile du template React Router

Voici le fichier qu’a écrit create-react-router, et que la machine a construit tel quel :

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"]

Trois choses à savoir à son sujet sur Pethost :

• Il a besoin du lockfile. Les deux étapes npm ci lisent package-lock.json : gardez-le dans le dossier et dans votre dépôt.
• Aucun port n’est déclaré. Le fichier n’a pas de ligne EXPOSE et n’en a pas besoin : la machine trouve le port sur lequel écoute le serveur en marche.
• L’application est légère une fois lancée. La dernière étape contient les dépendances de production et le build. Le template en marche occupait 79 MB de mémoire.

Une application sans Dockerfile n’est pas bloquée pour autant. Dans un dossier qui n’a ni Dockerfile ni fichier Compose, pethost deploy écrit le Dockerfile pour les types de projet qu’il connaît, comme il le fait pour une application Nuxt, et pour tout autre dossier, il explique pourquoi il n’en a écrit aucun.

Modifier une route et redéployer

Modifiez une route et lancez la même commande. Le deuxième déploiement du template a pris 6 secondes, car la machine garde les couches du 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

Pour déployer plutôt à chaque push, connectez le dépôt une fois :

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

Pethost ne lit que les dépôts que vous avez donnés à son application GitHub. Si un déploiement tourne mal, pethost rollback remet la version d’avant, et votre machine garde les trois versions qui précèdent l’actuelle. Un agent IA peut faire tout cela pour vous grâce au serveur MCP de Pethost : comment un agent déploie un projet et s’en occupe.

Variables d’environnement et domaine personnalisé

Une variable que lit un loader ou une action sur le serveur, c’est une commande. Elle demande la valeur sans l’afficher, la met dans le fichier .env du projet sur la machine, et les déploiements suivants la conservent :

pethost env set SESSION_SECRET

Tout nom sous le domaine de votre compte est une adresse d’emblée, en HTTPS. Un domaine qui vous appartient demande une commande et un enregistrement DNS :

pethost domain add app.example.com

La commande affiche l’enregistrement à créer : un CNAME de votre nom vers le nom de votre machine. Le certificat arrive tout seul dès que le nom se résout, et se renouvelle tout seul. pethost password place une page de mot de passe devant toute l’application, pour une application qui n’est pas encore publique.

Ce que vous obtenez pour ce prix

Pethost, c’est 9,99 € par mois pour tout ce que vous hébergez, sur 2 vCPU, 3 GB de mémoire et 30 GB de disque. Le serveur du template en occupait 79 MB de mémoire, alors la machine a de la place pour la base de données de l’application, un worker et vos autres projets. Il n’y a pas de frais par projet et rien n’est facturé à l’usage : le rendu côté serveur n’est pas facturé à la requête, et un mois chargé coûte autant qu’un mois calme.

• 9,99 € par mois pour tous vos projets, rien de facturé à l’usage
• 11 s pour construire et démarrer le template, la première fois
• 79 MB de mémoire pour l’application en marche

Ce qui est déjà fait pour vous : le HTTPS avec des certificats qui se renouvellent tout seuls, les déploiements depuis GitHub, des sauvegardes chaque nuit conservées 14 jours, SSH dans n’importe quel conteneur, et chaque requête comptée, avec les chemins les plus sollicités et le taux d’erreur des 30 derniers jours. La machine est toujours allumée, alors la première requête du matin n’attend jamais un démarrage à froid. Les offres sont dans la partie tarifs de la page d’accueil.

Les écrans sont des déploiements du template par défaut qu’écrit create-react-router, avec React Router 8.4.0 et pethost 0.2.1, sur une de nos machines de test. Le compte qu’on y voit est celui de l’exemple, sam.

1. React Router : installation
2. React Router : déploiement
3. React Router : les templates officiels
4. pethost, la ligne de commande de Pethost