HATEOAS concept overview in Express - Mini Project: Build & Apply

HATEOAS Concept Overview with Express

📖 Scenario: You are building a simple Express server that provides information about books. You want to show how to include links in the API responses to guide clients on what actions they can take next. This is called HATEOAS, which helps clients discover API features dynamically.

🎯 Goal: Create an Express server that returns a list of books with HATEOAS links for each book. The links will show how to get details of a book and how to update it.

📋 What You'll Learn

Create an array called books with three book objects, each having id and title properties.

Create a variable called baseUrl set to "http://localhost:3000/books".

Create an Express GET route /books that returns the books array with HATEOAS links for each book.

Add a final line to start the Express server listening on port 3000.

💡 Why This Matters

🌍 Real World

APIs that guide clients with links help apps discover what actions are possible without guessing URLs. This makes APIs easier to use and evolve.

💼 Career

Understanding HATEOAS is useful for backend developers building RESTful APIs that are user-friendly and follow modern best practices.

1

DATA SETUP: Create the books array

Create an array called books with these exact objects: { id: 1, title: "The Hobbit" }, { id: 2, title: "1984" }, and { id: 3, title: "Pride and Prejudice" }.

Express

const express = require('express');
const app = express();

// Create the books array with 3 book objects
// Your code here

Need a hint?

Use const books = [ ... ] with three objects inside.

2

CONFIGURATION: Define the base URL

Create a variable called baseUrl and set it to the string "http://localhost:3000/books".

Express

const express = require('express');
const app = express();

const books = [
  { id: 1, title: "The Hobbit" },
  { id: 2, title: "1984" },
  { id: 3, title: "Pride and Prejudice" }
];

// Define the baseUrl string
// Your code here

Need a hint?

Use const baseUrl = "http://localhost:3000/books";

3

CORE LOGIC: Create the GET /books route with HATEOAS links

Create an Express GET route at /books that sends a JSON response. The response should be the books array where each book object includes a links array. Each links array must have two objects: one with rel: "self" and href set to the book's detail URL using baseUrl and the book's id, and another with rel: "update" and href set to the book's update URL similarly.

Express

const express = require('express');
const app = express();

const books = [
  { id: 1, title: "The Hobbit" },
  { id: 2, title: "1984" },
  { id: 3, title: "Pride and Prejudice" }
];

const baseUrl = "http://localhost:3000/books";

// Create GET /books route with HATEOAS links
// Your code here

Need a hint?

Use app.get('/books', (req, res) => { ... }) and inside map each book to add a links array with the two link objects.

4

COMPLETION: Start the Express server on port 3000

Add a line to start the Express server listening on port 3000 using app.listen.

Express

const express = require('express');
const app = express();

const books = [
  { id: 1, title: "The Hobbit" },
  { id: 2, title: "1984" },
  { id: 3, title: "Pride and Prejudice" }
];

const baseUrl = "http://localhost:3000/books";

app.get('/books', (req, res) => {
  const booksWithLinks = books.map(book => ({
    ...book,
    links: [
      { rel: "self", href: `${baseUrl}/${book.id}` },
      { rel: "update", href: `${baseUrl}/${book.id}` }
    ]
  }));
  res.json(booksWithLinks);
});

// Start the server on port 3000
// Your code here

Need a hint?

Use app.listen(3000); to start the server.