GET /movies should return all the movies

In server.js, create a GET /movies endpoint that returns all the movies (see below for some sample data).

app.get("/movies", (req, res) => {
  res.send(moviesData);
});

const movies = [
  {
    id: 1,
    title: "The Godfather",
    certificate: "18",
    yearOfRelease: 1972,
    director: "Francis Ford Coppola",
  },
  {
    id: 2,
    title: "The Shawshank Redemption",
    certificate: "15",
    yearOfRelease: 1994,
    director: "Frank Darabont",
  },
  {
    id: 3,
    title: "Schindler's List",
    certificate: "15",
    yearOfRelease: 1993,
    director: "Steven Spielberg",
  },
];

🧪 Run and test

1. npm run dev
2. Open Postman
3. Make a GET request to http://localhost:3000/movies

GET /movies/:movieId should return a single movie (that matches the passed movieId)

Sometimes, we do not want to list all the information in one request, maybe we only want to get the information related to a single movie. Imagine a page to display the details of one movie. We’d call the server, get all movies, then filter the one we need client-side. It would be more effective to tell the server to just return the one movie we are interested in.

We will now add a new endpoint to return only a single movie GET /movies/:movieId. In this case, movieId will tell us what movie we can return. The call will be GET /movies/10 and that will return the movie with that has movieId: "10".

This endpoint has something different. The endpoint /movies/:movieId has a dynamic part. The movieId will vary depending on what the client sends.

In server.js, create a GET /movies/:movieId endpoint that returns a single movie. The movieId will be passed as a parameter in the URL.

app.get("/movies/:movieId", (req, res) => {
  const movieId = req.params.movieId;
  const movie = moviesData.find((movie) => movie.movieId === movieId);
  res.send(movie);
});

🧪 Run and test

1. Save your changes
2. Make a GET request to http://localhost:3000/movies/10

CHALLENGE 1:

Return the old version of the object you updated as well as the new value in the response

CHALLENGE 2:

Validate the request body to make sure the ID can’t be updated and that users can’t add additional fields

CHALLENGE 3:

Persist your changes to file so that you are able to return your updated values even after you restart the server

POST /movies should save a new movie

In order for our server-side to receive and use the data sent by the client, we will need to install and use a middleware.

The JSON middleware makes it easy for our route handlers to read JSON data from the request. If the Content-Type request header indicates that the request body contains JSON data then the middleware calls JSON.parse to convert the request body into a JavaScript data structure.

To register the JSON middleware, add the following to the server code:

app.use(express.json()); // before our routes definition

In server.js, create a POST /movies endpoint that saves a new movie. The movie will be passed as a JSON object in the request body.

app.post("/movies", (req, res) => {
  const newMovie = req.body;
  moviesData.push(newMovie);
  res.send("movie added successfully!");
});

{
  "id": "13",
  "title": "Boyhood",
  "certificate": "15",
  "yearOfRelease": 2014,
  "director": "Richard Linklater"
}

PUT /movies/:movieId should update a movie (that matches the passed movieId)

This means that PUT /movies/2 should update an movie with the id 2 and return 200 with JSON { success: true } to the user.

The code should look something like this:

app.put("/movies/:movieID", (req, res) => {
  console.log("PUT /movies route");
});

Remember, you have got to update the movie, not add it to the list.

Test that your API works by updating one of the movies.

You will need to create an account with Postman to complete this task. Follow along with the video Writing Tests in Postman with Examples.

📮 Interactive Postman Workspace

The first thing we need to do is build our server. You will often need to build a server when writing back-end code. You can write a server in plain JavaScript, but Express is simpler to work with.

1. Create a server.js file

Let’s build our server! In your project, create a new file called server.js. This is where all our server code is going to live.

touch server.js

2. import the express library

We just installed Express, but we need to make sure it is included in this file specifically so we can use its methods. In Node.js, when you want to use Express in another file, you must import it.

To require Express, write the following inside server.js:

import express from "express";

3. Initialise the server

To initialise our server, we need to call the express() function. This will create an Express application for us to work with.

Add the second line of code to your server.js file:

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

4. Start ’listening’ for potential requests

One more step left, we need to set a port for our server to listen to. Think of a port as a door number: any requests that come to the server will come via that door. Setting a port will allow us to find where our server is running.

We use the app.listen method to do this. This method takes two arguments: a port and a callback function telling it what to do once the server is running.

Need clarification? Read more about the app.listen method in the Express documentation.

We’re going to run our server on port 3000, and add a console.log in the callback function. Update your server.js file, calling the app.listen method:

5. Switch the server on!

You’ve built your server, but it isn’t running yet. We need to run a command in the terminal to do this. We are going to use the node keyword to run the server file.

Type the following command in your terminal:

node server.js

If you see this, congratulations! You have built yourself a server!

6. npm script

To exit the running the server, type ctrl + c. Instead of running the server with node server.js everytime, we can create an alias for it in package.json.

Under the scripts property, add start: node server.js. We can now run our server using npm start which will be an alias (a shortcut) to node server.js.

Go to the terminal and type npm start and make sure that the server still runs.

Now that we’ve built the server, we need to communicate with it. We are going to control the server with handler functions.

What is a handler function?

When a request reaches the server, we need a way of responding to it. In comes the handler function. The handler function receives requests and handles them, hence the name.

The handler function is always called with a request and response object. The response object is what gets sent back to the client. It contains the information that gets displayed in the web page. You can decide what to send back in your response.

What does a handler function look like in Express?

The get() method is one of the methods used to define a handler function in Express. It takes two parameters: the endpoint at which to trigger an action, and the handler function that tells it exactly what to do.

Here’s an example:

// req is the Request object, res is the Response object
// (these are variable names, they can be anything but it's a convention to call them req and res)
app.get("/", (req, res) => {
  res.send("Hello World!");
});

Here, we are telling our server to respond with “Hello World!” when someone tries to access the webpage.

1. Create your own handler function

Add a handler handler function to send back a message to the client. To do that, use the Express send() method. This will update the response object with the message.

Update your handler function:

console.log the request object inside the handler function.

1. Restart your server
2. Send the request again with Postman
3. Go to your terminal to see what it looks like.

You should see a lot of data come through!

2. Check it out in Postman

Quit your server in the terminal with ctrl + c. Then restart it to run your new changes.

node server.js

1. Open Postman
2. Send a GET request to http://localhost:3000.

If you see your message in Postman, congratulations! You just sent your first response from the server.

Checkpoint

Do you understand all these terms? You should be able to see examples of them in Postman

• Client
• Server
• Front-end
• Back-end
• Full stack developer
• Request
• Response
• HTTP
• HTTP Response Codes
• HTTP Request Methods (or Verbs)

We will build a CRUD API. CRUD stands for Create, Retrieve, Update, Delete. If you think about it, this is what most applications do:

✨ Create some “resources” 🐕 Retrieve them (GET them) 📨 Update them 🗑️ Delete them

🎯 Goal

Our API will manage movie data. It will:

✨ Create a new movie, 🐕 Retrieve a list of movies or a single movie

We will build these endpoints:

1. GET /movies should return all the movies
2. GET /movies/:movieId should return a single movie (that matches the passed movieId)
3. POST /movies should save a new movie

👉 Fork the Node-Starter-Kit repo and clone it to your computer. Then run npm install to install the dependencies.

We are building a CRUD API. CRUD stands for Create, Retrieve, Update, Delete. If you think about it, this is what most applications do:

✨ Create some “resources” 🐕 Retrieve them (GET them) 📨 Update them 🗑️ Delete them

🎯 Goal

Our API will manage movie data. It will:

✨ Create a new movie, 🐕 Retrieve a list of movies or a single movie 📨 Update a movie

We will build this endpoint:

1. PUT /movies/:movieId should update a movie (that matches the passed movieId)

👉 You should already have a project using the Node-Starter-Kit. If not, do last week’s prep before you go on.

Install Postman

Troubleshooting

If you get:

error while loading shared libraries: libgconf-2.so.4: cannot open shared object file: No such file or directory

You may first need to run this in the terminal:

sudo apt-get install -y libgconf-2-4

If you get a blank screen when you open Postman, try logging out of the app and choosing “Use the Lightweight API Client” instead.

For now you will only need the Lightweight API Client.

Alternatives

If you have an old computer you might find Postman being very slow or becoming unresponsive. In this case you could try:

• Thunder Client: this VS Code extension has a similar user interface to Postman
• Hoppscotch: this web app runs in the browser.

We have already learned about the Node.js runtime environment and how it allows us to run JavaScript code outside of the browser. We have also learned about the Node Package Manager (npm) and how it allows us to download and use other people’s code in our own projects.

Now we will learn about Express, a Node.js framework that helps us to build web servers and APIs.

💁🏼‍♂️ What is a web server?

A web server is software that accepts requests for web pages, assets, APIs, and other network resources from client programs like web browsers. When a browser requests a web page, the server finds the desired content and returns the appropriate response.

🗺️ Explore the web server

Let’s investigate a web server made in Node.

🆕 Create a new repo

2. Click Create repository

♊ Clone your repo

Clone your newly made repo to your local machine. You are going to be working in this folder for the rest of the study session.

Initialize your project

Start your README

So, what is a query parameter?

A query string is the part of a URL (Uniform Resource Locater) after the question mark (?). It is meant to send small amounts of information to the server via the url. This information is usually used as parameters to query a database, or maybe to filter results.

Here is an example of a URL with query strings attached: https://stackabuse.com/?page=2&limit=3

❓ Detect Query Parameters

Try sending different responses at different endpoints. Remember the app.get() method? To set up routing in your server, we need to repeat this method with different endpoints.

app.get("/", (req, res) => {
  let searchQuery = req.query.search;
  res.send("Hello World! You searched for " + searchQuery);
});

Test this endpoint with query parameters: http://localhost:3000?search=hello

Now your turn!

❓❓ Multiple Query Parameters

What if we want to detect and read multiple parameters? If we use a URL from earlier as an example, here is how we would send multiple query parameters:

https://api.sunrise-sunset.org/json?lat=51.5311&lng=0.0481

Here we have one parameter called “lat” and another “lng”. The first parameter starts with ? All subsequent parameters start with &.

Here is how we would do that in Node:

app.get("/json", (req, res) => {
  let lat = req.query.lat;
  let lng = req.query.lng;
  res.send(`You searched for Lat: ${lat} and Lng: ${lng}`);
});

At the moment our server only does one thing. When it receives a request from the / endpoint, it sends back the same response: “Yay Node!”.

However by making use of endpoints, we can make the server send different responses for different requests. This concept is called routing.

What is an endpoint?

An endpoint is the part of the URL which comes after /. For example: /chocolate is the “chocolate” endpoint. It’s the URL to which you send a request. It’s the end point of the resource path.

What is a URL?

Create your own endpoints and send different responses

We’re going to try sending different responses at different endpoints. Remember the app.get() method? To set up routing in your server, we need to repeat this method with different endpoints.

For example:

app.get("/", function (req, res) {
  res.send("Hello World!");
});

app.get("/chocolate", function (req, res) {
  res.send("Mm chocolate :O");
});

Let’s try out using Render to host our Node.js application. There are many platforms that you can use to host your Node.js application, but we’re using Render right now because it’s free. If your cohort has found a better option, please use that, and contribute your setup guide back to the curriculum.