HTTP and Server-side API Endpoints

Scheduled

Planned for Lesson 15 – Delivered on TBD

Learning Outcome Guide

At the end of this class, you should be able to…

• Explain how REST-style APIs support front-end applications and data-driven UI.
• Set up and run JSON Server to simulate a REST API from a local JSON file.
• Perform GET, POST, PUT/PATCH, and DELETE requests using a REST client and the browser, and interpret responses. (Recommend REST Client VS Code extension)

Additional Notes: Focus on front-end consumption of APIs. Avoid deep backend topics; JSON Server stands in as the API. Encourage students to inspect Network tab and verify request/response cycles.

---

Coding Demo

In-Class Demo Jan 2026 term

To run the coding demo, you need to have your Student Workbook open in Visual Studio Code.

1. Open the terminal window and paste in the following.

   Run from the root of your repository

   pnpm dlx tiged --disable-cache --force DG-InClass/SDEV-1150-A04-Jan-2026/sk/lesson-15 ./src/lesson-15

2. Walk through the steps in the ReadMe.md of the new lesson.

Overview

In this exercise, you will explore how front-end applications communicate with backend services using RESTful APIs. You’ll simulate a REST API locally with JSON Server, and send requests using both a browser and a REST client (such as the VS Code REST Client extension). The focus is on understanding how APIs structure and return data and not on writing JavaScript code.

Setup instructions

1. Create the project directory and initialize npm

mkdir lesson-15
cd lesson-15
npm init -y

This will create a package.json file with default values.

2. Install JSON server

npm install json-server

The json-server package allows you to create a fully functional REST API from a simple JSON file.

3. Create the database file

Create a new file named db.json in the project directory with the following contents:

{
  "books": [
    { "id": "1", "title": "The Legend of Hyrule", "author": "Zelda", "year": 2020, "genre": "Fantasy" },
    { "id": "2", "title": "The Hero's Journey", "author": "Link", "year": 2022, "genre": "Adventure" },
    { "id": "3", "title": "Chronicles of Ganon", "author": "Ganondorf", "year": 2021, "genre": "Epic" }
  ]
}

4. Create a script and start the server

Add a api-server script to the package.json file:

...
"scripts": {
  "api-server": "json-server --watch db.json --port 3000"
}
...

Run the script to start the API server:

npm run api-server

Once running, you’ll see available routes listed in the terminal. Test them in your browser:

• http://localhost:3000/books
• http://localhost:3000/books/1

Using browser and DevTools

The browser automatically sends GET requests when navigating to a URL.
Use the Network tab in DevTools to inspect:

• Request method
• URL and headers
• Response status code (e.g., 200 OK)
• JSON response body

Try reloading the page and observing what happens.

Using the REST Client (VS Code Extension)

1. Install the REST Client VS Code extension.
2. Create a new file named requests.http in the project directory.
3. Add the following sample requests:

### GET all books
GET http://localhost:3000/books
Accept: application/json

### POST new book
POST http://localhost:3000/books
Content-Type: application/json

{
  "title": "Tales of the Triforce",
  "author": "Impa",
  "year": 2023,
  "genre": "Lore"
}

### PATCH update a book
PATCH http://localhost:3000/books/2
Content-Type: application/json

{
  "author": "Link, the Hero of Time"
}

### DELETE a book
DELETE http://localhost:3000/books/3

4. Ensure that the server is still running, and if not, start the server and click the Send Request command in VS Code above any request to execute it (see image below).

5. View responses (status code, body, headers) directly in VS Code.

HTTP status codes

Code	Meaning	When It Appears
200	OK	Successful GET, PUT, PATCH
201	Created	Successful POST
400	Bad Request	Invalid JSON format or missing fields
404	Not Found	Resource does not exist
500	Server Error	Internal JSON Server issue

Shutdown the server

You can shutdown the json-server using ctrl + c

ctrl + c

Push to your GitHub workbook repo

Once you’re done making your own custom updates to the project, stage your files, commit your work, and push to the remote repository.

1. Open a terminal in VS Code
2. Stage all updated and created files:

git add .

3. Commit the changes:

git commit -m 'Lesson 15 Example'

4. Push your changes to the remote workbook repository:

git push origin main