DEV Community: Viraj Nirbhavane

Controllers

Viraj Nirbhavane — Wed, 16 Mar 2022 11:14:29 +0000

A GET request route set up in a seperate route File instead of the server.js file.

/** greetingRoute.js */ 
...
router.get('/', (req,res) => {
   res.status(200).json({ message: "Greetings!"});
});
...

We could set up routes like this, they aren't doing much currently but they are set up. We could proceed to add our functionality in the body of these callback functions but it's much better practice to create a controller and have your functions there.

So, in the backend folder that we had, create a controllers folder and add a file for the corresponding controller. Lets say, greetingController.js

Here, we can create some functions. For instance, lets have a getGreeting function

/** greetingController.js */

const getGreeting = (req,res) => {
    res.status(200).json({ message: "Greetings!"});
}

module.exports = {
    getGreeting,
}

We need to export it in order to use it in our routes file.
The modules.exports is a Object here because we might wanna add more functions to it later as routes grow.

So, now in our routes file we need to require it.

/** greetingRoute.js */
...
const { getGreeting } = require('../controllers/greetingController.js');
...

router.get('/', getGreeting);

...

Notice how we replaced the callback function body with the getGreeting function that we pulled in via require above.
And it should still work!

You wanna do these with rest of the routes as well and clear the clutter from the routes file as well.

And when you are done with all the routes, you can chain same routes but different request types together, like so

...

router.route('/').get(getGreeting).post(setGreeting);
router.route('/:id').update(updateEntity).delete(deleteEntity);

...
module.exports = router;

That's it for this one. Leave a like!

Routes

Viraj Nirbhavane — Tue, 15 Mar 2022 10:32:10 +0000

A route is a code that represents an HTTP action, (GET, POST, PUT, DELETE). It has a URL endpoint, and a function that is used to handle when that endpoint is accessed.

We use postman to test these endpoints. Accessing these endpoints prior to setting up the code will return a 404 NOT FOUND - a html response.

Lets look at the code for a GET request at greeting endpoint.
We call the get method on the app object, passing in two arguments

The Endpoint.
The function to handle this endpoint. It takes in a request and a response object as parameters.

app.get('/api/greeting', (req, res) => {
    res.send('Hello there, Welcome!')
} )

Now, if we access the route, we get a 200 OK status and the String "Hello there...." is returned.

Usually we are gonna return JSON data. So the above code could be changed to

app.get('/api/greeting', (req, res) => {
    res.status(200).json({message:'Hello there, Welcome!'})
} )

We also set the status, although not necessary. Now we respond with a JSON object and the content type of the response changes from html to application/json. Even though we didn't add quotes on the key "message", it get parsed into JSON.

Now we don't wanna clutter our server.js file with all these routes. So we clean it up.

In the backend folder, we create a folder called 'routes' and in it we create file greetRoutes.js. So basically each resource in API will have it's own route file.

Folder structure : backend/routes/greetRoutes.js

Now to use the express router, we are gonna first bring the express into this file.

#greetRoutes.js

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
    res.status(200).json({message:'Hello there, Welcome!'})
} )

module.exports = router

and inside server.js

#server.js
....
app.use('/api/greeting', require('./routes/greetRoutes.js');
...

So now, if we hit /api/greeting, it's gonna look into the Route file, and all we needed was a / because /api/greeting is already specified.

Similarly, we can create other routes for POST, PUT, DELETE.
Some of them will require a :id in the endpoint part so that they access the right data point. router.put('/:id', (req,res) => {....})

Next up, Controllers. Again to clear the clutter!

Express Server

Viraj Nirbhavane — Tue, 15 Mar 2022 07:29:19 +0000

Prerequisites : Node, npm

Steps:

npm init in the root folder. Fill up the details and it will generate a package.json for you. You may change the entry point to server.js, optional. Create a folder "backend" and inside it a file "server.js"
Edit the package.json file and add in the scripts object, the following:
"start": "node backend/server.js", "server": "nodemon backend/server.js"
Install the dependencies:
npm i express dotenv
npm i -D nodemon -D implies that it is a devDependency.

Lets Edit the server.js file now to spin up a server.

Bring in express and other stuff by requiring it at the top.
dotenv is used so that we can use Environment variables.
Specify the PORT=5000 in a .env file, that way we can acces it in the code like process.env.PORT
Make a instance of express, using its constructor and assign it to app
Call the listen method on app object and pass in the port and the callback

Now, you can fire it up by running the command npm run server, this way nodemon will watch our files for changes and server will be up and running.