Comment déployer une application SvelteKit ?

Dans cet article, vous allez construire une application basique de génération de devis en utilisant SvelteKit et l’héberger en utilisant Back4app Containers.

SvelteKit est un cadre d’application web moderne qui s’appuie sur les principes du cadre JavaScript Svelte. Il offre aux développeurs un moyen efficace et élégant de créer des applications web en mettant l’accent sur la simplicité et la performance.

En 2020, SvelteKit a été créé par Rich Harris, le créateur de Svelte, et en octobre 2022, Rich Harris et son équipe ont rejoint Vercel.

Lors du déploiement d’une application SvelteKit, il est utile d’utiliser les conteneurs Back4app. Back4app Containers est une plateforme qui permet aux développeurs de déployer et de gérer des applications conteneurisées sur l’infrastructure de Back4app.

Il s’agit d’un service basé sur le cloud qui offre un moyen simple et évolutif d’exécuter des applications conteneurisées en production.

Qu’est-ce que SvelteKit ?

SvelteKit est un framework web pour construire des applications web performantes et robustes. Il est construit sur Svelte, un framework JavaScript léger et réactif.

SvelteKit offre un certain nombre de fonctionnalités qui facilitent le développement et le déploiement d’applications web, notamment le rendu côté serveur (SSR), la génération de sites statiques (SSG), le routage côté client, etc.

Il offre également de nombreux avantages, tels que la simplicité, la flexibilité, l’évolutivité, la performance, etc. Continuez à lire pour savoir comment déployer une application SvelteKit.

Avantages de SvelteKit

Voici quelques-uns des avantages de l’utilisation du cadre SvelteKit :

Courbe d’apprentissage facile

Lors du choix d’un framework front-end pour le développement web, l’un des facteurs essentiels à prendre en compte est la courbe d’apprentissage associée à ce framework.

Une courbe d’apprentissage abrupte peut vous décourager d’adopter un cadre, tandis qu’une courbe douce peut le rendre plus accessible et plus attrayant.

SvelteKit a une courbe d’apprentissage douce, surtout si vous êtes familier avec HTML, CSS et JavaScript. Sa syntaxe est simple et intuitive, ce qui facilite la compréhension et la création d’applications web.

Support TypeScript

TypeScript est un surensemble de JavaScript à typage statique qui a gagné en popularité dans le monde du développement web. Il apporte un typage fort, une clarté du code et un meilleur outillage aux projets JavaScript.

SvelteKit dispose d’un excellent support TypeScript, ce qui vous permet d’écrire du code sécurisé et de détecter les erreurs potentielles au cours du développement. Cela améliore la qualité du code, la maintenabilité et la collaboration au sein des équipes de développement.

Routage à partir de fichiers

Le routage basé sur les fichiers est une fonctionnalité moderne de développement web qui facilite l’organisation et la gestion des itinéraires dans votre application. Il utilise la gestion des fichiers pour déterminer les itinéraires au lieu d’utiliser une bibliothèque tierce.

SvelteKit utilise un système de routage basé sur les fichiers. Vous organisez les routes de votre application en créant des fichiers et des dossiers, ce qui facilite la gestion de la structure de votre projet.

Communauté et écosystème

Dans le domaine du développement web, le fait de disposer d’une communauté forte et solidaire, ainsi que d’un écosystème florissant, constitue un avantage considérable.

SvelteKit bénéficie de l’écosystème Svelte plus large, qui comprend une communauté croissante, une riche collection de composants et de bibliothèques réutilisables, ainsi qu’une documentation complète.

Limites de SvelteKit

Bien que SvelteKit soit un cadre puissant pour la création d’applications web efficaces, il présente certaines limites qu’il convient de garder à l’esprit. Ces limites sont les suivantes :

Limites du rendu côté serveur (SSR)

Le rendu côté serveur (SSR) est une technique qui permet aux applications web de rendre le contenu sur le serveur et d’envoyer du HTML pré-rendu au client. Le rendu côté serveur présente plusieurs avantages, notamment un meilleur référencement, un chargement initial des pages plus rapide et de meilleures performances sur les appareils bas de gamme.

SvelteKit prend en charge le rendu côté serveur. Cependant, il ne dispose pas de certaines fonctionnalités SSR avancées qui sont disponibles dans d’autres frameworks, comme le contrôle fin du rendu côté serveur ou la prise en charge du streaming SSR.

Outillage limité

En tant que cadre relativement nouveau, l’outillage de SvelteKit est encore en cours d’évolution et il se peut qu’il n’ait pas le même niveau de maturité et le même ensemble de fonctionnalités que d’autres cadres.

Cela signifie qu’il peut y avoir une certaine variabilité dans la configuration de développement et les choix d’outils entre les différents projets SvelteKit. Il peut en résulter moins d’options pour des tâches telles que le linting de code, les tests ou l’optimisation de la compilation.

Écosystème limité

Un écosystème limité est l’une des limites de SvelteKit, et cela peut avoir un impact sur l’expérience de développement et les choix qui s’offrent à vous. Comparé à des frameworks plus établis, SvelteKit dispose d’un écosystème plus restreint de bibliothèques, d’outils et de plugins.

Cela signifie que vous devrez peut-être créer certaines fonctionnalités à partir de zéro ou vous appuyer sur des solutions soutenues par la communauté. Il est important de tenir compte de l’état actuel de l’écosystème SvelteKit lorsque vous décidez de l’utiliser pour un projet.

Taille de la communauté

La taille de la communauté peut avoir un impact significatif sur l’expérience de développement et le soutien disponible pour un cadre particulier.

Bien que la communauté SvelteKit se développe rapidement, elle est encore plus petite que les communautés autour d’autres frameworks majeurs tels que React et Vue.js.

Cela peut signifier moins de ressources facilement accessibles, une adoption plus lente des nouvelles fonctionnalités, moins de ressources d’apprentissage et des temps de réponse potentiellement plus longs pour l’assistance à la communauté.

Options de déploiement de SvelteKit

Vous pouvez déployer les applications SvelteKit sur différentes plateformes, y compris Infrastructure as a Service (IaaS) et Container as a Service (CaaS).

Infrastructure en tant que service (IaaS)

Les plateformes d’infrastructure en tant que service (IaaS) sont des services d’informatique en nuage qui fournissent des ressources informatiques virtualisées sur l’internet. Ces ressources comprennent les machines virtuelles, le stockage, le réseau et d’autres composants fondamentaux.

Les plateformes IaaS offrent un moyen souple et évolutif d’accéder à votre infrastructure informatique et de la gérer sans avoir à investir dans du matériel physique et à en assurer la maintenance.

Ils proposent également des services gérés, de sauvegarde et de reprise après sinistre, de sécurité et de conformité, et de rentabilité selon un modèle de tarification à l’usage.

Voici quelques exemples de plateformes IaaS que vous pouvez utiliser pour déployer les applications SvelteKit :

• Amazon Web Services (AWS)
• Microsoft Azure
• Google Cloud Platform (GCP)

Conteneur en tant que service (CaaS)

Les plateformes de conteneurs en tant que service (CaaS), également connues sous le nom de plateformes de gestion de conteneurs ou de plateformes d’orchestration de conteneurs, sont des services basés sur le cloud qui simplifient le déploiement, la mise à l’échelle, la gestion et l’orchestration des applications conteneurisées.

Ces plateformes sont conçues pour rationaliser le processus de conteneurisation et fournir une solution complète pour la gestion des conteneurs, ce qui vous permet de vous concentrer sur le développement de vos applications sans vous soucier de la complexité de la gestion de l’infrastructure.

Vous pouvez déployer vos applications SvelteKit en utilisant des plateformes CaaS. Certaines de ces plateformes comprennent :

• Docker
• Kubernetes
• Back4App

Notez qu’il s’agit d’autres options de déploiement disponibles pour les applications SvelteKit. La meilleure plateforme pour votre application dépendra de vos besoins spécifiques, notamment en termes de performances, d’évolutivité et de coûts.

Processus de déploiement

En utilisant la plateforme CaaS de Back4app, le déploiement d’une application SvelteKit est un processus simple et rationalisé qui offre de nombreux avantages : le CaaS de Back4app gère l’infrastructure sous-jacente, ce qui vous permet de vous concentrer sur la création de vos applications.

Que sont les conteneurs Back4app ?

Back4App Containers, AKA “Back4App CaaS” (Containers as a Service), est une fonctionnalité fournie par Back4App qui permet aux développeurs de déployer et de gérer des conteneurs Docker dans l’environnement cloud fourni par Back4App.

Il s’agit d’une solution gérée d’hébergement de conteneurs qui simplifie le déploiement et la gestion des conteneurs Docker dans le nuage.

Les conteneurs Back4app offrent l’extensibilité, la flexibilité et l’intégration avec d’autres services Back4App, ce qui les rend appropriés pour une large gamme d’applications et de services.

C’est un excellent choix pour ceux qui veulent tirer parti de la conteneurisation pour leurs projets tout en minimisant la complexité de la gestion de l’infrastructure.

Introduction du projet

Dans ce tutoriel, vous construirez une application simple de génération de citations avec SvelteKit, en utilisant une API de citations pour récupérer des citations aléatoires à afficher.

Pour créer une application SvelteKit, exécutez la commande suivante dans votre terminal :

npm create svelte@latest quote-generator

Une fois la commande exécutée, configurez votre projet SvelteKit en utilisant les invites affichées dans le terminal.

Par exemple :

Comme le montre l’image ci-dessus, le projet de générateur de citations utilisera la syntaxe TypeScript, ESLint pour l’analyse du code et Prettier pour le formatage du code.

Maintenant, dans votre terminal, basculez votre répertoire courant dans le répertoire du projet et installez les dépendances nécessaires. Pour ce faire, exécutez les commandes suivantes dans votre terminal :

cd quote-generator
npm install

Après avoir installé les dépendances nécessaires, ouvrez le projet dans votre IDE préféré et commencez à construire l’application.

Construire votre application

Lorsque vous créez votre application, la première chose à faire est de définir les styles globaux et la mise en page de l’application. Pour définir les styles globaux de votre application, créez un dossier styles dans le répertoire src et ajoutez-y un fichier global.css.

Dans le fichier global.css, écrivez les lignes de code suivantes :

/*global.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>');

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

body{
    inline-size: 100%;
    block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #36454F;
    font-size: 15px;
    color: #FFFFF0;
    font-family: 'Montserrat', sans-serif;
}

button{
    background-color: #333333;
    color: #e2e2e2;
    border-radius: 12px;
    padding: 0.7rem 2rem;
    border: none;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color:  #28282B;
    color: #333333;
}

Le bloc de code ci-dessus définit quelques styles de base pour votre application. Il importe la police Montserrat de Google Fonts.

Il applique également les styles par défaut pour tous les éléments, centre le contenu sur le corps de l’écran et stylise l’élément bouton dans son état par défaut et au survol.

Une fois que vous avez défini les styles globaux de votre application, vous devez appliquer les styles à l’application.

Pour ce faire, vous avez besoin de la route de la mise en page. SvelteKit fournit un fichier +layout.svelte pour vous aider à définir les layouts dans votre application. Vous pouvez définir la disposition de votre application en ajoutant le fichier +layout.svelte au répertoire src/routes.

Dans le fichier +layout.svelte, importez votre fichier global.css pour appliquer vos styles globaux à l’application.

Comme cela :

<!--+layout.svelte-->
<script lang="ts">
    import '../styles/global.css'
</script>
  
<slot></slot>

L’élément slot crée un espace dans lequel l’application peut insérer le contenu de la page. Lorsque vous rendez une page, l’application remplit l’élément slot avec le contenu de la page, le rendant ainsi visible dans la mise en page.

Dans le répertoire src/lib de votre projet, créez un fichier Card.svelte. Il s’agit du composant Card que vous utiliserez pour rendre les données extraites de l’API de cotation.

Le composant Carte devrait ressembler à ceci :

<!-- Card.svelte -->
<script lang="ts">
    export let author: string = ""; 
    export let content: string = "";
</script>

<main>
    <h4>{author}</h4>
    <p>{content}</p>
</main>

<style>
    main{
        inline-size: 80%;
        padding: 3rem;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: #f2f2f2;
        color: #36454F;
    }
</style>

Dans la balise script du composant Card, deux accessoires sont définis : l’accessoire auteur et l’accessoire contenu. Ils sont tous deux de type chaîne de caractères et ont pour valeur initiale des chaînes vides.

L’élément main définit le modèle du composant. Le modèle comprend un élément h4 qui affiche la valeur de la propriété author et un élément p qui affiche la valeur de la propriété content. Enfin, la balise style contient des propriétés et des valeurs CSS qui permettent de styliser le composant.

Maintenant, importez et rendez le composant Card dans le fichier +page.svelte. Il s’agit de la route d’accueil qui s’affiche lorsque vous effectuez le rendu de votre application.

Dans le fichier +page.svelte, vous récupérerez les données de l’API de devis et les transmettrez au composant Card à l’aide de ses accessoires.

Comme cela :

<!-- +page.svelte -->
<script lang="ts">
    import Card from "$lib/Card.svelte";
    import Icon from '@iconify/svelte';
    import { onMount } from "svelte";

    let quote: any = {};

    const fetchQuote = async () => {
        const response = await fetch('<https://api.quotable.io/random>');
        const data = await response.json();
        quote = data;
    }

    onMount( fetchQuote );
</script>

<main>
   <h1>Quote Generator</h1>
    <Card author={quote.author} content={quote.content}/>
   <div>
        <button on:click={fetchQuote}>
            <Icon icon="subway:random" color="#FFF" />
        </button>
    </div>
</main>

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

    h1{
        margin-block-end: 0.8rem;
    }
</style>

Le bloc de code ci-dessus récupère les données de l’API “quote” à l’aide de la fonction "fetchQuote", puis affecte les données récupérées à la variable ” quote".

Le fait de passer la fonction fetchQuote au crochet onMount garantit qu’elle s’exécute lorsque le composant est monté (c’est-à-dire lors du rendu initial du composant).

Le composant Card accepte les valeurs des propriétés author et content de l’objet quote et les affiche. Un clic sur le bouton déclenche la fonction fetchQuote pour récupérer une autre citation aléatoire à afficher.

Le bloc de code ci-dessus utilise un composant Icon du paquetage @iconify/svelte. Pour utiliser ce composant, vous devez d’abord installer le paquetage @iconify/svelte en exécutant la commande suivante dans le répertoire de votre projet sur votre terminal :

npm install --save-dev @iconify/svelte

Après avoir installé le paquetage @iconify/svelte, exécutez votre application sur le serveur de développement pour voir l’application. Vous pouvez le faire en exécutant la commande suivante dans votre terminal :

npm run dev

L’exécution de la commande ci-dessus démarre le serveur de développement sur http://localhost:5173/. Ouvrez le lien dans votre navigateur web pour voir votre application.

L’application devrait ressembler à ceci :

Dockeriser votre application

Avant de pouvoir déployer votre application sur la plateforme Back4app CaaS, vous devez d’abord la dockeriser. Pour dockeriser une application SvelteKit, vous devez d’abord installer l’adaptateur de nœud de Svelte.

Vous pouvez installer l’adaptateur de nœud en exécutant la commande suivante dans votre terminal :

npm i -D @sveltejs/adapter-node

Cette commande installe le paquetage @sveltejs/adapter-node comme dépendance de développement dans votre projet SvelteKit. Vous utilisez cet adaptateur lorsque vous souhaitez déployer votre application SvelteKit dans un environnement Node.js.

Une fois l’installation du paquet terminée, remplacez la première ligne de code de votre fichier svelte.config.js par le code ci-dessous :

import adapter from '@sveltejs/adapter-node';

L’étape suivante consiste à créer un fichier .dockerignore dans le répertoire racine de votre projet. Dans le fichier .dockerignore, indiquez les fichiers et les répertoires qui doivent être exclus lors de la construction de l’image Docker.

Comme cela :

node_modules
.svelte-kit
build
public

Après avoir spécifié les fichiers et les répertoires à exclure. Créez un fichier Docker nommé Dockerfile dans le répertoire racine du projet.

Dans le fichier Docker, ajoutez ces lignes de code :

FROM node:18-alpine as build
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS production
COPY --from=build /app/build .
COPY --from=build /app/package.json .
COPY --from=build /app/package-lock.json .
RUN npm ci --omit dev
EXPOSE 3000
CMD ["node", "."]

Ce fichier Docker provoque une construction en plusieurs étapes, où la première étape construit l’application et la deuxième étape crée une image de production plus petite avec seulement les dépendances nécessaires.

Maintenant, vous pouvez construire l’image docker de votre application en exécutant la commande suivante dans votre terminal :

docker build -t quote-generator .

Déployer votre application

Une fois que vous avez dockerisé votre application et que vous l’avez poussée sur un dépôt GitHub, vous pouvez la déployer sur Back4app. Pour ce faire, créez un compte Back4app si vous n’en avez pas déjà un.

Pour créer un compte Back4app, suivez les étapes suivantes :

1. Visitez le site web de Back4app.
2. Cliquez sur le bouton “S’inscrire”.
3. Remplissez le formulaire d’inscription et envoyez-le.

Après avoir créé votre compte Back4app, connectez-vous à votre compte sur le site web de Back4app et créez une nouvelle application. Vous pouvez le faire en cliquant sur le bouton “New App” dans le coin supérieur droit de l’écran.

Sélectionnez l’option Container as a Service. Après avoir sélectionné cette option, le site web vous redirigera vers une autre page où vous pourrez lier votre compte GitHub à Back4app.

Une fois que vous avez lié votre compte GitHub à Back4app, sélectionnez le dépôt de votre application pour le déploiement.

Donnez un nom à votre application et configurez son déploiement initial avant de la déployer définitivement.

Une fois l’application déployée avec succès, Back4app vous fournira un lien pour accéder à l’application sur votre navigateur web.

Conclusion

En conclusion, le déploiement d’une application SvelteKit à l’aide de la plateforme CaaS de Back4pp simplifie le développement. Le processus est simple.

Il s’agit de créer votre application, de la dockeriser, de la pousser vers un dépôt GitHub et enfin de la déployer.

Lorsque vous envisagez de déployer vos applications SvelteKit, la plateforme Back4app CaaS. offre une solution évolutive et rentable.

Si vous avez aimé cet article, vous aimerez peut-être aussi lire l’article Comment créer une application SvelteKit en utilisant ChatGPT.

FAQ