Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

React est une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur fonctionnelles dans des applications Web dynamiques. Peut-être avez-vous passé de longues heures à déboguer le code React dans le but de créer le prochain Instagram ou Airbnb.

Indépendamment de ce que vous construisez, l'objectif final est toujours de présenter votre travail au monde. C'est là que les plates-formes d'hébergement telles que Netlify sont utiles. Ils fournissent une suite d'outils qui rationalisent le processus de déploiement.

Suivez-nous pour savoir comment déployer vos applications React à l'aide des outils de déploiement faciles à utiliser de Netlify.

Qu'est-ce que Netlify ?

Netlify est une plate-forme de développement basée sur le cloud avec des fonctionnalités qui facilitent grandement l'hébergement et le déploiement d'applications sur le Web. En termes simples, il fournit une gamme d'outils et de services qui rationalisent et simplifient le processus, vous permettant de déployer et d'héberger une application Web en quelques secondes.

Principales caractéristiques de Netlify

Netlify propose une gamme de fonctionnalités qui simplifient le processus de déploiement.

  • Il fournit des fonctionnalités essentielles d'accès et de contrôle de version pour permettre aux équipes de développement de collaborer efficacement sur les projets.
  • Il propose des services d'hébergement sécurisés que vous pouvez adapter à vos besoins. De plus, il fournit des sauvegardes automatisées en cas de perte de données.
  • Il s'intègre de manière transparente aux services de développement cloud populaires tels que GitHub, GitLab et Bitbucket.
  • Il fournit des fonctionnalités qui facilitent l'installation et la configuration d'une URL de domaine personnalisée et d'un certificat SSL pour votre application.

Créer une application démo React

  1. Pour commencer, vous devrez d'abord créer une démo React application que vous déploierez éventuellement sur Netlify. Exécutez la commande ci-dessous sur votre terminal pour créer une application React: 
    npx créer-réagir-app démo-réagir-netlify-app
  2. Ensuite, exécutez cette commande de terminal pour lancer le serveur de développement: 
    début npm
    Allez-y et consultez les résultats dans votre navigateur à http://localhost: 3000.
  3. Enfin, exécutez cette commande pour créer une version prête pour la production de votre application: 
    construction d'exécution npm
    Cette commande génère les fichiers de production et les actifs requis dans un nouveau dossier du répertoire racine appelé build. Le dossier de construction capture une version réduite de l'ensemble de l'application, contenant tout ce qui est nécessaire pour déployer l'application.

Déployer l'application React sur Netlify

Netlify fournit trois méthodes que vous pouvez utiliser pour déployer votre application React. Tu peux:

  • Importez votre projet à partir d'un hôte de référentiel Git tel que GitHub.
  • Utilisez la fonction glisser-déposer.
  • Utilisez l'outil de ligne de commande, la CLI de Netlify.

Déployer à l'aide de la fonctionnalité d'importation GitHub

  1. Commence par créer un dépôt sur GitHub pour héberger vos fichiers de projet d'application React. Vous pouvez également héberger vos fichiers de projet sur tout autre fournisseur Git pris en charge, tel que GitLab, Bitbucket ou Azure DevOps.
  2. Ensuite, créez un compte sur Netlifier. Une fois inscrit, accédez au tableau de bord de votre compte et sélectionnez le Des sites languette.
  3. Clique sur le Importer depuis Git bouton.
  4. Sélectionnez votre plate-forme de fournisseur Git préférée. Netlify vous invitera à vous authentifier auprès de votre fournisseur Git pour lui accorder l'accès à votre compte et à vos référentiels.
  5. Une fois que vous avez fait cela, Netlify affichera une liste de référentiels sur votre fournisseur Git. Sélectionnez le référentiel de projet React que vous avez initialement envoyé à votre fournisseur Git.
  6. Après avoir sélectionné le référentiel, vous devez spécifier comment Netlify doit gérer le processus de déploiement. Habituellement, pour les sites Web statiques, vous n'avez pas à apporter de modifications, cependant, pour les sites Web dynamiques tels que les applications React, vous devrez définir les paramètres de construction. Heureusement, Netlify détecte automatiquement par défaut le framework utilisé pour créer l'application et remplit les champs avec les paramètres de construction requis.
  7. Enfin, cliquez Déployer le site pour terminer le processus.

Cliquez sur l'URL fournie pour afficher l'application sur votre navigateur. Si vous avez une URL de domaine personnalisée, vous pouvez demander à Netlify de l'utiliser avec votre site en mettant à jour l'URL à partir des paramètres du site.

Déployer à l'aide de la fonction glisser-déposer

C'est la méthode la plus simple pour déployer votre application React sur Netlify. Il vous suffit de faire glisser et de déposer le dossier de construction dans l'interface utilisateur par glisser-déposer de Netlify.

  1. Sur le tableau de bord de Netlify, sélectionnez le Placer languette. Cliquez ensuite sur Ajouter un nouveau site puis sélectionnez Déployer manuellement dans les options du menu déroulant.
  2. Dans la page de fonctionnalité de glisser-déposer, sélectionnez le dossier contenant les fichiers de construction React et déposez-le dans cette interface utilisateur. Le projet se déploiera instantanément sur Netlify. Alternativement, vous pouvez cliquer sur Parcourir pour télécharger pour sélectionner votre dossier de construction dans le système de fichiers.

Déployer à l'aide de l'interface de ligne de commande de Netlify

À l'aide de l'interface de ligne de commande (CLI) de Netlify, vous pouvez déployer votre application React directement depuis un terminal. De plus, la CLI de Netlify vous permet de configurer le déploiement continu afin que lorsque vous validez et envoyez de nouvelles mises à jour à votre référentiel Git, elles soient automatiquement déployées.

  1. Exécutez la commande ci-dessous sur votre terminal pour installer la CLI de Netlify: 
    npm installer netlify-cli -g
  2. Maintenant, exécutez la commande ci-dessous pour déployer votre application. Assurez-vous d'être dans le répertoire de travail du projet avant le déploiement. 
    netlify déployer
    La CLI de Netlify vous demandera de lui permettre d'apporter des modifications à votre compte. Après avoir accordé l'autorisation, indiquez le nom du compte d'équipe que vous avez donné lors de votre inscription, puis choisissez de lier le répertoire de l'application à un site Web existant ou de créer et configurer un nouveau un. Terminez en fournissant un nom de site Web personnalisé et le nom de votre dossier de construction.
  3. La CLI déploiera une version brouillon de votre application. Vérifiez que tout fonctionne comme prévu.
  4. Enfin, exécutez la commande ci-dessous pour déployer votre application en production. 
    netlify déployer --prod

Comparaison des trois méthodes de déploiement

La méthode d'importation GitHub est la plus efficace pour déployer des applications de production car elle vous permet de lier votre référentiel Git directement sur Netlify et synchronisez votre code avec leur site Web ou leur application en direct. Lorsque vous validez et envoyez des modifications à votre référentiel Git, Netlify mettra automatiquement à jour le site Web.

La méthode du glisser-déposer est plus simple pour déployer des sites statiques, car elle ne nécessite aucun codage ni configuration. Cependant, il ne permet pas les mises à jour automatiques lorsque vous apportez des modifications à votre référentiel.

La méthode CLI est la plus complète, car elle vous donne un contrôle total sur le processus de déploiement et permet des configurations personnalisées. Cette méthode est la mieux adaptée si vous avez déjà une bonne compréhension de Netlify et que vous êtes à l'aise avec la ligne de commande.

Les trois méthodes sont utiles pour déployer des applications sur Netlify. En fin de compte, le choix de celui à utiliser dépendra des besoins de chaque projet individuel.

Utilisation de Netlify pour déployer d'autres applications

Netlify est un outil puissant et polyvalent que vous pouvez utiliser pour déployer des applications autres que React. Vous pouvez l'utiliser pour déployer et héberger des sites Web statiques et des applications dynamiques construites avec différents frameworks comme Angular.

L'interface conviviale facilite la configuration, la gestion et le déploiement de vos API.