3 façons de déployer une application React sur Netlify

React est une bibliothèque JavaScript populaire pour construire des interfaces utilisateur fonctionnelles dans des applications web dynamiques. Vous avez peut-être passé de longues heures à déboguer du code React pour tenter de créer le prochain Instagram ou Airbnb.

Peu importe ce que vous construisez, l’objectif final est toujours de présenter votre travail au monde entier. C’est là que les plateformes d’hébergement telles que Netlify sont utiles. Elles fournissent une suite d’outils qui rationalisent le processus de déploiement.

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

Qu’est-ce que Netlify ?

Netlify est une plateforme de développement basée sur le cloud avec des fonctionnalités qui facilitent l’hébergement et le déploiement d’applications sur le web. En termes simples, elle 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 dispose d’une série 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 de manière efficace et effective sur les projets.
• Il offre des services d’hébergement sécurisés que vous pouvez adapter à vos besoins. De plus, il fournit des sauvegardes automatiques en cas de perte de données.
• Il s’intègre de manière transparente aux services de développement en nuage les plus populaires, tels que GitHub, GitLab et Bitbucket.
• Il offre des fonctionnalités qui facilitent la mise en place et la configuration d’une URL de domaine personnalisée et d’un certificat SSL pour votre application.

Créer une application React de démonstration

1. Pour commencer, vous devez d’abord créer une application React de démonstration que vous allez éventuellement déployer sur Netlify. Exécutez la commande ci-dessous sur votre terminal pour créer une application React :

    npx create-react-app demo-react-netlify-app 

2. Ensuite, exécutez cette commande dans le terminal pour lancer le serveur de développement :

    npm start 

   Allez-y et regardez les résultats dans votre navigateur à http://localhost:3000.

3. Enfin, exécutez cette commande pour créer une version de production de votre application :

    npm run build 

   Cette commande génère les fichiers et les actifs de production requis dans un nouveau dossier du répertoire racine appelé build. Le dossier build capture une version miniaturisée de l’application entière, 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. Vous pouvez :

• Importer votre projet depuis un hôte de dépôt Git tel que GitHub.
• Utilisez la fonction de glisser-déposer.
• Utilisez l’outil de ligne de commande, le CLI de Netlify.

Déploiement à l’aide de la fonctionnalité d’importation de GitHub

1. Commencez par créer un dépôt sur GitHub pour héberger les fichiers de votre 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 Netlify. Une fois que vous vous êtes inscrit, naviguez dans le tableau de bord de votre compte et sélectionnez l’onglet  » Git « . Sites onglet.

   

3. Cliquez sur l’icône Importer de Git bouton.

   

4. Sélectionnez votre plateforme de fournisseur Git préférée. Netlify vous demandera de vous authentifier auprès de votre fournisseur Git pour lui donner accès à votre compte et à vos dépôts.

   

5. Une fois que vous avez fait cela, Netlify affichera une liste de dépôts sur votre fournisseur Git. Sélectionnez le dépôt du projet React que vous avez initialement poussé vers 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 à faire de changements, 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 construire l’application et remplit les champs avec les paramètres de construction requis.

   

7. Enfin, cliquez sur 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 depuis les paramètres du site.

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

Il s’agit de la méthode la plus simple pour déployer votre application React sur Netlify. Il vous suffit de glisser et déposer le dossier de construction dans l’interface utilisateur de Netlify.

1. Sur le tableau de bord de Netlify, sélectionnez l’option Site onglet. Ensuite, cliquez sur Ajouter un nouveau site puis sélectionnez Déployer manuellement dans les options du menu déroulant.

   

2. Dans la page de la 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 sera instantanément déployé 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éploiement à l’aide de l’interface de ligne de commande de Netlify

En utilisant l’interface de ligne de commande (CLI) de Netlify, vous pouvez déployer votre application React directement depuis un terminal. En outre, l’interface CLI de Netlify vous permet de configurer le déploiement continu de sorte que lorsque vous commettez et poussez de nouvelles mises à jour dans votre dépôt Git, elles sont automatiquement déployées.

1. Exécutez la commande ci-dessous sur votre terminal pour installer le CLI de Netlify :

    npm install 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 de déployer.

    netlify deploy 

   Le CLI de Netlify vous demandera de l’autoriser à apporter des modifications à votre compte. Après avoir accordé l’autorisation, fournissez le nom du compte d’équipe que vous avez donné lors de l’inscription, puis choisissez de lier le répertoire de l’application à un site Web existant ou de créer et de configurer un nouveau site. Terminez en fournissant un nom de site Web personnalisé et le nom de votre dossier de construction.

   

3. L’interface de commande déploiera une version préliminaire 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 deploy --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 dépôt Git directement à Netlify et de garder votre code en synchronisation avec leur site web ou leur application en direct. Lorsque vous livrez et poussez des changements dans votre dépôt Git, Netlify met 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 aucune configuration. Cependant, elle 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 plus adaptée si vous avez déjà une bonne compréhension de Netlify et si 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 la méthode à utiliser dépendra des besoins de chaque projet individuel.

Utiliser 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 permet de configurer, gérer et déployer facilement vos API.