Add and Organize New Routes in an Express App
This lesson will cover how to add & organize routes in an express app.
We'll create an instance of express.Router() in its own routes/index.js file and use app.use(routes) to include those in our main application. The route handlers will live in their own file routes/notes.js.
The lesson will cover CRUD routes (create, read, update, delete) and go over some of the HTTP verbs supported by the express router.
We will be stubbing the following routes needed to power a note-taking application:
GET /notes
GET /notes/:id
POST /notes
POST /notes/:id
DELETE /notes/:id
The routes won't themselves do anything but return sample data. This approach is often helpful when building a new API, instead of building out the full functionality, first define the shape of the URLs and structure of the responses. Mock data can be used to simulate the response and ensure the routes are going to serve the needs of your application without having to build it all.
More on the verbs supported by HTTP here More on the express routes capabilities here
Jamund Ferguson: [0:00] As you're starting to see, already our index.js file is becoming pretty crowded. As we continue to add new routes, middleware, and more functionality to our app, we're going to need a better way for organizing our features. A common solution to that is putting routes in their own folder. At the top of your file, type import routes from "./routes/index.js".
[0:23] Go down and remove your existing routes, app.get/ and app.get/error, and replace that with app.use(routes). Save the file then go ahead and create the new folder routes, and inside of that, the index.js file.
[0:41] At the top of that file, type import express from "express". Then, const router = express.Router(). Instead of creating a new app instances as we did before, we're just creating a new instance of Router.
[0:56] Type router.get("/") and pass in a function once again and inside of that type res.send("hello routes"). At bottom of the file type export default router. Save this. Start the app. If we hit the router/ we should see hello routes.
[1:22] Now that we have the structure in place to create routes, let's create the ones we'll need for our project. Go ahead and delete the sample route that we've made and replace it with router.get("/notes"), router.post("/notes"), router.get("/notes/:id"), router.post("/notes/:id"), and router.delete("/notes/:id").
[1:47] The methods on the router here get, post, and delete all correspond with the standard verbs found in the HTTP protocol. You'll also notice, by the last four routes, I've commented create, read, update, and delete.
[2:00] These routes are commonly referred to as CRUD routes because they are applicable to almost any type of resource you might be building in API.
[2:08] Back at the top of the file type import * as notes from "./notes.js". We're not going to put all the route handlers in this file. It's common to create separate files for each path prefix you might have. In this case, we just have the one /notes.
[2:24] Let's go ahead and reference the route handlers that we'll soon be adding to that notes file. Notes.list, notes.create, for read, notes.read, notes.update and for this final one, we're going to call it notes.deleteNote because delete is a key word and we can run into some trouble with that. Close the file and let's open up routes/notes.js and start stubbing those out.
[2:47] We're not going to fully create these routes right now, we're just going to stub them out with basic responses so that we can test that our routes are working. Type export function list (req, res). For now, we'll just send back an empty array, res.json, empty array.
[3:03] Do the same for create, except for create instead of sending back JSON, we're not going to send anything other than the string "OK".
[3:13] For read, we're going to use res.json again to send back a basic note. In this case, it might have a title: "a sample title" and a body which will say something like "this is my note". Let's see for update and we can say res.send("OK").
[3:34] For delete note, res will also res.send("OK").
[3:41] We've got list, create, read, update and deleteNote, should match exactly what we've got over here, list, create, read, update and deleteNote. Start our server and let's hit those routes, so /notes, turns an empty array. That's good. We'll next do, notes/123 and it looks like we got the JSON we were expecting.
[4:10] Let's go ahead and add curl -X POST. We're going to now post to notes. That looks like it returned OK. You can see over in the log we got a 200 response. Let's do notes/123 which should also exist. Let's see if our delete works as well. It looks like all the routes are set up and working.