Building Servers with Express

By the end of this lesson, you should be able to build a simple server with the Express framework for Node.js.

Core Learning Objective

• Create an application server using NodeJS and Express

Sub-Objectives

• Create an Express server that listens on a specified port
• Make requests to that server using Postman
• Create routes using different paths and HTTP verbs
• Identify and build middleware
• Parse information sent in the request body

Installation

1. Fork & Clone
2. npm install
3. npm run dev

Then, go to http://localhost:5000/ and you should see a message.

Instructions & Guiding Questions

• Take a look at the .gitignore file.

• Question: Why do you think node_modules/ is included in there?

• Your Answer:

---

• Take a look at the package.json file.

• Question: Take a minute to look through the installed packages and describe the purpose of each one. Don't just copy and paste from something online!

• Your Answer:

---

• Try going to http://localhost:5000/notfound

• Question: Why do we get a response when we go to / but not /notfound?

• Your Answer:

---

• By default, browsers make GET requests when you go to a URL. Use Postman to make a similar GET request.

---

• In Postman, go to the Headers tab that is on the same level as the response Body. These are headers that were returned by your server.

• Question: What are headers? What values do you recognize?

• Your Answer:

---

• Add the following line above the res.json() line in your app.js file; then, make the request again.

  console.log(req.headers)

• Question: Where can you find this console.log() statement? How can you change the headers that are sent in Postman?

• Your Answer:

---

• Add the following line above the res.json() line in your app.js file; then, make a request again but this time change the URL to the following: http://localhost:5000?course=javascript

  console.log(req.query)

• Question: What are query parameters? Try going to a couple of your favorite websites and paste an example of query parameters being used.

• Your Answer:

---

• Before all of your routes, add the following:

  app.use((req, res, next) => {
    console.log('In the server!')
    next()
  })

• Question: When does app.use() get called?

• Your Answer:

---

• Take a moment to observe the basic structure of a route in Express.

  app.get('/', (req, res, next) => {
    console.log(req.query)
    res.json({
      message: 'Hello, Express!'
    })
  })

• Question: What type of thing is app and what is its purpose?

• Your Answer:

• Question: What type of thing is app.get() and what is its purpose?

• Your Answer:

• Question: What type of thing is / and what is its purpose?

• Your Answer:

• Question: What type of thing is req and what does it represent in the callback?

• Your Answer:

• Question: What type of thing is res and what does it represent in the callback?

• Your Answer:

• Question: What type of thing is next and what does it represent in the callback?

• Your Answer:

• Question: Instead of a GET request, lets say we want to listen in for a POST request. What do you think you needs to change?

• Your Answer:

• Question: Right now all of our requests will return a "Status Code" of 200. Define what a status code is and research how you could change it.

• Your Answer:

---

• Add the following route to your application; then, make a request again but this time change the URL to the following, making sure to replace <your-name with your acutal name: http://localhost:5000/my/name/is/<your-name>.

  app.get('/my/name/is/:name', (req, res, next) => {
    console.log(req.params)
    res.json({
      message: `Hello, ${req.params.name}!`
    })
  })

• Question: What is req.params? What else will you need to change if you change the path to /my/name/is/:username?

• Your Answer:

---

• Create three new routes as follows, testing each one as you go:

  GET /ping
  -> Status Code: 200
  -> Response Body: { message: 'pong' }
  
  POST /message?content=hello
  -> Status Code: 201
  -> Response Body: { message: 'Message received!', content: 'hello' }
  
  DELETE /messages/4
  -> Status Code: 200
  -> Response Body: { message: 'Deleted message 4' }
  

---

• Earlier we added the following code. Try moving it between two routes you just created and test each route.

  app.use((req, res, next) => {
    console.log('In the server!')
    next()
  })

• Question: The above can be described as middleware. Describe what middleware is in your own words and how it differs from building a route.

• Your Answer:

---

• Take a moment to read through the following code that is already in app.js. If you need, take a look at the morgan and body-parser packages on NPM:

  if (NODE_ENV === 'development') {
    app.use(require('morgan')('dev'))
  }
  app.use(require('body-parser').json())

• Question: Describe the purpose of both morgan and body-parser. Why do you think morgan is only being run when the application is run in development mode?

• Your Answer:

---

• Update one of the POST routes you've created by adding the following code before the response is set. Then, try sending a request body using Postman to that route.

  console.log(req.body)

• Question: Try commenting out body-parser in your application. What happens and why?

• Your Answer:

---

• Visit the Exercise: Express repository on GitHub. Follow the setup instructions and open the code in a code editor. Then, answer the following questions:

• Question: Describe what is happening on the following line. What is the shortid package and what is it being used for?

  const { generate: generateId } = require('shortid')

• Your Answer:

• Question: What routes are currently available to you as part of this application?

• Your Answer:

• Question: Look for helpers.validate in the app.js file. What is this and how does it work?

• Your Answer:

• Question: Try creating a new vegetable. Then, try restarting your server. What happens to the data you posted and why?

• Your Answer:

• Question: Take a look at the last two app.use() methods at the end of the file. Describe how both work and what err is refers to.

• Your Answer:

• Question: Take a look at the package.json file. What is standardjs and what will it do for you?

• Your Answer:

Resources

• Postman
• Express
• morgan
• body-parser