Wie setzt man eine SvelteKit-Anwendung ein?

In diesem Artikel werden Sie eine einfache Anwendung zur Erstellung von Angeboten mit SvelteKit erstellen und diese mit Back4app Containern hosten.

SvelteKit ist ein modernes Webanwendungs-Framework, das auf den Prinzipien des Svelte JavaScript-Frameworks aufbaut. Es bietet Entwicklern eine effiziente und elegante Möglichkeit, Webanwendungen zu erstellen, wobei der Schwerpunkt auf Einfachheit und Leistung liegt.

Im Jahr 2020 wurde SvelteKit von Rich Harris, dem Erfinder von Svelte, entwickelt, und im Oktober 2022 traten Rich Harris und sein Team Vercel bei.

Bei der Bereitstellung einer SvelteKit-Anwendung ist es hilfreich, die Back4app-Container zu verwenden. Back4app Containers ist eine Plattform, die es Entwicklern ermöglicht, containerisierte Anwendungen auf der Back4app-Infrastruktur einzusetzen und zu verwalten.

Es handelt sich um einen Cloud-basierten Dienst, der eine einfache und skalierbare Möglichkeit bietet, containerisierte Anwendungen in der Produktion auszuführen.

Was ist SvelteKit?

SvelteKit ist ein Web-Framework für die Erstellung performanter und robuster Webanwendungen. Es baut auf Svelte auf, einem leichtgewichtigen und reaktiven JavaScript-Framework.

SvelteKit bietet eine Reihe von Funktionen, die die Entwicklung und den Einsatz von Webanwendungen erleichtern, darunter Server-seitiges Rendering (SSR), statische Seitengenerierung (SSG), Client-seitiges Routing usw.

Es bietet auch viele Vorteile, wie Einfachheit, Flexibilität, Skalierbarkeit, Leistung, etc. Lesen Sie weiter, um zu erfahren, wie Sie eine SvelteKit-App bereitstellen.

Vorteile von SvelteKit

Hier sind einige der Vorteile der Verwendung des SvelteKit-Frameworks:

Einfache Lernkurve

Bei der Wahl eines Front-End-Frameworks für die Webentwicklung ist einer der entscheidenden Faktoren die mit diesem Framework verbundene Lernkurve.

Eine steile Lernkurve kann Sie davon abhalten, ein Framework zu übernehmen, während eine sanfte Lernkurve es zugänglicher und attraktiver machen kann.

SvelteKit ist leicht zu erlernen, besonders wenn Sie mit HTML, CSS und JavaScript vertraut sind. Die Syntax ist einfach und intuitiv, so dass es leicht zu verstehen und Webanwendungen zu erstellen ist.

TypeScript-Unterstützung

TypeScript ist eine statisch typisierte Obermenge von JavaScript, die in der Welt der Webentwicklung an Popularität gewonnen hat. Es bringt starke Typisierung, Code-Klarheit und besseres Tooling für JavaScript-Projekte.

SvelteKit verfügt über eine hervorragende TypeScript-Unterstützung, die es Ihnen ermöglicht, typsicheren Code zu schreiben und mögliche Fehler während der Entwicklung zu erkennen. Dies verbessert die Codequalität, die Wartbarkeit und die Zusammenarbeit in Entwicklungsteams.

Dateibasiertes Routing

Dateibasiertes Routing ist eine moderne Webentwicklungsfunktion, die die Organisation und Verwaltung von Routen in Ihrer Anwendung erleichtert. Dabei wird die Dateiverwaltung zur Bestimmung der Routen genutzt, anstatt eine Bibliothek eines Drittanbieters zu verwenden.

SvelteKit verwendet ein dateibasiertes Routing-System. Sie organisieren die Routen Ihrer Anwendung durch das Erstellen von Dateien und Ordnern, was die Verwaltung der Projektstruktur vereinfacht.

Gemeinschaft und Ökosystem

Im Bereich der Webentwicklung ist eine starke und unterstützende Gemeinschaft zusammen mit einem florierenden Ökosystem ein großer Vorteil.

SvelteKit profitiert vom breiteren Svelte-Ökosystem, das eine wachsende Gemeinschaft, eine reichhaltige Sammlung von wiederverwendbaren Komponenten und Bibliotheken sowie eine umfangreiche Dokumentation umfasst.

Beschränkungen von SvelteKit

SvelteKit ist zwar ein leistungsfähiges Framework für die Erstellung effizienter Webanwendungen, hat jedoch einige Einschränkungen, die Sie beachten sollten. Zu diesen Einschränkungen gehören:

Einschränkungen beim serverseitigen Rendering (SSR)

Serverseitiges Rendering (SSR) ist eine Technik, die es Webanwendungen ermöglicht, Inhalte auf dem Server zu rendern und vorgerendertes HTML an den Client zu senden. SSR hat mehrere Vorteile, darunter verbesserte Suchmaschinenoptimierung, schnelleres Laden der ersten Seite und bessere Leistung auf Low-End-Geräten.

SvelteKit unterstützt Server-seitiges Rendering. Es fehlen jedoch einige fortgeschrittene SSR-Funktionen, die in anderen Frameworks verfügbar sind, wie z. B. die feinkörnige Kontrolle über das serverseitige Rendering oder die Unterstützung für Streaming SSR.

Begrenzte Werkzeugausstattung

Da es sich bei SvelteKit um ein relativ neues Framework handelt, befindet sich das Tooling noch in der Entwicklung, und es hat möglicherweise nicht den gleichen Reifegrad und Funktionsumfang wie andere Frameworks.

Das bedeutet, dass es eine gewisse Variabilität in der Entwicklungseinrichtung und der Auswahl der Werkzeuge zwischen verschiedenen SvelteKit-Projekten geben kann. Dies kann zu weniger Optionen für Aufgaben wie Code-Linting, Testen oder Build-Optimierung führen.

Begrenztes Ökosystem

Eine der Einschränkungen von SvelteKit ist das begrenzte Ökosystem, das sich auf die Entwicklungserfahrung und die Auswahlmöglichkeiten auswirken kann, die Ihnen zur Verfügung stehen. Im Vergleich zu etablierteren Frameworks hat SvelteKit ein kleineres Ökosystem an Bibliotheken, Tools und Plugins.

Das bedeutet, dass Sie möglicherweise bestimmte Funktionen von Grund auf neu entwickeln oder sich auf von der Community unterstützte Lösungen verlassen müssen. Es ist wichtig, den aktuellen Stand des SvelteKit-Ökosystems zu berücksichtigen, wenn Sie entscheiden, ob Sie es für ein Projekt verwenden möchten.

Größe der Gemeinschaft

Die Größe der Gemeinschaft kann sich erheblich auf die Entwicklungserfahrung und die für einen bestimmten Rahmen verfügbare Unterstützung auswirken.

Obwohl die SvelteKit-Gemeinschaft schnell wächst, ist sie immer noch kleiner als die Gemeinschaften um andere große Frameworks wie React und Vue.js.

Dies kann bedeuten, dass weniger Ressourcen zur Verfügung stehen, dass neue Funktionen langsamer angenommen werden, dass es weniger Lernressourcen gibt und dass die Reaktionszeiten für den Community-Support möglicherweise länger sind.

SvelteKit Bereitstellungsoptionen

Sie können SvelteKit-Anwendungen auf verschiedenen Plattformen einsetzen, einschließlich Infrastructure as a Service (IaaS) und Container as a Service (CaaS).

Infrastruktur als Dienstleistung (IaaS)

Infrastructure-as-a-Service-Plattformen (IaaS) sind Cloud-Computing-Dienste, die virtualisierte Computerressourcen über das Internet bereitstellen. Zu diesen Ressourcen gehören virtuelle Maschinen, Speicher, Netzwerke und andere grundlegende Komponenten.

IaaS-Plattformen bieten eine flexible und skalierbare Möglichkeit, auf Ihre IT-Infrastruktur zuzugreifen und sie zu verwalten, ohne in physische Hardware zu investieren und diese zu warten.

Sie bieten auch verwaltete Dienste, Backup und Disaster Recovery, Sicherheit und Compliance sowie Kosteneffizienz nach einem Pay-as-you-go-Preismodell.

Einige Beispiele für IaaS-Plattformen, die Sie für den Einsatz von SvelteKit-Anwendungen verwenden können, sind:

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

Container als Dienstleistung (CaaS)

Container-as-a-Service-Plattformen (CaaS), auch bekannt als Container-Management-Plattformen oder Container-Orchestrierungsplattformen, sind Cloud-basierte Dienste, die die Bereitstellung, Skalierung, Verwaltung und Orchestrierung von containerisierten Anwendungen vereinfachen.

Diese Plattformen wurden entwickelt, um den Containerisierungsprozess zu rationalisieren und eine umfassende Lösung für das Container-Management zu bieten, so dass Sie sich auf die Entwicklung Ihrer Anwendungen konzentrieren können, ohne sich mit der komplexen Verwaltung der Infrastruktur beschäftigen zu müssen.

Sie können Ihre SvelteKit-Anwendungen über CaaS-Plattformen bereitstellen. Einige dieser Plattformen sind:

• Docker
• Kubernetes
• Back4App

Beachten Sie, dass dies andere Bereitstellungsoptionen sind, die für SvelteKit-Anwendungen verfügbar sind. Die beste Plattform für Ihre Anwendung hängt von Ihren spezifischen Anforderungen ab, einschließlich Leistung, Skalierbarkeit und Kostenüberlegungen.

Einsatzprozess

Mit der Back4app CaaS-Plattform ist die Bereitstellung einer SvelteKit-Anwendung ein einfacher und optimierter Prozess, der viele Vorteile bietet: Back4apps CaaS kümmert sich um die zugrunde liegende Infrastruktur, so dass Sie sich auf die Entwicklung Ihrer Anwendungen konzentrieren können.

Was sind Back4app-Container?

Back4App Containers, auch bekannt als “Back4App CaaS” (Containers as a Service), ist eine Funktion von Back4App, die es Entwicklern ermöglicht, Docker-Container in der von Back4App bereitgestellten Cloud-Umgebung einzusetzen und zu verwalten.

Es handelt sich um eine verwaltete Container-Hosting-Lösung, die die Bereitstellung und Verwaltung von Docker-Containern in der Cloud vereinfacht.

Back4app-Container bieten Skalierbarkeit, Flexibilität und Integration mit anderen Back4App-Services und eignen sich daher für eine Vielzahl von Anwendungen und Services.

Es ist eine ausgezeichnete Wahl für alle, die die Containerisierung für ihre Projekte nutzen und gleichzeitig die Komplexität der Infrastrukturverwaltung minimieren möchten.

Projekt-Einführung

In diesem Tutorial werden Sie eine einfache Zitat-Generator-App mit SvelteKit erstellen, die eine Zitat-API verwendet, um zufällige Zitate zur Anzeige zu erhalten.

Um eine SvelteKit-Anwendung zu erstellen, führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm create svelte@latest quote-generator

Sobald Sie den Befehl ausgeführt haben, konfigurieren Sie Ihr SvelteKit-Projekt anhand der auf dem Terminal angezeigten Eingabeaufforderungen.

Zum Beispiel:

Wie in der Abbildung oben zu sehen ist, verwendet das Projekt zur Erstellung von Zitaten die TypeScript-Syntax, ESLint für das Code-Linting und Prettier für die Code-Formatierung.

Wechseln Sie nun in Ihrem Terminal vom aktuellen Verzeichnis in das Verzeichnis des Projekts und installieren Sie die erforderlichen Abhängigkeiten. Führen Sie dazu die folgenden Befehle in Ihrem Terminal aus:

cd quote-generator
npm install

Nachdem Sie die notwendigen Abhängigkeiten installiert haben, öffnen Sie das Projekt in Ihrer bevorzugten IDE und beginnen mit der Erstellung der Anwendung.

Erstellung Ihrer Anwendung

Wenn Sie Ihre Anwendung erstellen, müssen Sie zunächst die globalen Stile und das Layout der Anwendung definieren. Um die globalen Stile für Ihre Anwendung zu definieren, erstellen Sie einen Ordner ” styles" im Verzeichnis "src" und fügen Sie diesem Ordner eine Datei "global.css ” hinzu.

Schreiben Sie in die Datei global.css die folgenden Codezeilen:

/*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;
}

Der obige Codeblock richtet einige grundlegende Stile für Ihre Anwendung ein. Er importiert die Schriftart Montserrat von Google Fonts.

Sie wendet auch die Standardstile für alle Elemente an, zentriert den Inhalt auf dem Körper und gestaltet die Schaltflächenelemente in ihrem Standard- und Hover-Zustand.

Sobald Sie die globalen Stile für Ihre Anwendung definiert haben, müssen Sie die Stile auf die Anwendung anwenden.

Um dies zu tun, benötigen Sie die Layout-Route. SvelteKit bietet eine +layout.svelte Datei, die Ihnen hilft, Layouts in Ihrer Anwendung zu definieren. Sie können das Layout Ihrer Anwendung definieren, indem Sie die Datei +layout.svelte in das Verzeichnis src/routes einfügen.

Importieren Sie in die Datei +layout.svelte Ihre Datei global.css, um Ihre globalen Stile auf die Anwendung anzuwenden.

Etwa so:

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

Das Slot-Element schafft einen Platz, an dem die Anwendung Seiteninhalte einfügen kann. Wenn Sie eine Seite rendern, füllt die Anwendung das Slot-Element mit dem Inhalt der Seite und macht ihn im Layout sichtbar.

Erstellen Sie im Verzeichnis src/lib Ihres Projekts eine Datei Card.svelte. Dies ist die Card-Komponente, die Sie zum Rendern der von der Kurs-API abgerufenen Daten verwenden werden.

Die Komponente Card sollte wie folgt aussehen:

<!-- 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>

Im Script-Tag der Komponente Card sind zwei Requisiten definiert, die Requisiten author und content. Beide sind vom Typ String und haben den Anfangswert eines leeren Strings.

Das main-Element definiert die Vorlage der Komponente. Die Vorlage enthält ein h4-Element, das den Wert der Eigenschaft author anzeigt, und ein p-Element, das den Wert der Eigenschaft content anzeigt. Das style-Tag schließlich enthält CSS-Eigenschaften und -Werte zur Gestaltung der Komponente.

Importieren und rendern Sie nun die Komponente Card in der Datei +page.svelte. Dies ist die Home-Route, die angezeigt wird, wenn Sie Ihre Anwendung rendern.

In der Datei +page.svelte holen Sie die Daten aus der Kurs-API und übergeben sie mit Hilfe der Props an die Komponente Card.

Etwa so:

<!-- +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>

Der obige Codeblock ruft mit der Funktion fetchQuote Daten von der Kurs-API ab und weist die abgerufenen Daten dann der Kursvariablen zu.

Durch die Übergabe der Funktion fetchQuote an den onMount-Hook wird sichergestellt, dass sie beim Einhängen der Komponente (d. h. beim ersten Rendering der Komponente) ausgeführt wird.

Die Komponente Card übernimmt die Werte der Eigenschaften author und content aus dem quote-Objekt und zeigt sie an. Ein Klick auf die Schaltfläche löst die Funktion fetchQuote aus, um ein weiteres zufälliges Zitat zur Anzeige zu bringen.

Der obige Codeblock verwendet eine Icon-Komponente aus dem Paket @iconify/svelte. Um diese Komponente zu verwenden, müssen Sie zunächst das @iconify/svelte-Paket installieren, indem Sie den folgenden Befehl im Verzeichnis Ihres Projekts auf Ihrem Terminal ausführen:

npm install --save-dev @iconify/svelte

Nachdem Sie das @iconify/svelte-Paket installiert haben, führen Sie Ihre Anwendung auf dem Entwicklungsserver aus, um die Anwendung zu sehen. Sie können dies tun, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm run dev

Wenn Sie den obigen Befehl ausführen, wird der Entwicklungsserver auf http://localhost:5173/ gestartet . Öffnen Sie den Link in Ihrem Webbrowser, um Ihre Anwendung zu sehen.

Die Anwendung sollte wie folgt aussehen:

Dockerisieren Sie Ihre Anwendung

Bevor Sie Ihre Anwendung auf der Back4app CaaS-Plattform bereitstellen können, müssen Sie sie zunächst andocken. Um eine SvelteKit-Anwendung zu docken, müssen Sie zunächst den Node-Adapter von Svelte installieren.

Sie können den Knotenadapter installieren, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm i -D @sveltejs/adapter-node

Die Ausführung dieses Befehls installiert das @sveltejs/adapter-node Paket als Entwicklungsabhängigkeit in Ihrem SvelteKit Projekt. Sie verwenden diesen Adapter, wenn Sie Ihre SvelteKit Anwendung in einer Node.js Umgebung einsetzen wollen.

Sobald Sie das Paket installiert haben, ersetzen Sie die erste Codezeile in Ihrer svelte.config.js-Datei durch den folgenden Code:

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

Der nächste Schritt besteht darin, eine .dockerignore-Datei im Stammverzeichnis Ihres Projekts zu erstellen. In der .dockerignore-Datei geben Sie die Dateien und Verzeichnisse an, die beim Erstellen des Docker-Abbilds ausgeschlossen werden sollen.

Etwa so:

node_modules
.svelte-kit
build
public

Geben Sie die Dateien und Verzeichnisse an, die ausgeschlossen werden sollen. Erstellen Sie eine Docker-Datei namens Dockerfile im Stammverzeichnis des Projekts.

Fügen Sie in der Dockerdatei die folgenden Codezeilen hinzu:

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", "."]

Dieses Dockerfile bewirkt einen mehrstufigen Build, bei dem in der ersten Stufe die Anwendung gebaut wird und in der zweiten Stufe ein kleineres Produktions-Image mit nur den notwendigen Abhängigkeiten erstellt wird.

Nun können Sie das Docker-Image Ihrer Anwendung erstellen, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

docker build -t quote-generator .

Bereitstellen Ihrer Anwendung

Sobald Sie Ihre Anwendung gedockt und in ein GitHub-Repository gestellt haben, können Sie sie auf Back4app bereitstellen. Erstellen Sie dazu ein Back4app-Konto, falls Sie noch keines haben.

Um ein Back4app-Konto zu erstellen, gehen Sie wie folgt vor:

1. Besuchen Sie die Website von Back4app.
2. Klicken Sie auf die Schaltfläche “Anmelden”.
3. Füllen Sie das Anmeldeformular aus und schicken Sie es ab.

Nachdem Sie Ihr Back4app-Konto erstellt haben, melden Sie sich auf der Back4app-Website an und erstellen eine neue App. Klicken Sie dazu auf die Schaltfläche “Neue App” in der oberen rechten Ecke des Bildschirms.

Wählen Sie die Option Container as a Service. Nachdem Sie diese Option ausgewählt haben, werden Sie auf eine andere Seite weitergeleitet, auf der Sie Ihr GitHub-Konto mit Back4app verknüpfen.

Sobald Sie Ihr GitHub-Konto mit Back4app verknüpft haben, wählen Sie das Repository Ihrer Anwendung für die Bereitstellung aus.

Geben Sie Ihrer Anwendung einen Namen und konfigurieren Sie ihre anfängliche Bereitstellung, bevor Sie die Anwendung endgültig bereitstellen.

Nach erfolgreicher Bereitstellung der Anwendung erhalten Sie von Back4app einen Link, über den Sie die Anwendung in Ihrem Webbrowser aufrufen können.

Schlussfolgerung

Zusammenfassend lässt sich sagen, dass die Bereitstellung einer SvelteKit-Anwendung über die CaaS-Plattform von Back4pp die Entwicklung vereinfacht. Der Prozess ist einfach.

Dazu gehört das Erstellen Ihrer Anwendung, das Dockerisieren der Anwendung, das Pushen der Anwendung in ein GitHub-Repository und schließlich das Bereitstellen der Anwendung.

Wenn Sie die Bereitstellung Ihrer SvelteKit-Anwendungen in Erwägung ziehen, bietet die Back4app CaaS.-Plattform eine skalierbare und kostengünstige Lösung.

Wenn Ihnen dieser Artikel gefallen hat, lesen Sie vielleicht auch gerne den Artikel How to build a SvelteKit app using ChatGPT.

FAQ