Adding the Post backend point in MEAN Stack

In our previous section, we used the middleware for adding some headers to solve the CORS error. So, being able to post new servers would be awesome, and for that, we need to allow request targeting /posts, but these requests should be post requests. We are using the middleware, which means all the requests on our server or reaching our server will be handled by that middleware, but we can narrow this down, though. We will add a post backend point for this in the following way:

1) In the first step, we will use the app.post() instead of using the app.use() function. This function will essentially attach a middleware that works like our last middleware. But this middleware will be triggered for incoming post requests. Similarly, we can use app.get(), app.put(), and so on for the get and put requests.

2) In this function, we will pass the post request to handle, and then we get our default function having request, response and next in the following way:

3) In this middleware, we will make some changes with the post data. We don't have a database yet, so we can't store them. For now, we can't store them, so we won't be able to process and fetch them, but we can check if getting the data to that route works. So, we will simply output the posts which we received with console.log in the following way:

Now, how do we get access to the posts sent with the request? Our request has always been an empty request, and we didn't add any data because we only handled get requests. Post request has a body, though, so they have data attached to them, and we need to extract that data.

Now, for extracting data, we need to install an extra package that adds a convenience middleware which we will plug into our express app. It will automatically extract incoming request data and add it as a new field to that request object to conveniently access it. We will use the following command to install the package:

This is a node express package that can be used as express middleware. Body parser do exactly what the name implies. It parses incoming requests bodies, extracts the requests data because that will be a stream of data and converting it to a data object.

4) Now, we will go back to our app.js file, and we import this new package here in the following way:

0

5) Now, we will use it by adding it as an extra middleware in front of our CORS headers and posts requests. We don't filter it for a specific path; we will do this for all incoming requests. We don't use the default function here. We will simply pass the body-parser and call the json method, which will return a valid express middleware for parsing JSON data in the following way:

6) Now, we will use the parsed body. In the api.post() method, we will extract our posts by accessing request body in the following way:

7) We still need to return a response because it is still an endpoint for an incoming request. To ensure that this request doesn't timeout on the client, we need to return a response. So, we will call response, and then we set a status code with the status function of 201. After that, we will call the json() to send back the json data in the following way:

8) Now, we don't need to send back data. We will send back a confirmation message in the following way:

Now, we have the setup, and to try it, we need to connect angular to this API endpoint. So, in the next section, we will learn how to connect angular to the API endpoint.