Déployer une application Vue avec Netlify et GitHub

Voici comment déployer votre application Vue avec Netlify, qui vous permet de vous connecter à différents fournisseurs Git. Nous verrons comment déployer notre projet GitHub dans cet article.

Le déploiement de notre application est l’étape nécessaire pour permettre l’accès en ligne à des utilisateurs supplémentaires. Le déploiement à l’aide du mauvais outil peut être difficile car cela alourdirait le processus. Netlify est une excellente solution pour déployer notre application car elle prend en charge des outils tels que GitHub, qui nous permet de publier sans effort notre application en connectant notre compte GitHub à notre compte Netlify.

Ce tutoriel nous apprendra une méthode simple pour déployer nos applications Vue à l’aide de Netlify et GitHub.

Conditions préalables

Cet article suppose que vous avez une compréhension de base de Git et GitHub, car cela ne sera pas abordé dans ce didacticiel. Nous parlerons uniquement de Netlify et de la manière de créer un compte Netlify.

Voici les quelques éléments que nous devons configurer pour suivre ce tutoriel :

• Un compte Git et GitHub fonctionnel. Pour créer un nouveau compte GitHub, suivez ceci guide.
• Une version compactée de Node installée sur notre ordinateur

Introduction à Netlify

Netlify est un service backend sans serveur permettant de créer des applications Web et des sites Web dynamiques. Il propose une plate-forme de développement qui comprend la création et le déploiement de sites Web. La plateforme est construite sur des standards Web ouverts, ce qui signifie que nous pouvons facilement intégrer des outils et des frameworks de construction.

Création d’un nouveau projet Vue

La première étape consiste à créer un nouveau projet Vue. Vue propose deux façons de créer un nouveau
projet : nous pouvons utiliser la dernière commande CLI ou l’ancienne commande CLI. Pour créer un nouveau projet Vue, nous utiliserons la commande ci-dessous :

npm init vue@latest

Ensuite, nous allons créer notre nom de fichier et sélectionner les fonctionnalités que nous souhaitons inclure dans notre application.

Une fois que nous avons terminé, l’étape suivante consiste à exécuter la commande suivante :

cd file-name
npm install 

Après avoir exécuté la commande ci-dessus, nous exécuterons le serveur avec la commande ci-dessous :

npm run dev

Création d’une application de base

Nous créerons un projet simple que nous déploierons à l’aide de Netlify lorsque nous aurons fini de configurer et de démarrer un nouveau projet Vue. Dans cet exemple, nous allons créer une plateforme d’apprentissage technologique en ligne. Nous développerons et lancerons uniquement la section héros et navigation, puisque l’objectif principal de ce didacticiel n’est pas de construire un programme complet mais plutôt de démontrer comment lancer notre application à l’aide de Netlify et GitHub.

Copiez le code ci-dessous, puis collez-le dans le composant Vue créé. Notez qu’il ne s’agit que d’un exemple ; en suivant la même procédure, nous pouvons pousser et déployer nos applications précédentes sur Netlify.

<template>
  <section class="text-gray-600 body-font">
    <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
      <div
        class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
        <h1 class="title-font sm:text-5xl text-3xl mb-4 font-bold text-gray-900">Begin your coding
          <br class="hidden lg:inline-block">journey
        </h1>
        <p class="mb-8 leading-relaxed">They claim that nothing is insurmountable to learn. Learning to program is also
          not impossible. All we need is your dedication and time. Our platform will help you stay focused with lots of
          our features and curriculum</p>
        <div class="flex justify-center">
          <a class="inline-block py-4 px-10 free-btn text-md " href="#">
            TRY FOR FREE
          </a>
          <a class="inline-block py-4 px-10 bg-btn text-md " href="#">
            SIGN UP NOW
          </a>
        </div>
      </div>
      <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
        <img class="object-cover object-center rounded" alt="hero" src="../assets/pana.png">
      </div>
    </div>
  </section>
</template>

Voici un exemple complet de notre application.

Maintenant que nous avons fini de créer notre application, l’étape suivante consiste à pousser notre application vers GitHub via notre terminal Git afin que nous puissions la déployer avec Netlify.

Création d’un nouveau référentiel

La première étape consiste à créer un nouveau référentiel sur GitHub. Pour ce faire, cliquez sur l’icône «+», nous verrons un menu déroulant, cliquez sur le menu new repository cela nous redirigera vers l’endroit où nous créerons un nouveau référentiel.

Le nom et la description de notre référentiel seront alors ajoutés. Bien que la description soit facultative, il est recommandé de toujours expliquer en quoi consiste notre application car elle aide les utilisateurs à comprendre le projet avant de contribuer. GitHub a le net avantage d’être une plateforme open source tout en nous permettant de privatiser notre référentiel. Par exemple, nous pouvons choisir de rendre ce référentiel public ou privé.

Nous choisissons public parce qu’il s’agit d’un référentiel public, mais nous pourrions encore changer d’avis et en faire un référentiel privé à l’avenir.

Pousser un référentiel existant depuis la ligne de commande

Ensuite, nous allons pousser un référentiel existant depuis notre ligne de commande. Pour ce faire, nous allons créer un fichier init Git ou ajouter la commande ci-dessous. Puisque nous avons créé un nouveau projet Vue, nous ne créerons pas de fichier Git. Lors de l’installation d’un nouveau projet Vue, un fichier Git est également inclus.

Pour pousser vers un référentiel existant, nous suivrons les étapes de la liste :

git remote add origin git@github.com:Emilsone/coderz-app.git
git add .
git commit -m "write commit message"
git push -u origin main

Nous avons poussé avec succès notre projet vers GitHub :

Voici notre projet sur GitHub :

Créer un compte Netlify

Pour créer un compte Netlify, rendez-vous sur Netlifier site Web et cliquez sur le bouton d’inscription dans le coin supérieur droit de l’écran.

Netlify nous propose différentes méthodes de connexion, comme le montre le diagramme ci-dessus. Une fois que nous aurons sélectionné nos options de connexion préférées, nous serons redirigés pour configurer notre compte. Dans cette section, il nous sera demandé de sélectionner ce pour quoi nous voulons utiliser Netlify. Nous pouvons utiliser Netlify à quatre fins différentes, notamment client, work, school et personal utiliser.

Déploiement de l’application Vue avec Netlify et GitHub

La prochaine étape consiste à déployer notre application maintenant que nous avons créé et configuré avec succès notre compte Netlify. Nous avons la possibilité de déployer manuellement ou depuis Git, mais nous ne le ferons pas non plus car nous avons besoin de voir le tableau de bord Netlify pour comprendre son fonctionnement et voir d’autres fonctionnalités. Au lieu de cela, nous déploierons via le tableau de bord principal.

Voici à quoi ressemble notre tableau de bord Nelify, nous avons Bandwidth, Build minutes used, Concurrent builds et Team members.

Il s’agit ensuite de déployer un nouveau site. Pour déployer un nouveau site, nous cliquerons sur le menu sites. Cela nous amènera à l’endroit où nous pourrons ajouter un nouveau site depuis notre GitHub. Clique sur le Add new site bouton, cliquez dans le menu déroulant import an existing project.

Prochaine étape, nous choisirons le fournisseur Git sur lequel nous hébergeons notre code. Par exemple, nous avons GitHub, GitLab, Bitbucket et Azure DevOps. Nous choisirons l’option GitHub car nous avons hébergé notre code sur leur plateforme.

Nous choisirons le référentiel que nous souhaitons lier et déploierons notre site sur Netlify. Dans cet exemple, j’ai sélectionné le référentiel que j’ai poussé vers GitHub.

Le déploiement de notre référentiel intervient ensuite une fois que nous avons fini de le choisir. Pour éviter un déploiement raté, nous devons étudier attentivement les instructions avant d’aller plus loin.

Nous avons déployé notre site avec succès !

Nous avons appris comment déployer notre application avec Netlify et GitHub. Netlify nous offre également la possibilité de personnaliser notre nom de domaine. Voyons comment nous pouvons procéder. Pour ce faire, nous cliquerons sur le lien site settings.

Cliquez sur le bouton « Changer le nom du site ».

Cela nous redirigera vers l’endroit où nous modifierons le nom de notre application.

C’est tout! Nous avons personnalisé avec succès notre nom de domaine.

Conclusion

Déployer notre application Vue avec Netlify et GitHub est simple, car Netlify permet de simplifier le processus de déploiement en quelques étapes seulement. L’utilisation de Git et Netlify pour l’hébergement nous fournit un flux de travail simple et efficace pour déployer et gérer notre application. Cet article nous aidera à déployer facilement notre application avec Netlify.