Comment déployer une application frontale sur Netlify ?

Le déploiement d’applications frontales n’est pas une grosse affaire aujourd’hui. Nous pouvons déployer un site en quelques minutes avec des technologies et un hébergement modernes platformes. Il existe de nombreux hébergements platformes là-bas. Mais nous nous intéressons à Netlify pour cet article.

Déployons notre application frontend sur Netlify.

Applications frontales

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éerate applications frontales sans bibliothèques ni frameworks. Il était une fois la manière traditionnelle de créer des applications frontales. Mais ça change beaucoup maintenant. Ainsi, nous pouvons créer des applications frontales de différentes manières. Même si le déploiement process est le même pour tous ces différents types d’applications frontales.

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 le Plaine JavaScript.

installation

Nous allons créerate Applications simples React et JavaScript pour la démonstration de déploiement. Vous créezate eux aussi 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 created applications utilisant n’importe quelle bibliothèque ou framework, nous n’avons pas à nous en soucier. Par défaut, les bibliothèques et frameworks créentate index.html fichier dans le construire process pour nous. Mais lorsque nous avons des applications JavaScript simples, nous devons créerate an index.html fichier comme entrée pour notre application.

Réagir Application

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

npx create-react-app demo

Vous pouvez mettre à jourate l'application comme vous le souhaitez avant de la déployer. je viens de mettre à jourateune ligne de texte sur la page d'accueil. Mais ce n'est pas grave :).

Application JavaScript simple

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

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

Sortez votre créativité et mettez à jourate l'application. J'ajoute simplement des choses simples à l'application.

Déploiement

En ce qui concerne le déploiement d'applications frontales sur Netlify, nous avons deux options. Nous pouvons déployer directement des applications depuis 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’êtes pas obligé de l’utiliser car ce n’est pas obligatoire. Vous pouvez utiliser d'autres platformes comme vous le souhaitez.

Nous pouvons déployer deux types d’applications. Mais le process semble similaire pour les deux. Même si je vais vous les montrer tous les deux. Il comporte principalement deux étapes. Ils 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 le JavaScript applications. Commençons le déploiement process avec le premier pas.

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éezate un dépôt appelé demo.

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

Maintenant, nous devons pousser notre code vers le référentiel que nous avons créé.ated ci-dessus. Pour pousser le code, vous pouvez suivre les commandes données dans le dépôt 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éezate une.

• 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 naviguerezate à la page de déploiement qui ressemble à ceci.

• Vous pouvez héberger différents codes platformulaires sur la page. Nous utilisons GitHub. Alors, cliquez dessus.
• Cela ouvrira un nouveau window pour vous connecter à notre compte GitHub comme suit.

• Connectez-vous à votre compte GitHub pour l'autorisation Netlify.
• Une fois connecté à votre compte GitHub, le window je terminerai 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 naviguerezate vers une page Access qui ressemble à ceci.

• 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, mise à jourate en sélectionnant la branche dans la liste déroulante.
• finally, 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 à jourate les paramètres du site et du domaine comme nous le souhaitons. Mais nous n’en parlerons pas ici car cela constitue 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 déploiement process. 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 permettant de déployer des applications frontales à partir du terminal ou de la ligne de commande. C'est utile quand on ne veut pas passer par certains extra étapes (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 CLI Netlify Vous la trouverez 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 globally 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éerate a Netlify Compte. Aller à Netlify et create 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 b par défautrowsheu 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 être authentiqueate votreself. 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 ou la création existantate un nouveau. Choisissez (utilisez votre flèche haut et basrows) la Create & configurer un nouveau site et frapper Entrer.

•  ça s'affichera alors Teams pour choisir, utilisez votre ARrows pour sélectionner et appuyez sur Entrer.

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

• Il nous demandera d'entrer le répertoire que nous voulons déployer. Nous avons déjà naviguéated vers le répertoire de destination. Frappons simplement Entrer. Vous pouvez également accéder à d'autres répertoires. Mais ce n'est pas simple. Alors il vaut mieux naviguerate vers le répertoire de destination, puis déployez-le.

• 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 CLI Netlify. Vous pouvez mettre à jourate 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 sera mis à jourate la construction chaque fois que nous envoyons du nouveau code vers le référentiel de notre site. Mais, dans le cas de la méthode CLI, nous devons le faire manuellementally.

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 meilleur hébergement de site statique platdocument.

Bon déploiement 🙂