Rendering Modes & API Routes

In dieser Sektion wollen wir die rendering/output modes ein wenig ausprobieren.

Adapter installieren

Installiere zunächst den Astro Adapter für NodeJS.

npm run astro add node

pnpm run astro add node

yarn run astro add node

Output mode konfigurieren

Konfiguriere Astro in der Config so, dass der Default ein serverseitiges Rendering ist.

Stelle sicher, dass du deinen Astro development Server nach der Installation & Konfiguration neu startest.

Rezeptsuche

Wir wollen eine kleine Rezeptsuche bauen, die rein serverseitig funktioniert. Für die Suche nach Rezepten nutzen wir eine bereits vorhandene API:

https://dummyjson.com/recipes/search?q=Margherita

Der Nutzer soll initial nur ein Formular mit Suchfeld sehen, wenn er die Seite besucht.
- Du kannst für das Formular das bereits fertige HTML verwenden.
- Das Layout kannst du ebenfalls als Basis verwenden.
Wir das Formular per GET an die Astro Page abgeschickt, soll die Astro Page die API aufrufen und die gefunden Rezepte auflisten. Nutze die Astro.request API bzw. die URL API, um den query Parameter namens query aus der Request URL auszulesen.
- Wenn Du magst, kannst du die TypeScript interfaces verwenden, um den Response Body typesafe zu machen.
Für die Anzeige eines einzelnen Rezeptes soll eine neue Astro Component zuständig sein. Zeige den Namen, die Rezeptschritte (instructions) und die Zutaten (ingredients) in der Component an. Wenn Du noch Zeit haben solltest, kannst du auch noch das Bild (image) anzeigen.

Appendix

HTML Form

<form action="" method="GET">
  <label for="query">Rezeptsuche:</label>
  <input type="text" id="query" name="query">
  <button type="submit">Suchen</button>
</form>

Layout

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Rezeptsuche</title>
  </head>
  <body>
    <slot />
  </body>
</html>

TypeScript Interfaces

export interface RecipesSearchResponse {
  recipes: Recipe[]
}

export interface Recipe {
  id: number
  name: string
  ingredients: string[]
  instructions: string[]
  prepTimeMinutes: number
  cookTimeMinutes: number
  servings: number
  difficulty: string
  cuisine: string
  caloriesPerServing: number
  tags: string[]
  userId: number
  image: string
  rating: number
  reviewCount: number
  mealType: string[]
}