Hosten Sie Ihre Remix App auf Fastlys Compute

Remix ist ein beliebtes, modernes Full-Stack-Web-Framework auf Basis von JavaScript, mit dem sich Entwickler auf die Nutzeroberfläche konzentrieren und mit Webstandards arbeiten können, um reaktionsschnelle und stabile Nutzererlebnisse zu schaffen. Mit unseren neuen remix-compute-js-Bibliotheken können Sie Ihre Remix Anwendung jetzt auch auf unserer Compute Plattform hosten. So können Sie Inhalte über unser globales Edge-Netzwerk ausliefern und brauchen dafür nicht einmal einen Origin-Server.

Angesicht der zunehmenden Unterstützung von JavaScript auf Compute können wir immer mehr Integrationen für bestehende JavaScript Bibliotheken und Frameworks anbieten. Wir haben Anfang des Jahres darüber gesprochen, wie man statische Websites vollständig über die Edge ausliefert, und erst kürzlich über die Ausführung Ihrer Next.js-Website auf der Edge. Heute möchten wir Ihnen einige unserer Bemühungen zur Unterstützung der Ausführbarkeit von Remix vorstellen.

Wie bereits erwähnt ist Remix ein beliebtes Full-Stack-Web-Framework auf Basis von JavaScript, das seinen Schwerpunkt auf Webstandards und progressive Verbesserung legt. Das moderne Framework unterstützt sämtliche Schnittstellen der Fetch API und passt damit hervorragend zu Compute, das diese Schnittstellen ebenfalls unterstützt. Das Beste an Remix ist aber sein Bring-your-own-Runtime-Design, das von Grund auf für die Arbeit mit verschiedenen Serverlaufzeiten und Server-Adaptern geschrieben wurde, sodass es sich auf einer Vielzahl von Plattformen ausführen lässt.

Das Ergebnis: eine Remix Laufzeitumgebung, ein Entry-Point-Adapter und eine Projektvorlage, die Ihnen volle Unterstützung für Compute als Ausführungsumgebung für Remix bieten.

Ab sofort steht Ihrer Compute Anwendung also die volle Bandbreite an Remix Funktionen zur Verfügung, einschließlich der umfassenden Unterstützung von Webstandards und progressiven Verbesserungen. Sie können Ihr Remix Projekt mithilfe der praktischen Features ganz nach Ihren Wünschen gestalten: Legen Sie auf Konventionen basierende Routing-Regeln fest, nutzen Sie die Vorteile von React Router, rendern Sie MDX und erstellen Sie API Routes.

Natürlich können Sie auch die Vorteile von Compute, wie zum Beispiel Fetch Calls an Backends oder die Verwendung von Polyfills zur Integration mit kompatiblen Modulen aus NPM nutzen.

Erstellen Sie Ihr Remix Projekt

Auf GitHub ist eine Vorlage für Fastly Compute unter folgendem Link erhältlich:https://github.com/fastly/remix-compute-js/tree/main/packages/remix-template. Jetzt müssen Sie nur noch auf Ihrem lokalen Rechner Node.js installieren und schon können Sie mit dem offiziellen Kommandozeilentool create-remix ein Remix Projekt erstellen:

npx create-remix@latest ./my-app --template https://github.com/fastly/remix-compute-js/tree/main/packages/remix-template

Sie haben die Wahl, ob Ihr Projekt auf JavaScript oder auf TypeScript aufbauen soll (ich persönlich bevorzuge TypeScript). Alles Weitere geschieht automatisch.

Wenn Sie zum Verzeichnis ./my-app wechseln, sehen Sie eine fertige Projektstruktur. Neben einem Remix Projekt handelt es sich dabei auch um eine JavaScript Anwendung in Compute mit einer fastly.toml-Datei, die Ihre Anwendung für Fastly beschreibt, und einem Entry Point unter src/index.js.

Ihre Anwendung ist so vorkonfiguriert, dass sie auf dem Fastly Development Server läuft, für den Sie lediglich die Fastly CLI installieren müssen. Führen Sie einfach folgenden Befehl aus:

npm run dev

Öffnen Sie http://127.0.0.1:7676 in Ihrem Webbrowser, um die Anwendung mit der Remix Vorlage anzuzeigen.

Diese Datei wird aus der Datei app/routes/index.jsx erstellt (.tsx, wenn Sie TypeScript verwenden). Sobald Sie Änderungen an dieser Datei vorgenommen haben, wird Ihre Anwendung neu erstellt und Ihr Browserfenster automatisch aktualisiert.

Tatsächlich laufen hier zwei verschiedene Prozesse ab: Der Compiler von Remix und der Entwicklungsserver von Fastly laufen beide im Überwachungsmodus. Jedes Mal, wenn Sie Änderungen an Dateien im Verzeichnis app/ vornehmen, löst der Remix Compiler einen Rebuild aus, wodurch die Ausgabedateien in den Verzeichnissen build/ und public/build/ aktualisiert werden. Wann immer dies geschieht oder wenn Sie Dateien im Verzeichnis public/ aktualisieren, wird der Entwicklungsserver von Fastly neu konfiguriert. Im Endeffekt haben Sie jetzt eine sich selbst aktualisierende Entwicklungsumgebung für Ihre Remix Anwendung, die auf Compute läuft.

Der Server-Adapter

Die leistungsstarke Architektur von Remix unterscheidet zwischen zwei Bereichen: der Remix Anwendung selbst (also dem innerhalb des Remix Frameworks geschriebenen Code) und der Schnittstelle zwischen Remix und der Serverplattform. Dadurch erhalten Sie mehr Flexibilität bei der Ausgestaltung der Schnittstellen zwischen der Serverplattform und Remix, was Plattformanbietern wie uns zugutekommt. (An dieser Stelle vielen Dank an das Remix Team!)

Die einfachste Anwendungsmethode, die auch in der Projektvorlage implementiert ist, ist die Nutzung der createEventHandler-Funktion, die Fastly aus dem Server-Adapter-Package exportiert. Diese Funktion erwartet staticAssets, die aus der vom Static Publisher generierten Datei ./statics importiert werden (diese wird bei Verwendung der Vorlage ebenfalls automatisch installiert):

import { createEventHandler } from "@fastly/remix-server-adapter";
import { staticAssets } from "./statics";

addEventListener("fetch", createEventHandler({ staticAssets }));

Wenn Sie allerdings noch granularere Kontrolle über das ServerBuild-Modul, das Sie mit Remix verwenden möchten, oder über den Umgang mit Anfragen für statische Assets wünschen, bieten wir hierfür auch Funktionen auf niedrigerer Ebene an:

import { createRequestHandler, handleAsset } from "@fastly/remix-server-adapter";
import { staticAssets } from "./statics";

const build = staticAssets.getAsset("/build/index.js").module;  
const requestHandler = createRequestHandler({build});  

addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));  
async function handleRequest(event) {  
  let response = await handleAsset(event, staticAssets);  
  if (!response) {  
    response = requestHandler(event);  
  }  
  return response;  
}

Go-Live

Wenn Sie bereit für die Auslieferung sind, erstellen Sie einen Production Build und werfen Sie einen Blick auf Ihre Website, um sicherzustellen, dass sie reibungslos läuft.

Halten Sie den Entwicklungsserver an und führen Sie anschließend folgende Befehle aus:

npm run build
npm start

Dies erzeugt einen Production Build Ihrer Anwendung, der wiederum optimierte JavaScript Dateien erzeugt. Aktualisieren Sie jetzt Ihren Browser, um die Production-Build-Version Ihrer Anwendung anzuzeigen, die auf dem Entwicklungsserver läuft (Live-Reloading ist bei Production Builds nicht möglich).

Sobald Sie sich davon überzeugt haben, dass der Production Build Ihrer Website ordnungsgemäß funktioniert, können Sie mit der Bereitstellung auf Fastly fortfahren. Wenn Sie noch keinen Account haben, richten Sie zunächst einen ein und konfigurieren die Fastly CLI mit Ihren neuen Zugangsdaten. Anschließend können Sie Ihre App in Ihrem Fastly Account bereitstellen:

npm run build
npm run deploy

Sie werden aufgefordert, einen neuen Fastly Service zu erstellen. Wenn Sie einen vorhandenen Service nutzen möchten, ändern Sie die Datei fastly.toml und geben Sie unter service_id Ihre Service-ID ein, bevor Sie die obigen Befehle ausführen.

Und das ist auch schon alles, was Sie tun müssen, um Remix auf Compute zu nutzen: Entwickeln Sie wie gewohnt mit npm run dev. Testen Sie mit npm run build und npm start und nutzen Sie für die Bereitstellung npm run build und npm run deploy auf der Edge, wenn Sie bereit sind, produktiv zu gehen.

Sie haben bereits eine Remix Anwendung? Dann bringen Sie sie zu Compute

Haben Sie bereits mit der Entwicklung einer Remix Anwendung begonnen? Vielleicht sogar mit einer, die auf einem Node.js-Backend gehostet ist? Solange Ihr Projekt nicht versucht, etwas zu tun, was auf Fastly konzeptionell nicht möglich ist, wie beispielsweise mit dem Dateisystem zu interagieren, ist es in der Regel nicht allzu schwierig, die Anwendung für Compute anzupassen.

Die einfachste Methode ist die Erstellung eines Blankoprojekts in Remix unter Verwendung der obigen Vorlage. So werden alle Abhängigkeiten für Sie installiert und auch der Server-Adapter wird dabei erstellt. Installieren Sie bei Ihrem neuen Projekt sämtliche Packages mit Abhängigkeiten, auf die Ihr ursprüngliches Projekt verweist. Übertragen Sie anschließend die Dateien Ihres bestehenden Projekts auf Ihr neues Projekt. Die Dateien, die zu Ihrer Anwendung gehören, finden Sie in Remix unter „app/“ und „public/“. Die meisten Dateien in diesen Verzeichnissen können Sie in der Regel einfach in Ihr neues Projekt kopieren, wobei Sie Folgendes beachten sollten:

1. Einige der Quelldateien verweisen auf Remix Runtime Packages wie @remix-run/node, @remix-run/cloudflare oder @remix-run/deno. Ändern Sie diese Verweise auf @fastly/remix-server-runtime.

Wenn Sie zum Beispiel folgenden Code sehen:

import { json } from "@remix-run/node";

ändern Sie ihn auf:

import { json } from "@fastly/remix-server-runtime";

2. Bei entry.client.tsx, entry.server.tsx und root.tsx im Verzeichnis app/ sollten Sie in der Regel mit den Dateien beginnen, die Sie im neuen Projekt finden. Überprüfen Sie diese Dateien in Ihrem Ursprungsprojekt. Suchen Sie nach Änderungen, die Sie in Ihrem Ursprungsprojekt vorgenommen haben, und übernehmen Sie diese gegebenenfalls in Ihr neues Projekt.

3. Überspringen Sie /public/build/. Hierbei handelt es sich um ein Verzeichnis, das während des Build-Schrittes erstellt wird.

4. Je nach Abhängigkeiten, die Ihr Projekt verwendet, müssen Sie eventuell Polyfills hinzufügen, damit es auf Compute läuft.

Jetzt haben Sie alles, was Sie brauchen, um Ihre eigene Anwendung wie oben beschrieben auf der Edge zu entwickeln und bereitzustellen.

Ihre Remix Anwendung, jetzt auf Compute

Die Integration zwischen Remix und Compute ist da! Ab sofort können Sie Ihre Remix Anwendung komplett auf der Edge hosten und brauchen dafür nicht einmal einen Origin-Server. Profitieren Sie von der robusten Remix Architektur und nutzen Sie anschließend Compute, um Ihre Anwendung auf Tausenden von Servern im Fastly Netzwerk auszuführen.

Wir von Fastly möchten Ihnen Tools zur Verfügung stellen, die es Ihnen ermöglichen, mehr Code auf der Edge auszuführen und bei der Entwicklung dieses Codes Ihre bekannten und bewährten Tools zu nutzen. Wir freuen uns immer zu hören, wenn unsere Nutzer diese Tools hilfreich finden. Schreiben Sie uns also gerne auf Twitter, was Sie gerade so alles entwickeln.