Comment déployer une application Vue.js

Vue.js est un framework JavaScript développé pour répondre à des problèmes courants dans le développement d’applications web, tels que la gestion complexe des états et le besoin d’une solution légère et flexible.

Le cadre a été conçu pour être simple, efficace et facile à utiliser avec une syntaxe similaire à HTML et JavaScript. En outre, Vue est réactif, ce qui le rend plus rapide et plus efficace que la manipulation traditionnelle du DOM.

Dans cet article, vous découvrirez les avantages et les limites de l’utilisation de Vue et vous apprendrez comment déployer votre application Vue en utilisant le service de conteneurisation de Back4app gratuitement.

Principaux enseignements

• Vue.js offre des techniques de performance optimisées, de la flexibilité et une documentation complète, ce qui en fait un choix populaire pour le développement frontal.

• Cependant, Vue.js peut présenter des limites en termes de stabilité à long terme et un écosystème moins mature que d’autres frameworks.

• Back4app Containers offre un moyen simple et efficace de déployer des applications Vue.js, en s’appuyant sur la technologie Docker pour améliorer les performances, la sécurité, et simplifier le déploiement et la mise à l’échelle.

Avantages du développement d’un front-end avec Vue

Vue est devenu de plus en plus populaire ces dernières années pour plusieurs raisons. Voici quelques avantages à développer vos applications web avec Vue :

Techniques et solutions pour une performance optimisée

Vue fournit un ensemble de techniques permettant d’optimiser les performances lors de la création d’applications web, telles que le DOM virtuel et les mécanismes de mise à jour sous forme de fonctions.

Grâce à ces techniques, Vue minimise le nombre d’opérations DOM et la surcharge de rendu, ce qui se traduit par des temps de rechargement plus rapides et une amélioration des performances de l’application.

Vue utilise un DOM virtuel, une représentation légère du DOM réel, et met à jour le vDOM lorsque vous apportez des modifications à votre application. Il utilise ensuite un algorithme de différenciation pour identifier les changements minimaux requis dans le DOM réel.

Cette approche réduit considérablement le nombre d’opérations DOM coûteuses, ce qui permet d’accélérer le rendu et d’améliorer les performances.

En outre, Vue vous permet de contrôler finement les mises à jour des composants grâce à des crochets de cycle de vie, des observateurs et des propriétés calculées.

Grâce à ces fonctions, vous pouvez spécifier quand un composant doit être mis à jour en fonction de critères spécifiques, ce qui permet d’éviter les mises à jour inutiles et d’améliorer les performances globales.

Vue est flexible par nature

La flexibilité de Vue est évidente dans de nombreux aspects du cadre, ce qui lui permet de s’adapter à divers scénarios de développement, modèles ou exigences.

L’un des principaux atouts de Vue est son approche d’adoption progressive, ce qui en fait le cadre frontal idéal pour l’intégration dans des projets existants.

En plus de son approche d’adoption progressive, vous pouvez intégrer Vue de manière transparente avec d’autres bibliothèques et écosystèmes existants.

Cette compatibilité favorise l’interopérabilité et permet aux développeurs de choisir les solutions les mieux adaptées à leurs besoins.

Par exemple, les fonctionnalités de Vue peuvent être intégrées dans d’autres bibliothèques et frameworks comme React et Angular.

Vue offre également une syntaxe de modèle flexible et intuitive qui vous permet d’écrire des modèles en utilisant une syntaxe basée sur HTML avec des directives et des expressions supplémentaires.

Cette syntaxe allie simplicité et puissance, ce qui facilite la compréhension et l’utilisation des modèles Vue.

En outre, Vue prend en charge d’autres approches de rendu, notamment JSX (JavaScript XML), ce qui offre une certaine souplesse aux développeurs qui préfèrent d’autres syntaxes.

Une documentation complète et une communauté active

La documentation de Vue est bien structurée et concise, expliquant clairement les concepts à l’aide d’exemples pratiques. La clarté et l’exhaustivité de la documentation réduisent également la courbe d’apprentissage, ce qui vous permet de commencer à créer des applications avec Vue.

Un autre aspect déterminant de Vue est le dévouement de sa communauté à la culture open-source et à la contribution active.

Les développeurs Vue contribuent activement à l’amélioration et à l’évolution continues de Vue.js. Ils apportent des contributions au code et s’engagent dans des discussions, offrent un retour d’information précieux et aident à façonner l’orientation future de Vue.js.

Cette approche collaborative garantit que Vue.js reste un cadre de travail de pointe. En vous engageant activement auprès de la communauté Vue, vous pouvez accéder à un vaste réseau de ressources, bénéficier d’un soutien précieux et saisir des opportunités pour développer vos compétences et votre expertise.

Limites du développement d’un front-end avec Vue

Bien que Vue offre des avantages pour le développement frontal, il est également essentiel de noter certaines limitations lors du développement avec Vue. Voici quelques-unes de ces limites :

Stabilité à long terme

Vue souffre d’un soutien substantiel de la part des entreprises, ce qui donne aux développeurs l’impression que Vue n’est pas adapté lorsqu’il s’agit de développer le front-end d’une application web.

Les organisations donnent souvent la priorité aux frameworks bénéficiant d’un solide soutien de l’entreprise, comme Angular et React, afin de s’assurer de la capacité du framework à répondre à l’évolution des besoins de l’entreprise et à fournir une maintenance continue.

Écosystème moins mature

Comparé à Angular et React, Vue dispose d’un écosystème moins mature. Cela conduit à des scénarios où les développeurs Vue rencontrent des limites dans les bibliothèques et les outils disponibles pour s’attaquer aux processus complexes dans les grandes applications.

Les développeurs Vue se retrouvent souvent dans des situations où ils doivent concevoir des solutions personnalisées pour répondre aux exigences de leurs applications. Cela entraîne donc un surcroît de temps et d’efforts dans le développement de l’application web.

Déployer une application avec les conteneurs Back4app

Back4App Containers est une plateforme qui utilise la technologie Docker pour déployer et exécuter des applications dans des environnements isolés appelés conteneurs.

Grâce à cette technologie, vous pouvez emballer vos applications web avec toutes les dépendances nécessaires et garantir des déploiements cohérents dans différents environnements.

Le déploiement d’une application dans les conteneurs Back4app est très simple. Vous devez créer un fichier Docker à la racine de votre application qui décrit l’emballage et l’exécution de l’application.

Ensuite, vous poussez l’application sur votre dépôt GitHub. À partir de cette étape, Back4app construit l’image Docker et exécute le conteneur.

Voici quelques-uns des avantages de l’utilisation des conteneurs Back4App :

• Amélioration des performances: Les conteneurs sont légers et efficaces, ce qui améliore les performances des applications.

• Sécurité renforcée: Les conteneurs sont isolés les uns des autres, ce qui peut contribuer à améliorer la sécurité.

• Déploiement et mise à l’échelle simplifiés: Les conteneurs peuvent être facilement mis à l’échelle, ce qui permet d’économiser du temps et de l’argent.

Construire l’application Vue

Dans ce tutoriel, vous construirez une application Vue simple qui suggère des activités que les utilisateurs peuvent réaliser pendant leur temps libre.

L’application Vue va consommer une API pour effectuer cette action. Ensuite, vous allez déployer l’application Vue dans les conteneurs Back4app.

Pour commencer à construire l’application Vue, exécutez la commande suivante dans votre répertoire préféré :

npm create vue@latest

L’exécution de ce code génère une invite vous permettant de nommer votre application Vue et de sélectionner les fonctionnalités que vous souhaitez intégrer à votre application.

Pour cette application, vous n’utiliserez que la fonctionnalité Vue Router. Après avoir sélectionné cette fonctionnalité, accédez au répertoire de votre application et exécutez npm install pour télécharger et installer les dépendances de l’application.

Pour construire cette application, vous devez installer trois paquets npm supplémentaires : axios, sass, et @iconify/vue.

Axios est une bibliothèque JavaScript qui simplifie les requêtes HTTP et vous permet de récupérer facilement des données de l’API.

Sass est un préprocesseur CSS que vous utiliserez pour styliser l’application. Vous utiliserez le paquet @iconify/vue pour intégrer des icônes vectorielles évolutives dans votre application.

Pour installer ces trois paquets, exécutez la commande ci-dessous dans le répertoire racine de votre application :

npm install axios sass @iconify/vue

Une fois que vous avez installé ces paquets, vous pouvez ouvrir votre répertoire courant dans Visual Studio Code en exécutant la commande suivante :

code .

Créez deux composants dans le répertoire views de votre application : HomeView et AboutView. Ensuite, gérez le routage de ces deux composants en ajoutant le bloc de code sous le fichier index.js dans le répertoire du routeur:

// index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

Le fichier index du répertoire router gère le routage de l’application web Vue. Ici, deux routes sont définies : HomeView et AboutVue.

Pour permettre aux utilisateurs de votre application de naviguer entre ces deux itinéraires, créez un en-tête avec ces itinéraires dans votre fichier App.vue :

<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from 'vue-router'

</script>

<template>
  <header>
  <h1> Unbored </h1>

  <nav>
    <RouterLink to="/" class="link"><button>Home</button></RouterLink>
    <RouterLink to="/about" class="link"><button>about</button></RouterLink>
  </nav>
  </header>

  <RouterView />
</template>

<style lang="scss" scoped>
header{  
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;

    nav{
      display: flex;
      gap: 1rem;

      .link{
        text-decoration: none;
        color: inherit;
      }
    }

  }
</style>

Dans le fichier App.vue, vous avez importé les composants RouterLink et RouterView du paquetage vue-router.

Le composant RouterLink relie les boutons à leurs itinéraires respectifs, tandis que le composant RouterView affiche le contenu de l’itinéraire. Vous avez également stylisé l’en-tête dans le bloc de style.

Après avoir géré les itinéraires, créez le composant HomeView de votre application. Le composant HomeView doit afficher une nouvelle activité que l’utilisateur de l’application peut effectuer lorsqu’il s’ennuie à chaque clic de bouton. Pour ce faire, copiez le code suivant dans votre composant HomeView:

<!-- HomeView.vue -->
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { Icon } from '@iconify/vue';

const activity = ref('');

const fetchActivity = async () => {
    try {
    const response = await axios.get('<https://www.boredapi.com/api/activity>');
    activity.value = response.data.activity
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

</script>

<template>
    <div>
        <h1>Tired of feeling bored. </h1>
        <p>Click on the button below to get an activity you can do.</p>
        <button @click="fetchActivity"> Get Activity</button>
        <Icon icon="system-uicons:arrow-down" />
        <h2> {{ activity }}</h2>
    </div>
</template>

<style lang="scss" scoped>

  div{
    display: flex;
    flex-direction: column;
    margin-block-start: 6rem;
    align-items: center;
    gap: 2rem;

    h1{
      text-transform: uppercase;
      letter-spacing: 0.5rem;
    }
  }
</style>

Le bloc de code ci-dessus détaille le composant HomeView. Dans le composant HomeView, vous avez importé les fonctions ref et axios de leurs paquets respectifs. Vous avez également stylisé ce composant dans le bloc de style.

La variable activity est une référence réactive qui stocke les données d’activité récupérées. La fonction fetchActivity récupère de manière asynchrone les données du point de terminaison API“https://www.boredapi.com/api/activity” spécifié avec axios et met à jour la valeur de l’activité lorsqu’un utilisateur de l’application clique sur le bouton “Get Activity” (Obtenir une activité).

Pour expliquer aux utilisateurs de votre application de quoi il s’agit, copiez et collez le code suivant dans votre composant AboutView :

<!-- AboutView.vue -->
<template>
  <div class="about">
    <h3>About Unbored</h3>
    <p>The Unbored App suggests activities you could perform instead of staying bored all day</p>
  </div>
</template>

<style lang="scss" scoped>

  h3{
    margin-block-start: 4rem;
    margin-block-end: 3rem;
  }
</style>

Pour styliser le corps de votre APP Vue, créez un fichier main.css dans le répertoire assets et ajoutez le code ci-dessous :

/* main.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 50%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 0.8rem;
    background-color: inherit;
    font-family: 'Montserrat', sans-serif;
    font-size: small;
    font-weight: bold;
    color: #333333;
    border-radius: 12px;
}

button:hover{
    color: #e2e2e2;
    background-color: #333333;
  }

Voilà, c’est fait ! Pour prévisualiser votre application Vue, exécutez la commande suivante dans le répertoire de l’application :

npm run dev

Votre application devrait ressembler à l’image ci-dessous.

Déployer des applications Vue avec les conteneurs Back4app :

Il s’agit d’un tutoriel étape par étape sur la façon de déployer votre application Vue. Tout d’abord, vous devez la dockeriser. Pour docker une application, vous devez créer un fichier Docker, qui contient toutes les instructions dont le Docker Engine a besoin pour construire l’image.

Ensuite, vous testerez votre application localement pour vous assurer que tout fonctionne parfaitement avant de la déployer dans les conteneurs Back4app.

Dockeriser votre application Vue

Pour dockeriser votre application Vue, vous devez créer un Dockerfile dans le répertoire racine de votre application Vue. Un Dockerfile est un modèle que le Docker Engine utilise pour créer un conteneur Docker avec toutes les dépendances et configurations nécessaires.

Le fichier Docker définit l’image de base, fixe le répertoire de travail, copie les fichiers dans le conteneur, installe les dépendances, configure l’environnement d’exécution et spécifie les commandes à exécuter lorsque le conteneur est lancé.

Pour mieux appréhender la technologie Docker, vous pouvez lire cette référence Dockerfile.

Pour commencer à dockeriser votre application Vue, créez un fichier Docker dans le répertoire racine et copiez-y le code suivant :

# Dockerfile
FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:1.19.0-alpine

COPY --from=0 /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Le fichier Docker effectue les actions suivantes :

• Le fichier Docker utilise l’image de base node:18, qui fournit l’environnement d’exécution Node.js.

• Définit le répertoire de travail à l’intérieur du conteneur à /app.

• Copie les fichiers package.json et package-lock.json dans le répertoire de travail.

• Installe les dépendances avec la commande npm install.

• Copie l’ensemble du code de l’application dans le répertoire de travail.

• Construit l’application en exécutant la commande npm run build.

• Le fichier Docker utilise ensuite l’image de base nginx:1.19.0-alpine, qui fournit le serveur web NGINX.

• Copie les fichiers statiques construits à l’étape précédente dans le répertoire /usr/share/nginx/html de l’image NGINX.

• Ouvre le port 80 pour autoriser le trafic HTTP entrant.

• Il exécute le serveur NGINX avec la configuration spécifiée "nginx", "-g", "daemon off ;" en utilisant l’instruction CMD.

Construire et tester votre application Vue dockerisée

Avant de déployer vos images sur le cloud, vous pouvez tester l’application Docker localement. Pour tester l’application, commencez par la construire en exécutant la commande suivante :

docker build -t bored .

Après le processus de construction, `vous pouvez alors exécuter la commande suivante pour lancer le conteneur Docker localement :

docker run -p 8080:80 bored

L’option -p 8080:80 spécifie la correspondance des ports entre l’hôte et le conteneur. Elle associe le port 8080 de l’hôte au port 80 du conteneur.

À ce stade, votre application s’exécute localement dans un conteneur. Vous pouvez alors naviguer vers http://localhost:8080 pour voir votre application.

Déployer votre application dans les conteneurs Back4app

Avant de déployer votre application dans les conteneurs Back4app, vous devez pousser l’application vers un dépôt GitHub. Vous pouvez apprendre à le faire en suivant ces étapes dans la documentation GitHub.

Après avoir poussé votre code source sur Github, vous devez créer un compte Back4app. Pour créer un compte sur Back4app, suivez les étapes suivantes :

• Visitez lesite officielde Back4app .

• Localisez et cliquez sur le bouton d’inscription dans le coin supérieur droit de la page d’accueil.

• Remplissez le formulaire d’inscription fourni avec les informations nécessaires.

• Soumettez le formulaire pour terminer la procédure d’inscription.

Une fois que vous avez créé votre compte Back4app, connectez-vous à l’aide de vos identifiants. Ensuite, localisez le bouton NEW APP situé dans le coin supérieur droit de votre tableau de bord.

En cliquant sur le bouton NEW APP, vous serez redirigé vers une page où vous pourrez choisir la méthode de déploiement de votre application. Puisque vous avez l’intention de déployer un conteneur, optez pour l’option Conteneurs en tant que service.

Après avoir cliqué sur l’option Conteneurs en tant que service, liez le dépôt GitHub de votre application et cliquez sur Sélectionner pour déployer l’application.

En cliquant sur le bouton Sélectionner, vous serez dirigé vers une page où vous pourrez fournir des informations essentielles sur votre application. Il s’agit notamment du nom de l’application, de sa branche, de son répertoire racine et de ses variables d’environnement.

Veillez à renseigner toutes les variables d’environnement nécessaires à votre application. Une fois que vous avez rempli les champs obligatoires, cliquez sur le bouton Créer une application.

En cliquant sur ce bouton, le processus de déploiement de votre application Vue commencera, lançant les étapes nécessaires à la mise à disposition de votre application. Vous pourrez suivre la progression du déploiement, comme le montre l’image ci-dessous.

Conclusion

Vue est l’un des meilleurs frameworks JavaScript open-source pour le développement frontal. Il offre une approche intuitive de la construction d’interfaces utilisateur grâce à des fonctionnalités telles que la liaison réactive des données et une architecture basée sur des composants.

Dans cet article, vous avez appris à construire et à déployer une application Vue avec les conteneurs Back4app. Le déploiement de vos applications sur Back4app permet de simplifier la gestion complexe de l’infrastructure back-end, car Back4app offre des outils pour gérer les données, mettre à l’échelle et surveiller les performances d’une application.

FAQ