React

Vous trouverez ci-dessous des exemples de configuration d’un site statique React et d’un site statique React avec Vite à déployer sur les services d’hébergement de sites statiques de Kinsta à partir d’un dépôt GitHub.

React est une bibliothèque JavaScript populaire pour la construction d’interfaces utilisateur. Elle permet aux développeurs de créer des composants d’interface utilisateur réutilisables et de mettre à jour efficacement l’interface utilisateur en réponse aux changements de données. Vous trouverez de plus amples informations sur le site web de React.

Vous pouvez également utiliser ce modèle de démarrage rapide sur l’hébergement d’applications de Kinsta sans configuration supplémentaire. Si vous utilisez l’hébergement d’applications, la commande de démarrage peut être laissée vide pour le processus web car Kinsta détecte automatiquement la commande nécessaire lors du premier déploiement.

Pré-requis

• Les modèles de démarrage rapide de Kinsta sont stockés et gérés dans GitHub ; par conséquent, vous avez besoin d’un compte GitHub pour y accéder.
• Vous devez créer un compte MyKinsta pour déployer l’application.

Déployer un site statique React

1. Connectez-vous à GitHub et créez un nouveau dépôt à partir de ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – React.
2. Dans MyKinsta, cliquez sur Sites statiques > Ajouter un site > sélectionnez GitHub, cliquez sur Connecter le fournisseur git > Autoriser, et connectez-vous à votre compte GitHub.
3. Choisissez le dépôt Hello World – React, cliquez sur Continuer, et saisissez ce qui suit dans les préglages de construction :
   • Commande de construction : npm run build
   • Version Node : 18.16.0
   • Répertoire de publication : build

Kinsta installe automatiquement les dépendances définies dans votre fichier package.json pendant le processus de déploiement. Le site est disponible dès que le déploiement est terminé, et la page d’accueil de Kinsta se charge à l’URL de votre site.

Cycle de vie du déploiement

Chaque fois qu’un déploiement est initié (par la création d’une application ou par un redéploiement suite à un commit entrant), les commandes npm start et npm build sont exécutées.

React avec Vite

Voici un exemple de configuration d’un site statique React avec Vite pour le déployer sur les services d’hébergement de sites statiques de Kinsta à partir d’un dépôt GitHub.

Vite est un outil qui vous aide à construire des applications décentralisées ; il fournit des outils de développement et des API pour simplifier le processus de développement et prend en charge plusieurs langages de programmation. Vous trouverez de plus amples informations sur le site de Vite.

Kinsta installe automatiquement les dépendances définies dans votre fichier package.json pendant le processus de déploiement.

1. Connectez-vous à GitHub et créez un nouveau dépôt à partir de ce modèle (Utiliser ce modèle > Créer un nouveau dépôt) : Kinsta – Hello World – Vite + React.
2. Dans MyKinsta, ajoutez un site statique avec le dépôt Hello World – Vite + React et les réglages de construction suivants :
   • Commande de construction : npm run build
   • Version Node : 18.16.0
   • Répertoire de publication : dist
3. Le site est disponible dès la fin de la construction, et la page d’accueil de Kinsta se charge à l’URL de votre site.

Cycle de vie du déploiement

Chaque fois qu’un déploiement est initié (par la création d’une application ou un redéploiement suite à un commit entrant), les commandes npm install et npm build sont exécutées.