Introduction
Pour développer et héberger une application React Router (anciennement Remix) sur Square Cloud, il est essentiel de suivre une séquence structurée de configurations et de prérequis. Ce guide technique couvrira l’ensemble du processus, de la configuration initiale au déploiement en production.Prérequis
- Compte Square Cloud : Inscrivez-vous via la page d’inscription en utilisant votre adresse e-mail.
- Plan actif : Garantit des ressources dédiées et des performances optimisées pour votre application. Consultez nos plans disponibles et choisissez celui qui convient le mieux à vos besoins.
create-react-router au lieu de create-remix. Si vous avez encore un projet Remix v2, consultez Projets Remix v2 existants.Créer le projet
Vous avez besoin de Node.js 22.22 ou supérieur et de npm sur votre machine. Si ce n’est pas le cas, téléchargez-les depuis le site officiel de Node.js. Créez un projet avec l’initialiseur officiel :http://localhost:5173/. Les routes sont déclarées dans app/routes.ts, et le starter associe la page d’accueil à app/routes/home.tsx. Remplacez le contenu de ce fichier par un exemple simple :
Générer le build de production
build/ : build/client contient les assets statiques et build/server contient le code serveur. Les outils de build (@react-router/dev et Vite) sont des devDependencies, que Square Cloud n’installe pas : exécutez donc le build sur votre machine.
Port et hôte
Rien à modifier : le starter inclut@react-router/serve, un serveur Node.js de production, ainsi qu’un script start qui le lance. react-router-serve lit les variables d’environnement PORT et HOST, que Square Cloud définit à 80 et 0.0.0.0.
Configurer Square Cloud
Créez un fichiersquarecloud.app à la racine de votre projet :
RUNTIME=nodejs sélectionne le runtime Node.js sans exiger de fichier MAIN, et START remplace la commande de démarrage par défaut. Lors d’un envoi via le tableau de bord, définissez la même commande de démarrage.
Contenu du ZIP
build/, le build de production.package.json.squarecloud.app.
node_modules : Square Cloud installe vos dependencies, y compris @react-router/serve, au premier démarrage.
Projets Remix v2 existants
Les projets Remix v2 se déploient de la même manière : exécuteznpm run build en local et conservez START=npm run start, où le script start lance @remix-run/serve, qui lit aussi PORT et HOST :
remix-serve ./build/index.js. Pour passer à React Router, suivez le guide officiel de mise à niveau.
Déployer et vérifier
Via le tableau de bord
Accéder à la page d'upload
Configurer votre environnement
Si vous téléversez un projet web, veillez à sélectionner « Publication Web » et à définir un sous-domaine pour votre projet.
Déployer votre projet
Une fois le déploiement effectué, vous pouvez suivre l’état et les logs de votre projet depuis le tableau de bord.

Confirmez que votre application est en ligne
Si vous avez déployé un site web ou une API, ouvrez
https://<votre-sous-domaine>.squareweb.app dans votre navigateur, vous devriez voir votre application répondre. Si vous avez déployé un bot, envoyez-lui une commande pour confirmer qu’il est en ligne.
Via la CLI
Pour utiliser cette méthode, votre projet a besoin d’un fichier de configuration nommésquarecloud.app à sa racine. Il indique à Square Cloud comment exécuter votre application.
Guide du fichier de configuration
squarecloud.app qui définit l’environnement de votre application.Installer la CLI
Se connecter
Téléverser votre projet
squarecloud.ignore, puis l’envoie :--file :Confirmez que votre application est en ligne
https://<votre-sous-domaine>.squareweb.app dans votre navigateur, vous devriez voir votre application répondre. Si vous avez déployé un bot, envoyez-lui une commande pour confirmer qu’il est en ligne.
Erreurs courantes
Domaine personnalisé
mysite.com) au lieu de l’URL par défaut mysite.squareweb.app, vous avez besoin du plan Standard ou supérieur. L’URL par défaut provient du champ SUBDOMAIN du fichier de configuration. Pour connecter votre domaine, suivez comment configurer votre propre domaine.Prérequis minimum en RAM
Impossible de trouver ce site.
Le site a mis trop de temps à répondre…
80) et HOST (0.0.0.0) dans votre application : lisez-les dans votre code au lieu de coder en dur d’autres valeurs. Un serveur qui n’écoute que sur localhost ou 127.0.0.1 ne reçoit jamais de requêtes.
