In this lesson, we'll learn about routing in Express and how to build API endpoints. We'll also take a look at queries and parameters and discuss HTTP methods and their use.
- Build API Endpoints
- Learn about query and parameters
- Define which HTTP methods perform which action
Fork
AndClone
this repositorynpm i
and install our dependencies- Have Insomnia ready to go
const express = require('express')
const PORT = process.env.PORT || 3001
const app = express()
// Your Code Here
// End Your Code Here
app.listen(PORT, () => console.log(`Server Listening on port: ${PORT}`))
We are importing the express
package by using javascripts require
method. The PORT
variable will be a port number stored in our environment or
3001. Storing the express library in a variable called app
. Using the listen method to have our server listen on the specified port.
If we console.log(app)
, we'll see an object with values that are functions from Express. If you look closely you'll notice a couple of keys that may look familiar.
get: [Function (anonymous)],
post: [Function (anonymous)],
put: [Function (anonymous)],
delete: [Function (anonymous)]
Express provides functions that can handle http
requests out of the box. We'll see them in action in the next step.
Each of the functions shown above require a string for the first argument and a function for the second. The first argument is a string representing the url
or endpoint
that we want to make a request to. The second argument, which is a function provides a way to handle some sort of action in each route. Let's put them to use.
To define a route, we are going to leverage our app
variable with dot notation to gain access to the functions inside of the Express object.
Add the following code to your app.js
:
app.get('/hello', (request, response) => {
console.log("You're in the /hello route handler!")
response.send('Howdy')
})
Congrats, you've just written your first Express Route! Yeehaw!
We are using our app
variable to access a function called get
. This function recieves 2 parameters/arguments, a string for an endpoint and a function to handle a request.
Our function to handle the request is provided 4 arguments from Express, request
, response
, error
and next
. For the time being we will only be using request
and response
parameters.
More on those here:
In our example above we set the endpoint to /hello
and provide a function that accepts a request
and response
object.
The request
object is provided by express and contains some useful information that we can use to look for specific information, more on that later.
The response
object has built in methods that allow us to send whoever was making a request to our server some type of information. In our example above we simply send back a string of Howdy
using the send()
method.
Let's create another route, this time to recieve a post
request. Remember a post
request is typically used to send a server some type of information, for example a form or possibly a file.
Add the following code to your app:
app.post('/hello', (request, response) => {
console.log(`You've sent a post request to the /hello endpoint.`)
response.send({ msg: 'Thanks for the post!' })
})
We've successfully sent a post
request to our server!
In this example we passed an object to response.send()
. Express has some built in tools that handle any kind of data that can be sent back as a string and sends it in the correct format. Sending information back in an object is a common practice when building RESTful API's.
Take note of the endpoint we've used here. It's exactly the same as the get
request we made earlier. Express allows us to do this because the methods used for that endpoint are different. However, this does not apply if the route methods are the same.
For example if we were to add another route to our server with the same endpoint:
Try this code in your app and add it below our first /hello
endpoint.
app.get('/hello', (request, response) => {
console.log("You're in the second /hello route handler")
response.send('Howdy from the second handler.')
})
Express will default to the first one it finds. You'll always get back howdy
. Keep that in mind when defining your endpoints!
In Express, we can create dynamic endpoints by using the in built in request
object.
Example:
app.get('/message/:id', (request, response) => {
console.log(`Getting a message with the id of ${request.params.id}`)
response.send({ msg: `Message with an id of ${request.params.id} found` })
})
In our example above, we are defining a /message
endpoint, however, we also add in /:id
. This is what's known as a request parameter. This parameter dynamically changes whenever some type of information is passed in. We access this parameter by using request.params.{yourParamName}
inside of our function.
You can name your parameter anything, but it should always be relevant to the kind of information that you are looking for.
Example:
app.get('/find', (request, response) => {
console.log(
`Finding someone with a name of ${request.query.myName} and an age of ${request.query.myAge}`
)
response.send({
msg: `${request.query.myName} is ${request.query.myAge} years old.`
})
})
In this example we are defining a /find
endpoint. This endpoint utilizes the request
object and gets information from the query
object that resides inside of it.
Query's function in different way from params
because we dont set any placeholders ahead of time. Instead this information is given when constructing the endpoint:
localhost:3001/find?myName=Bob&myAge=23
We start a query with the ?
operator and set a variable that will hold some type of value. If any additional information is needed we use the &
operator to append extra variables and values.
-
Create a
GET
endpoint/dogs
and send a string with your favorite dog breed. -
Create a
GET
endpoint/cats/:catName
and send the cat name you provide back in an object. -
Create a
POST
endpoint/towns
and send your hometown back in an object. -
Create a
PUT
endpoint/profile/update/:username
, and send back a string that reads:User profile with the username of {Whatever username you chose} was updated
. -
Create a
DELETE
endpoint/tacos
with the query parameters oftype
andtacoId
, and send back an object withI deleted the {your taco type} with an id of {your taco id}
.
We learned about HTTP methods and how to access them in Express to perform different tasks. We also learned about queries and parameters in URLs. It's easy to see how we can leverage user input via queries and parameters to perform different tasks with our back-end!