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.
- Clone and setup the starter repo
- Install
express
and setup astart
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
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.
-
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
toupsteam
usinggit 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 calledorigin
pointing to your repo on GitHub and one namedupstream
pointing Thinkful's repo.
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 yourpackage.json
file. Open thepackage.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 thescripts: {...}
property and add astart
command like the following. Thescripts
are a convenient feature of NPM which allow you to store frequently used or difficult to remember commands and easily run them. Ourstart
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.
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!
Your next challenge is to create the following 2 endpoints.
- GET
/api/notes
returns a list of notes. - 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!
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!
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. As you will see later, Heroku also uses"start": "nodemon server.js",
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!
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!
Once you are happy with your solution. Checkout master
and merge your feature branch and push your changes to Github.
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