Comment déployer une application frontale sur Netlify ?

Le déploiement d'applications front-end n'est pas une grande chose aujourd'hui. Nous pouvons déployer un site en quelques minutes avec des technologies modernes et des plateformes d'hébergement. Il existe de nombreuses plateformes d'hébergement. Mais, nous sommes intéressés par Netlify pour cet article.

Déployons notre application frontend sur Netlify.

Frontend Applications

Il existe différents types de bibliothèques et de frameworks frontend comme Réagir, Vue, Angular, etc., Et la bonne nouvelle est que tous utilisent le même packager. Le déploiement de toutes les applications frontend construites avec différentes bibliothèques et frameworks est similaire. Nous sommes donc prêts à utiliser n'importe laquelle de ces bibliothèques et frameworks.

Nous pouvons également créer des applications frontend sans aucune bibliothèque ni framework. C'est la façon traditionnelle de créer des applications frontend autrefois. Mais, ça change beaucoup maintenant. Ainsi, nous pouvons créer des applications frontend de différentes manières. Cependant, le processus de déploiement est le même pour tous ces différents types d'applications front-end.

Nous verrons en déployer un application frontale construit avec une bibliothèque et une autre sans bibliothèque ni framework. Créons des applications frontales minimales pour le déploiement en utilisant Réagir et Plaine JavaScript.

installation

Nous allons créer des applications React et JavaScript simples pour la démonstration de déploiement. Vous les créez également pour suivre. Ou, si vous avez déjà eu des applications frontales, passez à la section de déploiement.

Nous devons nous rappeler que le point d'entrée de toute application frontale doit être index.html lors du déploiement vers Netlify.

Si nous avons créé des applications à l'aide d'une bibliothèque ou d'un framework, nous n'avons pas à nous en soucier. Par défaut, les bibliothèques et les frameworks créent index.html fichier dans le processus de construction pour nous. Mais, lorsque nous avons des applications JavaScript simples, nous devons créer un index.html fichier comme entrée pour notre application.

Réagir Application

Exécutez la commande suivante pour créer une application React.

npx create-react-app demo

Vous pouvez mettre à jour l'application à votre guise avant de la déployer. Je viens de mettre à jour une ligne de texte sur la page d'accueil. Ce n'est pas grave, cependant :).

Application JavaScript simple

Suivez les étapes ci-dessous pour créer une application JavaScript simple.

• Créez un dossier appelé demo.
• Créez trois fichiers appelés index.html, styles.css et scripts.js.
• Ici, index.html est le point d'entrée de notre application.

Laissez libre cours à votre créativité et mettez à jour l'application. J'ajoute juste des choses simples à l'application.

Deploying

En ce qui concerne le déploiement d'applications frontend sur Netlify, nous avons deux options. Nous pouvons déployer directement des applications de GitHub, GitLab, BitBucket, etc., vers Netlify. Ou bien nous pouvons déployer en utilisant le Netlify CLI (interface de ligne de commande). Il n'est pas obligatoire de tout connaître pour déployer nos applications. Mais c'est bien avec les différentes options que nous avons pour le déploiement.

Explorons chacun d'eux un par un.

GitHub

Nous utilisons GitHub pour héberger notre code. Vous n'avez pas besoin de l'utiliser car ce n'est pas obligatoire. Vous pouvez utiliser d'autres plateformes à votre guise.

Nous pouvons déployer deux types d'applications. Mais, le processus semble similaire pour les deux. Même si je vais vous montrer les deux. Il comporte principalement deux étapes. Elles sont

• Envoyez le code à GitHub.
• Déployez l'application depuis GitHub à l'aide de Netlify.

La première partie est commune aux deux Réagir et JavaScript applications. Commençons le processus de déploiement par la première étape.

Nous supposons que vous n'avez pas eu votre code sur GitHub. Si vous avez votre code sur GitHub, vous pouvez ignorer la partie push du code. Vous avez besoin git outil. Si vous n'avez pas git installé sur votre machine, vous devez l'installer avant de continuer.

#1. Pousser du code vers GitHub

• Accédez à votre compte GitHub et créez un dépôt appelé demo.

• Vous pouvez voir le dépôt comme suit après sa création.

Maintenant, nous devons pousser notre code vers le référentiel que nous avons créé ci-dessus. Pour pousser le code, vous pouvez suivre les commandes données dans le repo ou les commandes ci-dessous.

• Ouvrir le terminal ou cmd.
• Allez dans le répertoire de votre projet.
• Initialiser le git avec git init
• Ajouter les modifications au git local git add .
• Valider les changements avec un message git commit -m 'Completed application'
• Connectez le référentiel distant avec notre référentiel local git remote add origin 'your_repo_path'. Remplacer your_repo_path avec votre référentiel distant. Vous pouvez le trouver dans le référentiel de la même manière que le mien git@github.com:hafeezulkareem/demo.git
• Maintenant, poussez le code git push -u origin main
• C'est ça; nous avons poussé notre code vers GitHub.

Vous pouvez voir le code comme suit dans votre repo.

Nous avons terminé la première étape consistant à envoyer notre code vers GitHub. Si vous déployez une plaine JavaScript application, alors votre code peut ressembler à ceci.

Passons à l'étape suivante et déployons notre application sur Netlify.

#2. Déploiement du code GitHub sur Netlify

Si vous n'avez pas de compte sur Netlify, créez-en un.

• Allez à Netlify en ligne.
• Connectez-vous à votre compte.
• Vous pouvez voir un bouton appelé Nouveau site de Git, comme indiqué ci-dessous.

• Cliquez sur le bouton pour commencer le déploiement.
• Vous accéderez à la page de déploiement qui se présente comme suit.

• Vous pouvez coder différentes plateformes d'hébergement sur la page. Nous utilisons GitHub. Alors, cliquez dessus.
• Cela ouvrira une nouvelle fenêtre pour vous connecter à notre compte GitHub comme suit.

• Connectez-vous à votre compte GitHub pour l'autorisation Netlify.
• Une fois connecté à votre compte GitHub, la fenêtre se fermera en disant Autorisé.
• Maintenant, recherchez le nom de votre référentiel dans la barre de recherche donnée.

• Lorsque vous recherchez le référentiel, il n'apparaîtra pas car nous n'avons pas donné à notre référentiel l'accès à Netlify. Vous verrez un bouton appelé Configurer Netlify sur GitHub.

• Cliquez sur le bouton et entrez le mot de passe de votre compte GitHub pour confirmer l'accès.

• Vous accéderez à une page d'accès qui se présente comme suit.

• Faites défiler vers le bas et vous verrez une section intitulée Accès au référentiel.

• Il y a deux options. Nous pouvons donner accès à tous nos référentiels ou à certains d'entre eux qui le nécessitent. Il vaut mieux donner accès aux référentiels que nous déployons et pas à tous.
• Sélectionnez le Sélectionnez uniquement les référentiels option comme suit.

• Cliquez sur la liste déroulante ci-dessous et recherchez le référentiel que vous souhaitez déployer. Sélectionnez-le.

• Cliquez sur le Épargnez .
• Il redirigera vers Netlify page de déploiement. Et vous pouvez voir le nouveau référentiel.

• Cliquez sur le référentiel.
• Il affichera différents détails comme une branche à déployer, une commande pour installer des packages, etc.,

• Si vous avez le code complet sur une branche différente autre que maître, mettez-le à jour en sélectionnant la branche dans la liste déroulante.
• Enfin, cliquez sur le Déployer le site bouton. Il vous redirigera vers le tableau de bord.
• Le déploiement du site prendra un certain temps.

• Vous verrez le site publié une fois qu'il sera déployé.

C'est tout.

Nous avons déployé avec succès notre site sur Netlify. Vous pouvez cliquer sur l'URL du site pour le voir en direct.

Nous pouvons mettre à jour les paramètres du site et du domaine à notre guise. Mais, nous ne le couvrirons pas ici car cela fait un autre sujet complet à aborder. Vous trouverez ci-dessous l'application JavaScript simple après le déploiement.

Il n'y a aucune différence dans le processus de déploiement. Mais, n'oubliez pas de ne pas oublier le point d'entrée de l'application, c'est-à-dire, index.html.

Il est maintenant temps de découvrir une autre méthode de déploiement de notre application frontend.

#3. Déploiement du code à l'aide de Netlify CLI

La CLI Netlify est une interface de ligne de commande pour déployer des applications frontales à partir du terminal ou de la ligne de commande. C'est utile lorsque vous ne voulez pas passer par des étapes supplémentaires (méthode ci-dessus). Comme la méthode ci-dessus, nous pouvons déployer Réagir (toute bibliothèque ou framework) ou JavaScript applications.

Vous pouvez obtenir la documentation complète de Netlify CLI ici. Mais, il n'est pas nécessaire de déployer une application. Vous pouvez vous y référer lorsque vous passez au niveau avancé.

Voyons comment déployer à l'aide de Netlify CLI.

Tout d'abord, nous devons l'installer sur notre machine. Il est disponible sous forme de package de nœuds. Ainsi, nous pouvons l'installer en utilisant le npm. Installons-le à l'aide de la commande suivante.

npm install netlify-cli -g

Le drapeau -g est d'installer le package globalement afin que nous puissions y accéder n'importe où. Vous verrez quelque chose de similaire à l'image suivante.

Voyons les étapes à déployer Réagir et simple JavaScript applications utilisant Netlify CLI.

• Exécutez la commande de construction de l'application React (ou de toute autre bibliothèque ou framework). Nous n'avons pas besoin d'exécuter de commandes dans le cas d'une application JavaScript simple.

npm run build

• La commande Build peut varier en fonction de la bibliothèque ou du framework que vous utilisez.
• Vous verrez un dossier de construction comme suit.

• Changez votre répertoire en construire dossier en cas d'application React ou dossier de projet en cas d'application JavaScript.

• Avant de passer aux étapes suivantes, nous devons créer un Netlify Compte. Aller à Netlify et créez un compte et passez aux étapes suivantes.
• Maintenant, nous devons nous connecter à l'aide de la CLI. Exécutons la commande suivante pour nous connecter.

netlify login

• La commande ci-dessus ouvrira un nouvel onglet dans le navigateur par défaut pour vous connecter au compte Netlify. Cela vous mènera au site Netlify.
• Entrez vos identifiants et connectez-vous. Vous demanderez à Autoriser la CLI après vous être connecté.

• Cliquez sur le Autoriser pour vous authentifier. Vous verrez un message de réussite après.

• Maintenant, il est temps de déployer notre application. Exécutez la commande de déploiement suivante.

netlify deploy

• Il vous demandera de choisir le site existant ou d'en créer un nouveau. Choisissez (utilisez vos flèches haut et bas) le Créer et configurer un nouveau site et frapper Entrer.

•  ça s'affichera alors Teams pour choisir, utilisez vos flèches pour sélectionner, et appuyez sur Entrer.

• Maintenant, vous pouvez entrer le sous-domaine de votre site. Ce n'est pas obligatoire, cependant. Netlify en choisira un au hasard si nous le laissons. Nous pouvons le changer plus tard si nous le voulons. Je le laisse vide pour le moment.

• Il nous demandera d'entrer le répertoire que nous voulons déployer. Nous avons déjà navigué vers le répertoire de destination. Frappons juste Entrer. Vous pouvez également entrer dans d'autres répertoires. Mais ce n'est pas simple. Il est donc préférable de naviguer d'abord vers le répertoire de destination, puis de déployer.

• Il déploiera notre site pour un brouillon d'URL comme suit.

• Vous pouvez vérifier votre site sur le brouillon d'URL et vous assurer que tout est correct.
• Après avoir vérifié le site, nous pouvons le déployer en production à l'aide de la commande suivante.

netlify deploy --prod

• Il ne demandera que le répertoire. Entrez dans le répertoire. Si nous sommes dans le même répertoire, appuyez simplement sur Entrer.
• C'est ça. Notre déploiement du site est terminé. Vous pouvez visiter le site pour le vérifier.

• Et voici le résultat.

Nous avons terminé de déployer notre site sur Netlify en utilisant Netlify CLI. Vous pouvez mettre à jour les paramètres du site dans votre tableau de bord Netlify.

Conclusion

Phew! C'est long. Vous n'avez besoin d'aucun autre guide pour déployer votre application frontale sur Netlify après avoir lu ceci complètement.

Il existe deux méthodes pour déployer notre application sur Netlify. Lequel suivre ? Il y a un léger avantage à utiliser la première méthode. Netlify mettra à jour la version chaque fois que nous transmettrons un nouveau code à notre référentiel de site. Mais, dans le cas de la méthode CLI, nous devons le faire manuellement.

Nous adoptons toujours une méthode plutôt que les autres en fonction des situations dans lesquelles nous nous trouvons. De toute façon, vous connaissez les deux méthodes de déploiement. Nous n'avons donc pas à nous soucier de la méthode. Choisissez celui qui vous convient le mieux.

Remarque : Les sites de démonstration présentés dans l'article peuvent ne pas être disponibles publiquement après un certain temps.

Besoin d'une alternative à Netlify ? Découvrez ces meilleures plateformes d'hébergement de sites statiques.

Bon déploiement 🙂