Bereitstellung und nächste Schritte

Klonen Sie das GitHub-Repo (falls Sie es noch nicht getan haben) mit:

git clone https://github.com/opensas/mdn-svelte-tutorial.git

Um den aktuellen Zustand der App zu erreichen, führen Sie aus:

cd mdn-svelte-tutorial/08-next-steps

Oder laden Sie die Inhalte des Ordners direkt herunter:

npx degit opensas/mdn-svelte-tutorial/08-next-steps

Denken Sie daran, npm install && npm run dev auszuführen, um Ihre App im Entwicklungsmodus zu starten.

Bisher haben wir unsere App im Entwicklungsmodus mit npm run dev ausgeführt. Wie wir zuvor gesehen haben, weist diese Anweisung Svelte an, unsere Komponenten und JavaScript-Dateien in eine public/build/bundle.js-Datei und alle CSS-Bereiche unserer Komponenten in public/build/bundle.css zu kompilieren. Es startet auch einen Entwicklungsserver und überwacht Änderungen, kompiliert die App neu und aktualisiert die Seite bei Änderungen.

Ihre generierten bundle.js- und bundle.css-Dateien sehen ungefähr so aus (Dateigröße links):

  504 Jul 13 02:43 bundle.css
95981 Jul 13 02:43 bundle.js

Um unsere Anwendung für die Produktion zu kompilieren, müssen wir stattdessen npm run build ausführen. In diesem Fall startet Svelte keinen Webserver und überwacht keine Änderungen. Es wird jedoch unsere JavaScript-Dateien mit terser minimieren und komprimieren.

Nachdem Sie npm run build ausgeführt haben, sehen unsere generierten bundle.js- und bundle.css-Dateien eher so aus:

  504 Jul 13 02:43 bundle.css
21782 Jul 13 02:43 bundle.js

Versuchen Sie jetzt, npm run build im Stammverzeichnis Ihrer App auszuführen. Möglicherweise erhalten Sie eine Warnung, die Sie jedoch vorerst ignorieren können.

Unsere gesamte App ist jetzt nur 21 KB groß — 8,3 KB, wenn sie gezippt ist. Es gibt keine zusätzlichen Laufzeiten oder Abhängigkeiten zum Herunterladen, Parsen, Ausführen und Speicherhalten. Svelte hat unsere Komponenten analysiert und den Code in natives JavaScript kompiliert.

Standardmäßig, wenn Sie eine neue App mit npx degit sveltejs/template my-svelte-project erstellen, verwendet Svelte rollup als Modul-Bundler.

In der Datei package.json können Sie sehen, dass die build- und dev-Skripte einfach Rollup aufrufen:

"scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w",
  "start": "sirv public"
},

Im dev-Skript übergeben wir das Argument -w, das Rollup anweist, Dateien zu beobachten und bei Änderungen neu zu erstellen.

Wenn wir uns die Datei rollup.config.js ansehen, können wir sehen, dass der Svelte-Compiler nur ein Rollup-Plugin ist:

import svelte from 'rollup-plugin-svelte';
// …
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: (css) => {
        css.write('public/build/bundle.css');
      }
    }),

Später in derselben Datei sehen Sie auch, wie Rollup unsere Skripte im Produktionsmodus minimiert und im Entwicklungsmodus einen lokalen Server startet:

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()
  ],

Es gibt viele Plugins für Rollup, die es Ihnen ermöglichen, sein Verhalten anzupassen. Ein besonders nützliches Plugin, das ebenfalls vom Svelte-Team gepflegt wird, ist svelte-preprocess, das viele verschiedene Sprachen in Svelte-Dateien wie PostCSS, SCSS, Less, CoffeeScript, SASS und TypeScript vorverarbeitet.

Aus der Sicht eines Webservers ist eine Svelte-Anwendung nichts weiter als eine Ansammlung von HTML-, CSS- und JavaScript-Dateien. Alles, was Sie benötigen, ist ein Webserver, der statische Dateien bereitstellen kann, was bedeutet, dass Sie aus vielen Optionen wählen können. Schauen wir uns ein paar Beispiele an.

Einer der einfachsten Wege, eine Svelte-Anwendung bereitzustellen, ist die Nutzung von Vercel. Vercel ist eine Cloud-Plattform, die speziell für statische Seiten zugeschnitten ist und eine sofortige Unterstützung für die meisten gängigen Front-End-Tools bietet, einschließlich Svelte.

Um unsere App bereitzustellen, folgen Sie diesen Schritten.

1. Erstellen Sie ein Konto bei Vercel.

2. Navigieren Sie zum Stammverzeichnis Ihrer App und führen Sie npx vercel aus; beim ersten Mal werden Sie aufgefordert, Ihre E-Mail-Adresse einzugeben und den in dieser Adresse gesendeten Schritten aus Sicherheitsgründen zu folgen.

3. Führen Sie npx vercel erneut aus, und Sie werden aufgefordert, einige Fragen zu beantworten, wie diese:

   bash

   npx vercel
   

   Vercel CLI 19.1.2
   ? Set up and deploy "./mdn-svelte-tutorial"? [Y/n] y
   ? Which scope do you want to deploy to? opensas
   ? Link to existing project? [y/N] n
   ? What's your project's name? mdn-svelte-tutorial
   ? In which directory is your code located? ./
   Auto-detected Project Settings (Svelte):
   - Build Command: `npm run build` or `rollup -c`
   - Output Directory: public
   - Development Command: sirv public --single --dev --port $PORT
   ? Want to override the settings? [y/N] n
      Linked to opensas/mdn-svelte-tutorial (created .vercel)
      Inspect: https://vercel.com/opensas/mdn-svelte-tutorial/[...] [1s]
   ✅  Production: https://mdn-svelte-tutorial.vercel.app [copied to clipboard] [19s]
      Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
      To change the domain or build command, go to https://zeit.co/opensas/mdn-svelte-tutorial/settings
   

4. Akzeptieren Sie alle Standardeinstellungen, und es wird alles gut laufen.

5. Nachdem es fertig ist, setzen Sie die "Production"-URL in Ihren Browser, und Sie werden die bereitgestellte App sehen!

Sie können auch ein Svelte-Git-Projekt importieren in Vercel von GitHub, GitLab oder Bitbucket.

Für das Hosten statischer Dateien gibt es mehrere Online-Dienste, die es Ihnen ermöglichen, Ihre Seite automatisch bereitzustellen, sobald Sie Änderungen in ein Git-Repository pushen. Die meisten von ihnen beinhalten das Einrichten einer Deployment-Pipeline, die bei jedem git push ausgelöst wird und sich um den Aufbau und die Bereitstellung Ihrer Website kümmert.

Um dies zu demonstrieren, werden wir unsere Todos-App bei GitLab Pages bereitstellen.

1. Zuerst müssen Sie sich bei GitLab registrieren und dann ein neues Projekt erstellen. Geben Sie Ihrem neuen Projekt einen kurzen, einfachen Namen wie "mdn-svelte-todo". Sie werden eine Remote-URL haben, die auf Ihr neues GitLab-Git-Repository zeigt, wie git@gitlab.com:[ihr-benutzer]/[ihr-projekt].git.

2. Bevor Sie mit dem Hochladen von Inhalten in Ihr Git-Repository beginnen, ist es eine gute Praxis, eine .gitignore-Datei hinzuzufügen, um Git zu sagen, welche Dateien von der Quellkontrolle ausgeschlossen werden sollen. In unserem Fall werden wir Git anweisen, Dateien im node_modules-Verzeichnis auszuschließen, indem wir eine .gitignore-Datei im Stammordner Ihres lokalen Projekts mit folgendem Inhalt erstellen:

   bash

   node_modules/
   

3. Gehen wir jetzt zurück zu GitLab. Nach dem Erstellen eines neuen Repos wird GitLab Sie mit einer Nachricht begrüßen, die verschiedene Optionen zum Hochladen Ihrer vorhandenen Dateien erklärt. Folgen Sie den Schritten unter der Überschrift Push an existing folder (Einen vorhandenen Ordner pushen):

   bash

   cd your_root_directory # Go into your project's root directory
   git init
   git remote add origin https://gitlab.com/[your-user]/mdn-svelte-todo.git
   git add .
   git commit -m "Initial commit"
   git push -u origin main
   

   Hinweis: Sie könnten das git-Protokoll anstelle von https verwenden, was schneller ist und Sie davon befreit, Ihren Benutzernamen und Ihr Passwort jedes Mal einzugeben, wenn Sie Ihr Ursprung-Repo aufrufen. Um es zu verwenden, müssen Sie ein SSH-Schlüssel-Paar erstellen. Ihre Ursprungs-URL wird dann so aussehen: git@gitlab.com:[ihr-benutzer]/mdn-svelte-todo.git.

Mit diesen Anweisungen initialisieren wir ein lokales Git-Repository, legen dann unseren Remote-Ursprung (wo wir unseren Code pushen werden) als unser Repo auf GitLab fest. Anschließend übergeben wir alle Dateien an das lokale Git-Repo und pushen diese dann zum Remote-Ursprung auf GitLab.

GitLab verwendet ein integriertes Tool namens GitLab CI/CD, um Ihre Seite aufzubauen und auf dem GitLab Pages-Server zu veröffentlichen. Die Abfolge von Skripten, die GitLab CI/CD ausführt, um diese Aufgabe zu erledigen, wird aus einer Datei namens .gitlab-ci.yml erstellt, die Sie nach Belieben erstellen und ändern können. Ein spezieller Job namens pages in der Konfigurationsdatei wird GitLab darauf aufmerksam machen, dass Sie eine GitLab Pages-Website bereitstellen.

Lassen Sie uns dies jetzt ausprobieren.

1. Erstellen Sie eine .gitlab-ci.yml-Datei im Stammverzeichnis Ihres Projekts und geben Sie ihr den folgenden Inhalt:

   yaml

   image: node:latest
   pages:
     stage: deploy
     script:
       - npm install
       - npm run build
     artifacts:
       paths:
         - public
     only:
       - main
   

   Hier sagen wir GitLab, dass es ein Image mit der neuesten Version von Node verwenden soll, um unsere App zu bauen. Als nächstes deklarieren wir einen pages-Job, um GitLab Pages zu aktivieren. Wann immer es einen Push in unser Repo gibt, wird GitLab npm install und npm run build ausführen, um unsere Anwendung zu bauen. Wir sagen GitLab auch, die Inhalte des public-Ordners bereitzustellen. In der letzten Zeile konfigurieren wir GitLab, unsere App nur dann erneut bereitzustellen, wenn es einen Push in unseren Hauptzweig gibt.

2. Da unsere App in einem Unterverzeichnis veröffentlicht wird (wie https://your-user.gitlab.io/mdn-svelte-todo), müssen wir die Verweise auf die JavaScript- und CSS-Dateien in unserer public/index.html-Datei relativ machen. Dazu entfernen wir einfach die führenden Schrägstriche (/) aus den URLs /global.css, /build/bundle.css und /build/bundle.js, wie folgt:

   html

   <title>Svelte To-Do list</title>
   
   <link rel="icon" type="image/png" href="favicon.png" />
   <link rel="stylesheet" href="global.css" />
   <link rel="stylesheet" href="build/bundle.css" />
   
   <script defer src="build/bundle.js"></script>
   

   Machen Sie das jetzt.

3. Jetzt müssen wir nur noch unsere Änderungen an GitLab committen und pushen. Tun Sie dies, indem Sie die folgenden Befehle ausführen:

   bash

   git add public/index.html
   git add .gitlab-ci.yml
   git commit -m "Added .gitlab-ci.yml file and fixed index.html absolute paths"
   git push
   

Wann immer ein Job läuft, zeigt GitLab ein Symbol an, das den Prozess des Jobs anzeigt. Ein Klick darauf ermöglicht es Ihnen, die Ausgabe des Jobs zu inspizieren.

Sie können auch den Fortschritt der aktuellen und vorherigen Jobs aus dem Menüpunkt CI / CD > Jobs Ihres GitLab-Projekts überprüfen.

Sobald GitLab mit dem Aufbau und der Veröffentlichung Ihrer App fertig ist, wird sie unter https://your-user.gitlab.io/mdn-svelte-todo/ zugänglich sein; in meinem Fall ist es https://opensas.gitlab.io/mdn-svelte-todo/. Sie können die URL Ihrer Seite in der GitLab-Oberfläche überprüfen — siehe Menüoption Settings > Pages.

Mit dieser Konfiguration wird Ihre Anwendung bei jedem Push in das GitLab-Repo automatisch neu gebaut und auf GitLab Pages bereitgestellt.

In diesem Abschnitt geben wir Ihnen einige Ressourcen und Projekte, die Sie besuchen sollten, um Ihr Svelte-Lernen weiter zu führen.

Um weiter voranzukommen und mehr über Svelte zu lernen, sollten Sie definitiv die Svelte-Homepage besuchen. Dort finden Sie viele Artikel, die Sveltes Philosophie erklären. Falls Sie es noch nicht getan haben, stellen Sie sicher, dass Sie das Svelte-Interaktive-Tutorial durchgehen. Wir haben bereits die meisten Inhalte behandelt, sodass es nicht lange dauern wird, es abzuschließen — Sie sollten es als Übung betrachten!

Sie können auch die Svelte API-Dokumentation und die verfügbaren Beispiele konsultieren.

Um die Motivationen hinter Svelte zu verstehen, sollten Sie sich Rich Harris' Präsentation Rethinking reactivity auf YouTube ansehen. Er ist der Schöpfer von Svelte und hat einige Dinge darüber zu sagen. Sie haben auch die interaktiven Folien hier verfügbar, die, wenig überraschend, mit Svelte erstellt wurden. Wenn es Ihnen gefallen hat, werden Sie auch The Return of 'Write Less, Do More' Präsentation genießen, die Rich Harris auf JSCAMP 2019 gehalten hat.

Es gibt andere Projekte im Zusammenhang mit Svelte, die es wert sind, überprüft zu werden:

• Sapper: Ein Anwendungsframework, das von Svelte angetrieben wird und Unterstützung für serverseitiges Rendering (SSR), Code-Splitting, dateibasierte Routenführung und Offline-Support bietet. Denken Sie daran als Next.js für Svelte. Wenn Sie planen, eine relativ komplexe Webanwendung zu entwickeln, sollten Sie sich dieses Projekt unbedingt ansehen.
• Svelte Native: Ein Mobile-Anwendungsframework, das von Svelte angetrieben wird. Denken Sie daran wie React Native für Svelte.
• Svelte für VS Code: Das offiziell unterstützte VS Code-Plugin zum Arbeiten mit .svelte-Dateien, das wir uns in unserem TypeScript-Artikel angesehen haben.

• Es gibt einen kompletten Kurs über Svelte und Sapper von Rich Harris, verfügbar bei Frontend Masters.
• Obwohl Svelte ein relativ junges Projekt ist, gibt es viele Tutorials und Kurse im Internet, sodass es schwierig ist, eine Empfehlung auszusprechen.
• Dennoch ist Svelte.js — The Complete Guide von Academind eine sehr beliebte Option mit großartigen Bewertungen.
• The Svelte Handbook, von Flavio Copes, ist auch eine nützliche Referenz, um die Hauptkonzepte von Svelte zu lernen.
• Wenn Sie lieber Bücher lesen, gibt es Svelte and Sapper in Action von Mark Volkman, veröffentlicht im Oktober 2020, das Sie online kostenlos ansehen können.
• Wenn Sie tiefer eintauchen und das Innenleben des Svelte-Compilers verstehen möchten, sollten Sie sich Tan Li Hau's Compile Svelte in your head Blogposts ansehen.

Es gibt eine Reihe von Möglichkeiten, Unterstützung zu erhalten und mit der Svelte-Community zu interagieren:

• svelte.dev/chat: Sveltes Discord-Server.
• @sveltejs: Der offizielle Twitter-Account.
• @sveltesociety: Der Twitter-Account der Community von Svelte.
• Svelte Recipes: Community-getriebene Repository von Rezepten, Tipps und Best Practices zur Lösung gängiger Probleme.
• Svelte Fragen auf Stack Overflow: Fragen mit dem svelte-Tag bei SO.
• Svelte reddit-Community: Diskussions- und Bewertungsseite der Svelte-Community auf Reddit.
• Svelte DEV-Community: Eine Sammlung von Svelte-bezogenen technischen Artikeln und Tutorials aus der DEV.to-Community.

Herzlichen Glückwunsch! Sie haben das Svelte-Tutorial abgeschlossen. In den vorherigen Artikeln sind wir von null Wissen über Svelte zu einem kompletten Aufbau und Bereitstellung einer Anwendung übergegangen.

• Wir haben die Philosophie von Svelte kennengelernt und was es von anderen Front-End-Frameworks unterscheidet.
• Wir haben gesehen, wie man dynamisches Verhalten zu unserer Website hinzufügt, wie man unsere App in Komponenten organisiert und verschiedene Möglichkeiten hat, Informationen unter ihnen zu teilen.
• Wir haben das Reaktivitätssystem von Svelte genutzt und gelernt, wie man gängige Fallstricke vermeidet.
• Wir haben auch einige fortgeschrittene Konzepte und Techniken gesehen, um mit DOM-Elementen zu interagieren und um die Fähigkeiten von HTML-Elementen programmatisch mit der use-Direktive zu erweitern.
• Dann haben wir gesehen, wie man Stores verwendet, um mit einem zentralen Datenrepository zu arbeiten, und wir haben unseren eigenen benutzerdefinierten Store erstellt, um die Daten unserer Anwendung im Webspeicher zu speichern.
• Wir haben uns auch die Unterstützung von Svelte für TypeScript angesehen.

In diesem Artikel haben wir über ein paar unkomplizierte Optionen gelernt, um unsere App in der Produktion bereitzustellen und gesehen, wie man ein grundlegendes Pipeline einrichtet, um unsere App bei jedem Commit bei GitLab bereitzustellen. Dann haben wir Ihnen eine Liste mit Svelte-Ressourcen zur Verfügung gestellt, um Ihr Svelte-Lernen weiterzuführen.

Herzlichen Glückwunsch! Nach Abschluss dieser Serie von Tutorials sollten Sie eine solide Basis haben, auf der Sie professionelle Webanwendungen mit Svelte entwickeln können.

• Zurück
• Übersicht: JavaScript-Frameworks und -Bibliotheken