Fullstack Bootcamp Day 2 : Express.js; Routing
Published: 2022-02-09 22:15:04

_Before we start, I used Postman instead of Chrome to see how my code works because Postman converts to JSON.stringify() automatically_

Firstly, initialize Node.js by `npm init`. After that install express and nodemon. If you do not know how to do it, check from [this post](https://meliksahakdeniz.com/fullstack-bootcamp-day-2-part-1-expressjs-routing). Create an **src** folder for your source. Inside **src** create another folder called **data** and put some data in it. I took my data from [here](https://jsonplaceholder.typicode.com/). Save your data in .json files by the way.

Once you are done with that, create a `main-server.js` file in your root folder, so it is outside of your **src** folder. Should look like this 
![structure1.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644421456068/qHy_tVFvy.png)

Then, create a folder called **controllers** in your **src** folder. I will go with the albums first. Create a file called ***albums-controller.js*** and put this code there

```
const albums = require("../data/albums.json"); // imported album data 

// return all albums
function getAllAlbums() {
  return albums;
}

// export modules/ functions 
module.exports = { getAllAlbums };
```
My main-server.js file: 
```
const express = require("express"); // imported express

const app = express(); // created an app

// import controllers
const albumsController = require("./src/controllers/albums-controller");

app.get("/albums", (req, res) => {
  let albums = albumsController.getAllAlbums();
  res.send(albums);
});

// Started server at port at 5000
app.listen(5000);
```
The only difference prior to my previous codes is that I called a function `albumsController.getAllAlbums()` this function simply returns every single album. I will do the same thing for `comments.json` and `users.json`. 
How it looks now: 
```
app.get("/albums", (req, res) => {
  let albums = albumsController.getAllAlbums();
  res.send(albums);
});

app.get("/comments", (req, res) => {
  let albums = commentsController.getAllComments();
  res.send(albums);
});

app.get("/users", (req, res) => {
  let albums = usersController.getAllUsers();
  res.send(albums);
});
```
These are the results that you should be getting when a client enters these URLs
***For albums*** 

![postman albums.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644442444376/0vJmYxC5R.png)

Of course, you can scroll down to see everything. Now if you use a browser, the picture below is what you will see :(

![browser albums.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644442543031/sXicvuqu3.png)

Can I make it seem like the one on Postman? Yes, I can if I code more. I do not want that, so I use Postman. I did not know about Postman till this bootcamp and now I am glad I know it. Anyway, here is what ***comments*** should look like: 

![comments.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644442843994/PoEDtQRD3.png)

***And users***

![users.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644442999816/zS7lLXUWp.png)

Time to get endpoints with specific parameters. What the heck does that even mean? Look at the picture, please :)

![endpoint.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644443157814/0fIpmZdT2.png)
The part that I tried to highlight is an endpoint. Well... we can just say routes as well. But this time we do not want all of the users, we want only the one that has an id of seven. 

To achieve this, we need to use `req.params.something`. I hope you know `req` by now. It is the parameter that is called in the `.get()` method. It happens when the request is sent to the server and it is an object. `params` this is the one that catches parameters from the client (the user that uses the website). Time to see it in code, starting with albums again:
```
// "/:albumId" -> use this to get params from the client (the user) 
app.get("/albums/:albumId", (req, res) => {
  let album = albumsController.getAlbumById(req.params.albumId);
  res.send(album);
});
```
As you can see the code above calls the `getAlbumById()` function. It is located in the controllers folder, in albums-controller.js file. 

![file locatinon.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1644443954535/7vd4UOl4h.png)



Inside album-controller.js file:
```
const albums = require("../data/albums.json"); // imported album json file

// return all albums
function getAllAlbums() {
  return albums;
}

/* 
filter through albums (with `.filter()`) that matches with album.id
 
albumId is req.params.albumId
*/
function getAlbumById(albumId) {
  return albums.filter((album) => album.id == albumId);
}

// export modules/ functions
module.exports = { getAllAlbums, getAlbumById };
```

I did the same thing for all other controllers. 
*** Comments ***
```
const comments = require("../data/comments.json"); // imported album data

// return all comments
function getAllComments() {
  return comments;
}

/* 
filter through comments and return only the one that matches comment.id to commentId. commentId = req.params.commentId 
*/
function getCommentById(commentId) {
  return comments.filter((comment) => comment.id == commentId);
}

// export modules/ functions
module.exports = { getAllComments, getCommentById };
```

*** Users *** 
```
const users = require("../data/users.json"); // imported user data

// return all users
function getAllUsers() {
  return users;
}

// filter through users that matches with user.id and userId is req.params.userId
function getUserById(userId) {
  return users.filter((user) => user.id == userId);
}

// export modules/ functions
module.exports = { getAllUsers, getUserById };
```
There is not much left, so this is how final main-server looks like
```
const express = require("express"); // imported express

const app = express(); // created an app

// import controllers
const albumsController = require("./src/controllers/albums-controller");
const commentsController = require("./src/controllers/commentsController");
const usersController = require("./src/controllers/usersController");

// getting everything from albums, comments and users
app.get("/albums", (req, res) => {
  let albums = albumsController.getAllAlbums();
  res.send(albums);
});

app.get("/comments", (req, res) => {
  let albums = commentsController.getAllComments();
  res.send(albums);
});

app.get("/users", (req, res) => {
  let albums = usersController.getAllUsers();
  res.send(albums);
});

// get params from albums, comments and users
app.get("/albums/:albumId", (req, res) => {
  let album = albumsController.getAlbumById(req.params.albumId);
  res.send(album);
});

app.get("/comments/:commentId", (req, res) => {
  let comment = commentsController.getCommentById(req.params.commentId);
  res.send(comment);
});

app.get("/users/:userId", (req, res) => {
  let user = usersController.getUserById(req.params.userId);
  res.send(user);
});

// Started server at port at 5000
app.listen(5000);
```

That is it for today. Take care and keep coding