Schnelle Frontend-Entwicklung durch typisierte Mock-Server mit json-server und TypeScript

Bei der Entwicklung von Software kann es vorkommen, dass die Weiterarbeit an einem Feature durch projektinterne Abhängigkeiten aufgehalten wird. Ein Beispiel hierfür ist die getrennte Entwicklung von Frontend und Backend. Oft kann gewisse Funktionalität erst im Frontend umgesetzt werden, wenn das Backend dafür über eine entsprechende Schnittstelle Daten anbietet.

Um diese Abhängigkeit aufzulösen, gibt es mehrere Ansätze. Ein solcher Ansatz ist der Einsatz von Mock-Servern, den ich in diesem Blogpost vorstelle möchte.

Was sind eigentlich Mock-Server?

Mock-Server können genutzt werden um die Funktionalität eines “echten” Backends vorzutäuschen und stellen damit einen leichtgewichtigen Ansprechpartner für ein Frontend da.

Um einen Mock-Server zu betreiben, muss lediglich die zu entwickelnde API definiert sein. Diese Definition kann entweder informell oder über eine API Spezifikation á la OpenAPI Specification erfolgen. Dann kann der Mock-Server entsprechend konfiguriert werden sodass er über verschiedene Endpunkte gemockte Antworten zurückliefert.

Mit minimalem zusätzlichen Konfigurations- / Entwicklungsaufwand kann man also anfangen, ein mit einem Service kompatibles Frontend zu entwickeln, bevor der Service selbst fertig implementiert ist, ganz ohne Verzögerungen oder Abhängigkeiten.

Neben der beschriebenen Entkopplung von Frontend- und Backend-Entwicklung, bringt der Einsatz eines Mock-Servers weitere Vorteile:

• Einen Mock-Server zu starten ist oft deutlich leichtgewichtiger, als ein vollständiges Backend zu starten, man spart also Ressourcen bei der Entwicklung des Frontends
• Ein Mock-Server läuft üblicherweise lokal, was den Vorteil hat, dass auch offline weiterentwickelt werden kann
• Mock-Server können für UI-Tests genutzt werden um verschiedene Fehlerfälle zu simulieren und zu testen, die im Kontext eines echten Systems unter Umständen schwer reproduzierbar sind
• Auch für Prototyping eignen sich Mock-Server sehr gut, man kann schnell Ideen für das Frontend einer Applikation visualisieren und muss sich nicht um die Implementierung zugehöriger Services im Backend kümmern

Implementierung eines Mockservers mit json-server

Eine Möglichkeit, einen Mock-Server aufzusetzen, ist der Einsatz von Node.js zusammen mit dem Package json-server .

Das Package json-server erlaubt es dem Benutzer, die API-Antworten des Mock-Servers als JSON-Datei zu definieren. Ein einfaches Beispiel hierfür ist das folgende:

Man installiert sich global das json-server-Package mit

npm install -g json-server

und erstellt sich eine db.json Datei mit folgendem Inhalt:

Danach startet man den Mock-Server basierend auf dieser “Datenbank” via

json-server --watch db.json.

Jetzt sind die in der JSON-Datei hinterlegten Daten über eine REST-Schnittstelle via http://localhost:3000/posts/1 etc. erreichbar und können von einem Frontend abgefragt werden.

Das Frontend kann außerdem POST, PUT, PATCH und DELETE requests (mit Content-Type: application/json) an den Endpunkt schicken – diese werden dann auf die hinterlegte „Datenbank” angewandt.

Nichtsdestotrotz reicht diese Funktionalität manchmal nicht aus, um alle gewünschten Verhaltensweisen des Services abzubilden. In diesem Fall kann man json-server auch programmatisch in einem eigenen Node.js-Programm nutzen. Voraussetzung hierfür ist, dass json-server als Dependency vom Projekt installiert wurde (also nicht global).

server.js

Der „selbstgebaute“ Mock-Server kann dann via node server.js gestartet werden.

json-server erlaubt es hierbei, weitere express Middlewares (z.B. für Authentifizierung oder Validierungen) hinzuzufügen oder weitere eigene Verhaltensweisen zu definieren.

json-server + Typescript = ❤️

Die programmatische Nutzung von json-server ist auch in TypeScript -Projekten möglich, hierzu muss einfach die Typdefinition für json-server über das Package @types/json-server installiert werden.

Der Einsatz von TypeScript bietet hier den weiteren Vorteil, dass die Datenbank auch als TypeScript-Datei angelegt werden kann, was eine Typisierung der zurückgegebenen Mock-Daten ermöglicht. Das erleichtert vor allem in komplexen Anwendungsfällen die Strukturierung der Daten und ist insbesondere dann praktisch, wenn man ohnehin ein Tool wie openapi-generator nutzt, um sich basierend auf der API Spezifikation TypeScript-Typdefinitionen generieren lässt.

Hier ein Beispiel, welches json-server in Kombination mit TypeScript nutzt:

package.json

Zuerst definieren wir die package.json Datei. Diese enthält alle benötigten Dependencies. Wir installieren die Dependencies via npm install.

db.ts

Als nächstes setzen wir unsere „Datenbank“ auf, aber anstelle einer JSON-Datei definieren wir sie diesmal in einer TypeScript-Datei und beschreiben zusätzlich die Datentypen unserer Mockdaten.

mockserver.ts

Zuletzt erstellen wir analog zum ersten Beispiel eine TypeScript-Datei, die die TypeScript-Datenbank importiert und diese anstelle der zuvor genutzten JSON-Datei an json-server übergibt.

Ähnlich wie beim ersten Beispiel sind nach dem Start des Mock-Servers via npm start die in der db.ts Datei hinterlegten Daten über eine REST-Schnittstelle via http://localhost:3000/posts/1 etc. erreichbar. Auch hier kann das Frontend wieder Daten über die Standard HTTP-Methoden abfragen und ändern.

Fazit

Mit Node.js, Typescript und json-server lassen sich mit minimalem Konfigurations- bzw. Entwicklungsaufwand einfach Mock-Server konfigurieren, die Abhängigkeiten auflösen und dadurch das Entwickeln eines Frontends deutlich beschleunigen können. json-server bietet hierbei auch den Vorteil, mit bereits aus express bekannten Methoden einfach erweiterbar zu sein. Der Einsatz von TypeScript im Kombination mit einer API Spezifikation und openapi-generator stellt sicher, dass die gemockten Daten exakt der API-Spezifikation entsprechen.

Alternativen zu einem mit json-server “selbstgebauten” Mock-Server existieren viele: MockServer , Wiremock , Apisprout und viele mehr bieten ähnliche Funktionalitäten, setzen aber ihren Fokus anders und bilden unterschiedliche Anwendungsfälle ab. Gerade im Frontend-Prototyping-Bereich überzeugt mich json-server aber durch den niedrigen Konfigurationsaufwand.