Challenge 01: Node Express Basics

challenge-01-node-and-express.md

For this challenge, you'll clone the starter repo, install express, setup a static server and create 2 endpoints to serve Notes. The starter repo contains a simple in-memory database with sample data and a client application to demonstrate the API.

Requirements

• Clone and setup the starter repo
• Install express and setup a start command
• Implement an Express static server
• Create 2 GET endpoints:
  • GET notes returns a list of notes. If a search term is provided it returns a filtered list, otherwise it returns a full list of notes.
  • GET a note by ID returns a specific note based on the ID provided.
• Install nodemon

Getting Started

To get started you'll need to clone the starter repo and create a new repo on Github to store your updates. You have done this a few times so we won't bore you with the details, but we have provided a few bullet-points below to help guide you.

Set up your Project repo

• Find the noteful-app-v1 pinned to your Cohort's GitHub Organziation

• Clone the noteful-app-v1 repo to your local development environment

• Rename the origin to upsteam using git remote rename origin upstream

• On GitHub create a new repo in your Cohort org on Github.

  • Name the new repo "[YOUR-NAME]-noteful-v1".
  • Do not initialize the repository with a README.

• On the next page find the section titled …or push an existing repository from the command line and run the two commands

• Verify your remotes are configured correctly. Enter git remote -v, you should see two remotes: one called origin pointing to your repo on GitHub and one named upstream pointing Thinkful's repo.

Install Express Package and setup a Start script

Back on your local development environment, run node server.js in your terminal, you'll see hello world!. It's not much, but it is a start.

The next step is to create a development branch, set up Express and configure a start script. Don't worry, we'll guide you.

• Create a development branch

In the terminal window

git checkout -b feature/express-server

• Enter npm install express. This will install the Express package and insert a dependency in your package.json file. Open the package.json file and you should see something like the following. Your version number might be different, that's OK.

  "dependencies": {
    "express": "^4.16.3"
  }

• In package.json, find the scripts: {...} property and add a start command like the following. The scripts are a convenient feature of NPM which allow you to store frequently used or difficult to remember commands and easily run them. Our start script is very simple, but you'll add more throughout the course.

  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Try starting the local dev server using npm start, you should see hello world! message in the console.

Create Express App and setup a Static Server

Your first challenge is to create an Express app that can serve static files. We'll help you get started. Below is code which requires and creates an Express app, then listens for requests on port 8080.

Add the following code to your server.js and then add a static file server that serves files from the public directory.

const express = require('express');

const data = require('./db/notes');

const app = express();

// ADD STATIC SERVER HERE

app.listen(8080, function () {
  console.info(`Server listening on ${this.address().port}`);
}).on('error', err => {
  console.error(err);
});

Stop (Ctrl + C) and restart (npm start) your server to see your changes.

Verify it is working by navigating to http://localhost:8080/. It should display the basic Noteful app. But there's a problem, open Chrome Dev Tools you'll see the following error:

GET http://localhost:8080/api/notes/ 404 (Not Found)

The error is because you have not created the GET /notes endpoint for the application. You'll fix that next, right after you commit your changes.

Commit your changes!

Create GET notes list endpoint

Your next challenge is to create the following 2 endpoints.

1. GET /api/notes returns a list of notes.
2. GET /api/notes/:id returns a specific note based on the ID provided.

We'll help you with the first endpoint, you'll need to create the second. The following block of code responds to a GET request to /api/notes and returns data in JSON format. Add this to your server.js right after the static server.

app.get('/api/notes', (req, res) => {
  res.json(data);
});

You'll need to stop (Ctrl + C) and restart (npm start) your server to see your changes.

Test the endpoint using Postman. It should return an array with the 10 notes which match /db/notes.json. Then check it with the sample app. The client should load and display the list of notes in the client.

The client app is already wired-up to listen for click events on the list of notes. If you click a note, the app will attempt to retrieve the details from the GET /api/notes/:id endpoint. But there's still a problem, open Chrome Dev Tools you'll see an error similar to the following.

api.js:17 GET http://localhost:8080/api/notes/1002 404 (Not Found)

You'll fix that next, right after you commit your changes.

Commit your changes!

Create GET note details endpoint

Your next challenge is to create an endpoint which responds to requests like GET /api/notes/1003 or GET /api/notes/1005 and returns note 1003 or 1005 respectively.

Hint: Use Array.find() to find the note in the array.

data.find(item => item.id === Number(id))

Remember, as you update your code you'll need to stop (Ctrl + C) and restart (npm start) your server to see your changes.

Verify your changes using Postman by requesting GET /api/notes/1003 and GET /api/notes/1005 and confirming the correct note is returned.

Commit your changes!

Using Nodemon

Stoping and restarting the server after every change is tedious. There is a better way. You can use nodemon to detect changes and automatically restart your server.

Install nodemon globally

npm install -g nodemon

To use nodemon run nodemon server.js command or add another NPM script command named dev like the following.

  ...
  "scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...

Now, you can run npm run dev which will execute nodemon and automatically restart the server when it detects changes.

NOTE: DO NOT change npm start to use nodemon "start": "nodemon server.js",. As you will see later, Heroku also uses npm start by default to run the server in Production. Nodemon was designed for development, not production. Using it in Production will cause issues.

Commit your changes!

Update the server to support a search

The Noteful App client is already wired-up to support search. The handleNoteSearchSubmit function creates an event handler function that builds a query object with a searchTerm property and passes it to api.search(). The api.search() method passes the object to $.ajax which transforms the object into a query-string like this: { searchTerm : cats } becomes ?searchTerm=cats

An example URL, which you can test in Postman, would look like this:

http://localhost:8080/api/notes?searchTerm=cats

Your final challenge is to update the app.get('/api/notes', ...) endpoint you created earlier to support the search feature.

• You will need to retrieve the searchTerm from the query-string on the req.query object.
• Once you have the searchTerm, you can search the array to find the proper results. There are several ways to accomplish this task. Might we suggest Array.filter() and String.includes().
• Finally, update res.json(data) to return the filtered list.

Commit your changes!

Merge and Push

Once you are happy with your solution. Checkout master and merge your feature branch and push your changes to Github.

Solutions

You can view an example solution and compare the differences between branches

• Solution: You can find the example solution in the solution/01-express branch in the upstream repo.
• Compare this solution branch to master