Avant de commencer
- Un éditeur de texte pour vos fichiers HTML et CSS, comme Visual Studio Code.
- Un compte Square Cloud : inscrivez-vous avec votre e-mail ou GitHub.
- Un plan actif. Consultez les plans et choisissez celui qui convient à votre projet.
Sites statiques et applications avec rendu serveur
Un site statique est un ensemble de fichiers identique pour chaque visiteur : des pages HTML simples, ou le résultat du build d’un framework comme Vite, React, Vue, Angular, Astro ou Gatsby. Le runtime statique sert ces fichiers tels quels. Une application avec rendu serveur construit les pages à chaque requête, avec du code serveur comme Next.js, Nuxt, React Router ou une API. Elle a besoin d’un processus qui reste en cours d’exécution : elle s’exécute donc sur un runtime de langage, comme le runtime Node.js, avec un fichierMAIN ou une commande START.
Si votre framework permet les deux, un build statique est le choix le plus léger. Chaque guide de framework indique les options qu’il prend en charge.
Configurer Square Cloud
Si vous envoyez votre application depuis le tableau de bord, vous pouvez passer cette section : le tableau de bord crée le fichier de configuration
squarecloud.app pour vous.Référence du fichier de configuration
Le fichier
squarecloud.app indique à Square Cloud comment exécuter votre application : son fichier principal, sa mémoire, la version du runtime, son nom et, pour un site web, son sous-domaine.MAIN qui pointe vers un fichier HTML sélectionne le runtime statique :
squarecloud.app
Comment le runtime statique sert les fichiers
- La racine du ZIP est la racine de votre site :
about.htmlest servi sur/about.html, etblog/index.htmlsur/blog/. /sertvite.htmls’il existe, sinonindex.html.- Lorsqu’un chemin ne correspond à aucun fichier, le runtime sert
vite.htmls’il existe. Les routes côté client des applications monopages continuent ainsi de fonctionner après une actualisation, quel que soit le framework : renommez l’index.htmldu build envite.html. - Sans
vite.html, les chemins inconnus renvoient votre404.html, ou une page 404 par défaut si vous n’en avez pas. - Les fichiers sont compressés à la volée, et votre fichier
squarecloud.appn’est jamais servi.
Préparer le projet
Placez vos fichiers à la racine du ZIP, à côté desquarecloud.app :
index.html, ouvite.htmlpour une application monopage.- Vos fichiers CSS, JavaScript, images et polices, dans n’importe quelle arborescence.
404.html, facultatif : la page des chemins qui n’existent pas.
Guides des frameworks
Chaque guide indique la commande de build, le dossier de sortie et comment le publier sur le runtime statique.Vite
React
Vue
Angular
Astro
Gatsby
Preact
Qwik
SolidJS
Nuxt
Dépannage
La page par défaut de Square Shield s'affiche
La page par défaut de Square Shield s'affiche
La page indique « Hi, I’m Square Shield » : le runtime n’a trouvé ni
index.html ni vite.html à la racine du ZIP. Vous avez probablement compressé le dossier de build lui-même au lieu de son contenu : compressez les fichiers qu’il contient.Actualiser une route renvoie une erreur 404
Actualiser une route renvoie une erreur 404
Votre application monopage gère les routes dans le navigateur. Renommez son
index.html en vite.html pour que les chemins inconnus chargent l’application, et mettez à jour MAIN.Déployer
Via le tableau de bord
1
Accéder à la page d'upload
Accédez à la page d’upload et téléversez le fichier zip de votre projet.
2
Configurer votre environnement
Après avoir téléversé votre zip, vous devrez configurer le nom, le fichier principal ou l’environnement d’exécution ainsi que d’autres paramètres de votre projet.
Si vous téléversez un projet web, veillez à sélectionner « Publication Web » et à définir un sous-domaine pour votre projet.
Si vous téléversez un projet web, veillez à sélectionner « Publication Web » et à définir un sous-domaine pour votre projet.
3
Déployer votre projet
Enfin, cliquez sur le bouton « Deploy » pour héberger votre projet sur Square Cloud.
Une fois le déploiement effectué, vous pouvez suivre l’état et les logs de votre projet depuis le tableau de bord.
Une fois le déploiement effectué, vous pouvez suivre l’état et les logs de votre projet depuis le tableau de bord.

4
Confirmez que votre application est en ligne
Votre premier déploiement prend généralement moins d’une minute. Dans le tableau de bord, attendez que le statut de votre application affiche « en cours d’exécution » et vérifiez les logs pour détecter d’éventuelles erreurs de démarrage.
Si vous avez déployé un site web ou une API, ouvrez
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
Apprenez comment créer le fichier de configuration
squarecloud.app qui définit l’environnement de votre application.1
Installer la CLI
Installez la CLI Square Cloud. Si vous l’avez déjà, exécutez la même commande pour la mettre à jour :
2
Se connecter
Exécutez la commande ci-dessous. Elle ouvre votre navigateur : approuvez-y la connexion et la CLI est prête. Il n’y a aucune clé API à copier. Pour les scripts et la CI, consultez Authentification de la CLI.
3
Téléverser votre projet
Depuis le dossier de votre projet, exécutez la commande ci-dessous. La CLI compresse le dossier courant en zip, sans ce que liste Pour téléverser un zip que vous avez créé vous-même, passez-le avec
squarecloud.ignore, puis l’envoie :--file :4
Confirmez que votre application est en ligne
Votre premier déploiement prend généralement moins d’une minute. Vérifiez le statut et les logs de votre application directement depuis le terminal :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.
Prochaines étapes
Variables d'environnement
Gardez les secrets et les paramètres hors de votre code et lisez-les à l’exécution.
Domaine personnalisé
Servez votre application sur votre propre domaine, à partir du plan Standard.
Dépannage
Corrigez une application qui ne démarre pas ou un site qui ne répond pas.

