Comment déployer une application Svelte ?

How to Deploy an Svelte Application_
How to Deploy an Svelte Application_

Dans cet article, vous apprendrez à créer une application web en utilisant Svelte et à la déployer en utilisant les conteneurs Back4app.

Svelte est un cadre JavaScript pour le développement d’applications web réactives et dynamiques. Avec le framework Svelte, vous pouvez créer des applications légères et performantes car, contrairement aux frameworks JavaScript traditionnels, Svelte déplace une grande partie des tâches lourdes du navigateur vers l’étape de construction.

Aperçu du projet : Suivi des stocks

Cet article présente un outil de suivi d’inventaire qui s’intègre à la base de données en temps réel de Back4App.

L’application gère les données d’inventaire de l’utilisateur, lui permettant d’ajouter, d’extraire et de supprimer des informations sur les produits en fonction de ses besoins.

Le tracker stockera les détails essentiels tels que le nom du produit, le prix et la quantité sur Back4App.

Il permet aux utilisateurs de gérer et de contrôler facilement leurs stocks, en garantissant des informations précises et actualisées sur leurs produits.

Création de l’application Svelte

Dans cette section, vous allez créer un projet Svelte en utilisant Vite (un outil de construction de framework frontal).

Vous pouvez créer votre application Svelte avec Vite en lançant la commande suivante dans votre terminal :

npm init vite

Après avoir exécuté cette commande, donnez un nom à votre projet, sélectionnez le framework (Svelte) et choisissez votre variante linguistique préférée pour le framework.

Comme cela :

CLI de Vite

L’image ci-dessus montre que le nom du projet Svelte est inventory-tracker, et que la variante de langage est JavaScript.

Ensuite, vous devez installer certaines dépendances nécessaires dans le projet Svelte. Pour installer les dépendances, placez-vous dans le répertoire de votre projet et exécutez la commande ci-dessous :

# Switch to the project directory
cd inventory-tracker

# Install dependencies
npm install

Cette commande installera toutes les dépendances nécessaires dans votre projet, et vous pouvez maintenant commencer à construire votre application sur votre IDE.

Construire une application svelte

Dans cette section, vous allez construire une application de suivi d’inventaire en utilisant Svelte et la fonction backend as a service de Back4app.

L’application aura des capacités CRUD (Créer, Lire, Mettre à jour, Supprimer), ce qui vous permettra d’ajouter, d’extraire, de modifier et de supprimer des données.

Avant de commencer à construire votre application Svelte, assurez-vous d’installer la bibliothèque svelte-routing.

La bibliothèque svelte-routing est une bibliothèque qui ajoute des capacités de routage à vos applications Svelte, ce qui vous permet de créer des applications à page unique (SPA).

Installez la bibliothèque svelte-routing en exécutant la commande ci-dessous :

npm i -D svelte-routing

Une fois installé, créez un composant AddProduct et un composant Home dans le répertoire src de votre projet. Dans le composant AddProduct, ajoutez les lignes de code suivantes :

<!-- AppProduct.svelte -->
<script>
	let product = {
	  name: "",
	  quantity: "",
	  price: "",
	}
</script>

<form>
	<input type="text" placeholder="Name of Product" bind:value={product.name}>
  <input type="number" placeholder="No of Products" bind:value={product.quantity}>
  <input type="number" placeholder="Price of Products" bind:value={product.price}>
	
	<div>
		<button>Add Product</button>
	</div>
</form>

<style>
	form{
		display: flex;
		flex-direction: column;
		gap: 2rem;
		align-items: center;
	}
</style>

Le bloc de code ci-dessus rend un formulaire qui recueille les détails d’un produit. Le formulaire contient trois éléments de saisie de type texte(nom) et nombre(quantité et prix).

Les champs de saisie contiennent le nom du produit, le nombre de produits disponibles et le prix du produit.

Avec l’attribut bind:value dans les éléments d’entrée, le bloc de code lie les valeurs des entrées aux propriétés de l’objet produit spécifié. La section style contient des styles CSS adaptés à ce composant Svelte.

Ensuite, ajoutez le bloc de code ci-dessous à votre composant Home : 

<!-- Home.svelte -->
<script>
    import {Link} from "svelte-routing";
</script>

<main>
    <p>A way to manage and keep track of products in your inventory</p>
    <Link to="/add-products" class="link">Add Products here →</Link>
</main>

<style>
    main{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
</style>

Le composant Home importe le composant Link de la bibliothèque svelte-routing. Le composant Link dirige les utilisateurs vers la route “/add-products”. Vous devrez définir cette route pour vous assurer que le composant Link fonctionne réellement.

Pour définir vos itinéraires, ouvrez le composant App et ajoutez-y le bloc de code ci-dessous :

<!-- App.svelte -->
<script>
  import {Route, Router} from "svelte-routing";
  import AddProduct from './AddProduct.svelte';
  import Home from './Home.svelte';

  export let url = "";
</script>

<Router {url}>
  <h1>Inventory Tracker</h1>
  
  <div class="container">
    <Route path="/" component={Home} />
    <Route path="/add-products" component={AddProduct} /> 
  </div>
</Router>

<style>
  h1{
    text-align: center;
    font-family: "Poppins", sans-serif;
    margin-block-start: 1rem;
    margin-block-end: 6rem;
  }
</style>

Le bloc de code ci-dessus importe les composants Route et Router de svelte-routing ainsi que les composants Home et AddProduct pour définir leurs itinéraires individuels.

Le composant Route permet de définir les différentes routes de l’application. Dans le cas présent, il s’agit des routes Home et AddProduct.

Le fait d’envelopper la section HTML dans le composant Router initialise le routage pour les composants inclus.

Dans le bloc de code ci-dessus, le rendu de l’application affichera d’abord l’itinéraire Home puisque le chemin de l’itinéraire est “/”.

L’étape suivante consiste à définir les styles globaux de l’application. Pour ce faire, créez un dossier styles dans le répertoire src. Dans le dossier styles, ajoutez un fichier global.css; dans ce fichier, définissez les styles globaux de l’application.

Ajoutez le bloc de code ci-dessous au fichier global.css:

/* global.css */
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');
@import url('<https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Montserrat", sans-serif;
    background-color: #1F2124;
    color: #FFFFFF;
}

.container{
    inline-size: 60%;
    margin: auto;
}

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

.link:hover{
    color: #99BCF6;
}

input{
    padding: 1rem;
    border-radius: 12px;
    outline: none;
    border: none;
    font-family: "Montserrat", sans-serif;
    color: #333333;
    inline-size: 100%;
}

button{
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-weight: 500;
    background-color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
}

button:hover{
    background-color: #99BCF6;
}

Après avoir défini les styles, importez le fichier global.css dans le composant App pour appliquer les styles définis à l’application. Vous pouvez le faire en ajoutant ce code à la section script du composant App : 

//App.svelte
import './styles/global.css';

Vous avez maintenant construit votre application Svelte. Ensuite, vous allez construire le backend de votre application en utilisant Back4app.

Mise en place d’une application Back4app

Dans cette section, vous allez créer une application Back4app qui servira de Backend à votre application en utilisant l’agent Back4app AI.

Vous avez besoin d’un compte Back4app pour en créer un. Si vous n’en avez pas, vous pouvez en créer un gratuitement.

Connectez-vous à votre compte et cliquez sur le lien “AI Agent” dans la barre de navigation du tableau de bord de votre compte Back4app.

Page d'applications Back4app

Une fois que vous avez accès à l’agent AI, saisissez une invite demandant à l’agent AI de créer une application.

L’invite doit être similaire à celle ci-dessous :

Create a new application named inventory-tracker

Comme le montre l’invite ci-dessus, vous devez spécifier le nom de l’application. Dès que l’agent AI aura fini de créer l’application, il enverra une réponse confirmant sa création.

La réponse doit également contenir les informations d’identification de l’application, comme dans l’image ci-dessous.

Réponse de l'agent AI

Parmi les différentes informations d’identification fournies par l’agent AI, veillez à copier l’identifiant de l’application et la clé JavaScript. Vous en aurez besoin pour connecter votre application Svelte à l’application Back4app.

Ensuite, créez une classe d’inventaire dans l’application Back4app. Dans cette classe, ajoutez les colonnes nom, quantité et prix. Pour ce faire, à l’aide de l’agent AI, écrivez cette invite :

In the inventory-tracker app, create an inventory class and add a name, price, and quantity column to the class.

Vous devriez obtenir une réponse similaire à l’image ci-dessous.

Réponse de l'agent AI

Maintenant que votre Svelte UI Back4app backend est prêt, vous allez connecter l’UI au backend.

Connecter votre application Svelte à Back4app

Dans cette section, vous allez connecter votre application Svelte à l’application Back4app. Pour ce faire, vous avez besoin du SDK Parse.

Le SDK Parse est un ensemble d’outils de développement qui offre des services backend que vous pouvez utiliser dans vos applications web.

Installez le SDK Parse en exécutant la commande ci-dessous :

npm install parse

Après avoir installé le SDK, dans la balise script du fichier App.svelte, ajoutez le code dans le bloc de code ci-dessous.

import Parse from 'parse/dist/parse.min.js';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com/>';

Remplacez 'YOUR_APPLICATION_ID' et 'YOUR_CLIENT_KEY' par les informations d’identification que vous avez copiées précédemment. Veillez à les stocker de manière sécurisée à l’aide de variables d’environnement.

Ajouter des données à Back4app

Pour ajouter des données à Back4app, vous utiliserez les valeurs d’entrée dans le formulaire du composant AddProduct. Vous prendrez les valeurs soumises par l’utilisateur et les ajouterez à la base de données de votre Back4app.

Dans la section script du composant AddProduct, créez une fonction addData. Cette fonction contiendra la logique qui ajoute les détails du produit à Back4app.

Comme cela :

// AddProduct.svelte
import Parse from 'parse/dist/parse.min.js';
import { navigate } from "svelte-routing";

let addData = (event) => {
  event.preventDefault();
  try {
    const Inventory = new Parse.Object("Inventory");
    Inventory.set("name", product.name);
    Inventory.set("quantity", +product.quantity);
    Inventory.set("price", +product.price);
    Inventory.save().then(() => {
      console.log("New Product added successfully");
      navigate("/", { replace: true });
    });
  } catch (error) {
    console.log(error);
  }
};

Dans le bloc de code ci-dessus, la fonction addData crée un nouvel objet Parse Inventory pour la classe Inventory.

Il définit les valeurs des champs nom, quantité et prix en fonction des valeurs correspondantes des propriétés du produit avant d’enregistrer l’objet dans la base de données.

Notez que les propriétés product.quantity et product.price sont précédées d’un opérateur unaire plus (+).

L’opérateur convertit les propriétés en nombre. Liez la fonction addData au formulaire du composant AddProduct avec le gestionnaire d’événement submit.

Cela déclenchera la fonction addData chaque fois que l’utilisateur soumettra le formulaire.

Pour lier la fonction au formulaire avec le gestionnaire d’événement submit, remplacez le formulaire du composant AddProduct par le formulaire ci-dessous :

<!--AddProduct.svelte-->
<form on:submit={addData}>
	<input type="text" placeholder="Name of Product" bind:value={product.name}>
	<input type="number" placeholder="No of Products" bind:value={product.quantity}>
	<input type="number" placeholder="Price of Products" bind:value={product.price}>
	
	<div>
	    <button>Add Product</button>
	</div>
</form>

Récupérer les données de Back4app

Pour récupérer les données de Back4app, vous aurez accès à l’objet Parse sauvegardé dans votre application Back4app dans la section précédente et vous récupérerez les valeurs de l’objet.

Avant de récupérer les données, créez un composant Card dans le répertoire src de l’application. Ce composant détermine l’aspect et la convivialité des données extraites de Back4app.

Dans le fichier du composant, écrivez ce code :

<!-- Card.svelte -->
<script>
	export let name = '';
	export let quantity = 0;
	export let price = 0;
</script>

<div class="card">
	<h3>{name}</h3>
	<div class="details">
	  <p>Price: ${price}</p>
	  <p>Quantity: {quantity == 0 ? "out of stock" : quantity}</p>
	</div>
	<div>
	  <button>Delete</button>
	</div>
</div>

<style>
	.card{
	    display: flex;
	    flex-direction: column;
	    gap: 1.9rem;
	    padding: 1rem;
	    border-radius: 12px;
	    background-color: #e2e2e2;
	    color: #1F2124;;
	    inline-size: 100%;
	}
	
	.details{
	    display: flex;
	    gap: 3rem;
	}
	
	.details p{
	    font-size: 14px;
	    font-weight: 500;
	    color: #888888;
	}
</style>

Le composant Carte affiche le nom, la quantité et le prix du produit. Il obtient ces valeurs de son composant parent à l’aide des trois éléments du bloc de code ci-dessus : nom, quantité et prix.

Maintenant, dans la balise script de votre composant Home, ajoutez le code dans le bloc de code ci-dessous :

//Home.svelte
import { onMount } from "svelte";
import Parse from "parse/dist/parse.min.js";

let products = [];

const fetchProducts = async () => {
  try {
    const query = new Parse.Query("Inventory");
    const productsData = await query.find();
    products = productsData;
  } catch (error) {
    console.log(error);
  }
};

onMount(fetchProducts);

Ce code importe la fonction de cycle de vie onMount du cadre Svelte. Il crée également un tableau de produits qui est vide au départ.

Dans le bloc de code, vous pouvez trouver la fonction fetchProducts, qui contient la logique responsable de la récupération des données nécessaires de Back4app.

La fonction fetchProducts recherche un objet “Inventaire” dans la base de données de votre application à l’aide de la méthode Parse.Query.

Il renvoie ensuite un tableau des résultats de la requête en appelant la méthode find() sur la requête. Enfin, il affecte le tableau des résultats à la variable product.

En faisant de la fonction fetchProducts un argument de la fonction onMount, vous vous assurez que l’application récupère vos données à chaque fois que vous effectuez le rendu du composant Home.

Dans la section HTML du composant, affichez les données dans le tableau des produits.

Comme cela :

<!-- Home.svelte-->
<div class="products">
	{#each products as product}
		<Card name={product.get('name')} quantity={product.get('quantity')} price={product.get('price')}/>
	{/each}
</div>

Le bloc each itère sur le tableau des produits et affiche le composant Card pour chaque produit du tableau.

Le composant Card obtient les valeurs du nom, de la quantité et du prix du produit à l’aide de la méthode get du produit. Il affecte ensuite ces valeurs à ses accessoires.

Donnez du style à la balise div qui entoure chaque bloc en ajoutant les styles définis ci-dessous à la balise style de votre composant Home. 

/* Home.svelte */
.products{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	border-top: 2px solid #e2e2e2;
	margin-block-start: 3rem;
	padding-block-start: 2rem;
}

Suppression des données de Back4app

Pour ajouter la fonctionnalité de suppression à votre application Svelte. Vous devrez modifier vos composants, en commençant par le composant Card. Dans le composant Card, créez une nouvelle propriété appelée handleClick.

Créez l’accessoire en ajoutant la ligne de code ci-dessous dans la section script du composant :

//Card.svelte
export let handleClick;

Maintenant, liez le prop à l’élément button dans la section HTML du composant avec le gestionnaire d’événement click.

Comme cela :

<!-- Card.svelte -->
<div>
	<button on:click={handleClick}>Delete</button>
</div>

Dans le composant Accueil, vous allez créer une fonction deleteProduct. Cette fonction contient la logique responsable de la suppression du produit sélectionné.

Ajoutez les lignes de code ci-dessous dans la section script du composant.

// Home.svelte
const deleteProduct = async (id) => {
  try {
    const Product = Parse.Object.extend("Inventory");
    const product = new Product();
    product.id = id;
    await product.destroy();
    const newData = products.filter((item) => item.id !== id);
    products = newData;
  } catch (error) {
    console.log(error);
  }
};

Dans le bloc de code ci-dessus, la fonction deleteProduct crée un nouvel objet “Product”, définit la propriété id de l’objet avec le paramètre id de la fonction, puis appelle la méthode de destruction asynchrone de l’objet pour supprimer le produit avec l’ID donné.

La fonction filtre le produit avec l’ID donné dans le tableau des produits et crée un nouveau tableau sans le produit supprimé. La fonction affecte ensuite le nouveau tableau aux produits.

Ensuite, vous transmettez la fonction à la propriété handleClick du composant Card. Désormais, chaque fois qu’un utilisateur cliquera sur le bouton du composant Card, la fonction deleteProduct sera déclenchée.

Comme cela :

<!-- Home.svelte -->
<Card 
	name={product.get('name')} 
	quantity={product.get('quantity')} 
	price={product.get('price')}
	handleClick={() => deleteProduct(product.id)}
/>

Tester votre application

Vous devrez tester votre application pour vous assurer qu’elle fonctionne correctement. Pour démarrer votre application, exécutez la commande ci-dessous.

npm run dev

Cette commande exécutera votre application sur le serveur de développement et vous fournira un lien pour que vous puissiez visualiser l’application sur votre navigateur web.

En cliquant sur le lien, vous devriez voir une application qui ressemble à l’image ci-dessous.

Page d'accueil de Inventory Tracker

Cliquez sur le lien “Ajouter des produits ici” et vous serez redirigé vers une nouvelle page qui ressemble à celle-ci :

Remplissez le formulaire et soumettez-le en cliquant sur le bouton“Ajouter un produit“.

Cela ajoutera les détails que vous avez fournis à la base de données de Back4app. Vous pouvez le vérifier en visitant le tableau de bord de l’application Back4app.

Si l’application ajoute les données avec succès, Back4app ajoutera une nouvelle ligne à la base de données.

Comme cela :

Tableau de bord Back4app

Après avoir envoyé le formulaire, l’application vous redirigera vers la page d’accueil, qui affichera le nouveau produit.

Page d'accueil de l'outil de suivi des stocks avec les articles

Pour supprimer un produit, il suffit de cliquer sur le bouton “Supprimer” de la fiche produit.

Dockeriser votre application Svelte

Vous devez dockeriser votre application Svelte avant de pouvoir la déployer sur Back4app. Pour dockeriser votre application Svelte, créez un fichier Dockerfile et des fichiers .dockerignore dans le répertoire racine de votre application.

Dans le fichier Docker, écrivez les lignes de code suivantes :

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

Certains répertoires que vous devez exclure lors de la construction de vos images Docker sont listés ci-dessous. Pour spécifier ces répertoires, ajoutez-les au fichier .dockerignore.

Par exemple :

# .dockerignore
node_modules

Le bloc de code ci-dessus indique à Docker d’exclure le répertoire node_modules du contexte pendant le processus de construction de l’image. Puisque vous avez créé votre application Svelte avec Vite, vous devez configurer Vite pour qu’il prenne en charge Docker.

Pour ce faire, accédez à votre fichier vite.config.js dans le répertoire racine de votre application. Remplacez le code du fichier par le bloc de code ci-dessous :

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [svelte()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

Le bloc de code ci-dessus spécifie le port sur lequel le serveur de développement écoute et garantit que l’application ne s’exécute pas sur un port autre que celui spécifié.

Pour construire votre image docker, exécutez la commande suivante dans votre terminal :

docker build -t inventory-tracker .

Déployer votre application Svelte

Maintenant que vous avez dockerisé votre application, l’étape suivante consiste à déployer une application Svelte. Pour déployer une application Svelte, vous utiliserez les conteneurs Back4app.

Avant de déployer votre application, vous devez la pousser vers un dépôt GitHub afin que Back4app puisse accéder à l’application en utilisant son dépôt. Pour donner à Back4app l’accès à votre dépôt GitHub, utilisez l’application Back4app Github.

Après avoir donné à Back4app l’accès au référentiel de l’application, vous pouvez maintenant déployer l’application sur Back4app avec l’agent AI en utilisant l’invite ci-dessous :

Deploy my repository <<repository-url>> on Back4app containers

L’invite ci-dessus lance le processus de déploiement. Veillez à remplacer le < > par l’URL du référentiel de votre application.

Une fois le déploiement réussi, l’agent AI vous enverra un message vous indiquant l’état du déploiement de l’application et fournissant des détails sur le déploiement.

Par exemple :

Page de suivi de l'inventaire déployé

L’image ci-dessus montre que l’application a été déployée avec succès et que vous pouvez accéder à l’application sur votre navigateur en visitant l’URL de l’application spécifiée.

Conclusion

Dans cet article, vous avez appris à construire une application Svelte simple en utilisant Back4pp. En utilisant l’agent d’intelligence artificielle Back4app, vous avez créé un backend pour votre application, avec lequel vous avez interagi en utilisant le SDK Parse.

L’agent IA a également rationalisé le processus de déploiement de votre application sur les conteneurs Back4app.

Back4app simplifie votre processus de développement en gérant vos besoins en backend et en déploiement. Cela vous permet de vous concentrer sur la création de produits que vos utilisateurs aimeront.

Le code utilisé dans ce tutoriel est disponible sur ce dépôt GitHub.


David Ekete

Le double savoir-faire de David Ekete en tant que rédacteur technique expérimenté et développeur backend accompli le positionne de manière unique comme une autorité de premier plan pour fournir une documentation technique claire et complète et pour créer des applications web résilientes et évolutives. Son parcours riche inclut des rôles de premier plan — ayant contribué à des leaders de l'industrie tels que back4app, Draft.dev et MUO — tout en excellant en tant qu’ingénieur backend et stagiaire en ingénierie dans des entreprises comme Elevate Apps et Terrahaptix. En complément de son expérience pratique, David détient des certifications reconnues dans l'industrie, obtenues auprès de The Linux Foundation, Sololearn et Udemy, ce qui souligne sa maîtrise de la documentation technique, du développement d'API et des langages de programmation modernes. Ses qualifications et son parcours éprouvé font de lui un atout indispensable pour les équipes exigeant l'excellence technique et des solutions innovantes aux problèmes. Découvrez ses projets de pointe et ses dépôts de code sur GitHub 🛠️, et connectez-vous avec lui sur LinkedIn 🔗 pour découvrir comment son expertise peut propulser vos initiatives technologiques. Que vous ayez besoin d'une documentation technique experte, d'un développement backend robuste ou d'un collaborateur innovant, David Ekete est prêt à avoir un impact significatif.

Leave a reply

Your email address will not be published.