Simple setup nx und ein nodejs project

Einleitung

In diesem Beitrag erklären wir Schritt für Schritt, wie du ein Middleware-Projekt mit NX, Node.js und TypeScript aufsetzt (Simple setup nx und ein nodejs project). NX ist ein leistungsstarkes Monorepo-Tool, das sich hervorragend für die Verwaltung und Skalierung von TypeScript-Projekten eignet. Da ein solides Grundverständnis essenziell ist, werden wir die einzelnen Komponenten detailliert betrachten, um ein klares Bild von deren Funktionen zu erhalten.

Voraussetzungen

Bevor wir mit der Einrichtung beginnen, stelle sicher, dass du die folgende Software auf deinem System installiert hast:

• Node.js (empfohlen: LTS-Version, um eine stabile Umgebung zu gewährleisten)
• npm oder yarn (für das effiziente Verwalten von Paketen)
• NX CLI (kann mit npm install -g nx installiert werden, um alle NX-Befehle nutzen zu können)

Schritt 1: Ein NX-Workspace erstellen

Ein NX-Workspace bietet eine strukturierte Umgebung zur Organisation und Verwaltung mehrerer Projekte innerhalb eines einzigen Repositories. Dies erleichtert die Wiederverwendung von Code, verbessert die Wartbarkeit und gewährleistet eine einheitliche Struktur in großen Anwendungen. Um einen neuen Workspace zu erstellen, verwende den folgenden Befehl:

npx create-nx-workspace@latest my-nx-project

Während der Einrichtung kannst du den Typ „Custom“ oder „Node“ auswählen, je nachdem, welche Struktur am besten zu deinem Vorhaben passt.

Schritt 2: Ein Node.js-Projekt hinzufügen

NX erlaubt es, verschiedene Applikationen und Bibliotheken innerhalb eines Workspaces zu verwalten. Falls du ein neues Node.js-Projekt hinzufügen möchtest, kannst du diesen Befehl verwenden:

nx generate @nx/node:application middleware-service

Dieser Befehl generiert eine neue Node.js-Anwendung innerhalb des Workspaces und richtet automatisch essenzielle Dateien wie tsconfig.json und package.json ein, sodass du direkt loslegen kannst.

Schritt 3: TypeScript konfigurieren

TypeScript ist die bevorzugte Sprache für NX-Projekte, da es eine strikte Typisierung und eine verbesserte Entwicklungsumgebung bietet. Die Datei tsconfig.json definiert, wie der TypeScript-Compiler den Code verarbeitet. Eine typische Konfiguration könnte so aussehen:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

Diese Konfiguration sorgt dafür, dass der Code in ein kompatibles JavaScript-Format übersetzt und in den dist-Ordner ausgegeben wird.

Schritt 4: Eine Middleware implementieren

Middleware sind essenzielle Komponenten in einer Express.js-Anwendung, da sie zwischen der Anfrage eines Clients und der Antwort des Servers ausgeführt werden. Sie werden häufig für Logging, Authentifizierung oder andere wiederkehrende Aufgaben genutzt. Erstelle eine einfache Middleware in src/middleware.ts:

import { Request, Response, NextFunction } from 'express';

export function loggerMiddleware(req: Request, res: Response, next: NextFunction) {
  console.log(`Request received: ${req.method} ${req.url}`);
  next();
}

Diese Middleware protokolliert jede eingehende Anfrage und ruft next() auf, um die Anfrage an die nächste Middleware oder die finale Route weiterzuleiten.

Schritt 5: Express.js integrieren

Express.js ist ein minimalistisches Webframework für Node.js, das zahlreiche nützliche Funktionen für das Erstellen von Webservern bereitstellt. Um es zu installieren, verwende folgenden Befehl:

npm install express
npm install --save-dev @types/express

Nachdem Express installiert wurde, kannst du eine Hauptdatei src/main.ts erstellen, um den Server zu konfigurieren:

import express from 'express';
import { loggerMiddleware } from './middleware';

const app = express();
app.use(loggerMiddleware);

app.get('/', (req, res) => {
  res.send('Hello NX!');
});

app.listen(3000, () => {
  console.log('Server läuft auf http://localhost:3000');
});

Hier wird eine Express-Anwendung eingerichtet, die auf Port 3000 läuft. Die zuvor erstellte Middleware wird in app.use() eingebunden, sodass alle eingehenden Anfragen zuerst durch sie geleitet werden.

Schritt 6: Build- und Start-Skripte anpassen

NX stellt eine Vielzahl von Befehlen zur Verwaltung von Builds und Deployments bereit. Um diese effizient zu nutzen, solltest du in der package.json folgende Skripte hinzufügen:

"scripts": {
  "build": "nx build middleware-service",
  "start": "nx serve middleware-service"
}

Mit dem Befehl nx build wird das Projekt kompiliert, während nx serve den Entwicklungsserver startet und Änderungen automatisch übernimmt.

Fazit

Mit diesen detaillierten Schritten hast du ein solides Middleware-Projekt mit NX, Node.js und TypeScript aufgesetzt. Dabei haben wir gesehen, dass:

• NX eine effiziente Möglichkeit zur Organisation eines Projekts bietet,
• TypeScript für Typensicherheit und eine bessere Code-Qualität sorgt,
• Express.js eine leistungsstarke, aber dennoch minimalistische API zum Erstellen eines Webservers bereitstellt,
• Middleware ein unverzichtbarer Bestandteil ist, um Anfragen zu verarbeiten, bevor sie zur Hauptlogik weitergeleitet werden.

Dieses grundlegende Setup kann einfach erweitert werden, um komplexere Anwendungsfälle wie Authentifizierung, Fehlerbehandlung und Datenbankanbindungen zu realisieren. Durch die Verwendung von Bindewörtern und erklärenden Absätzen wird dieser Beitrag noch leserfreundlicher und SEO-optimierter. Viel Erfolg beim Entwickeln deines eigenen Middleware-Projekts mit NX!