COVID19 Lockdown Dev Log – Day 35, Express.js And Router Files

What I Worked On

The Taskmanager app

What I Learned

Splitting your routes into different files so you don’t have all of your routes in one file that just grows out of proportion. Let’s first look at a simple file structure:

- src
 -- index.js
 -- db
  --- mongoose.js
 -- models
  --- user.js
  --- task.js

The db folder contains our connection to a MongoDB database. The models folder contains two models of user data and task data. Now, the main focus, the index.js, contains all of our routehandling logic… and it’s huge:

// index.js

const express = require('express');
require('./db/mongoose');
const User = require('./models/user');
const Task = require('./models/task');

const app = express();
const port = process.env.port || 3000

// Set Express to automatically parse JSON so we can access it in request handlers
app.use(express.json())


// Create users
app.post('/users', async (req, res) => {
  //... POST logic
})

// Read users
app.get('/users', async (req, res) => {
  //... GET logic
})

// Read single user
app.get('/users/:id', async (req, res) => {
  //... GET logic
})

// Update user
app.patch('/users/:id', async (req, res) => {
  //... PATCH logic
})

// Delete single user
app.delete('/users/:id', async (req, res) => {
  //... DELETE logic
})


// Create task
app.post('/tasks', async (req, res) => {
  //... POST logic
})

// Read tasks
app.get('/tasks', async (req, res) => {
  //... GET logic
})

// Read single task
app.get('/tasks/:id', async (req, res) => {
  //... GET logic
})

// Update single task
app.patch('/tasks/:id', async (req, res) => {
  //... PATCH logic
})

// Delete single task
app.delete('/tasks/:id', async (req, res) => {
  //... DELETE logic
})

app.listen(port, () => {
    console.log("Server up and running on:", port)
})

Let’s split the routehandling into two different files. One for handling user and one for handling task. We start by creating a new folder called “routes” in the “src” directory. There, we add two files user.js and task.js. These will contain routehandling for each one. I’ll show the user.js only because the exact same process applies to the task.js file, so there is no need to showcase that. Let’s add the user routehandling to user.js:

// user.js

// import Express.js
const express = require('express');
// create an Express router
const router = new express.Router()
const User = require('../models/user');

// Create users
router.post('/users', async (req, res) => {
  //... POST logic
})

// Read users
router.get('/users', async (req, res) => {
  //... GET logic
})

// Read single user
router.get('/users/:id', async (req, res) => {
  //... GET logic
})

// Update user
router.patch('/users/:id', async (req, res) => {
  //... PATCH logic
})

// Delete single user
router.delete('/users/:id', async (req, res) => {
  //... DELETE logic
})

module.exports = router

By using Express’ Router we can assign all the routehandling to this given router and export it. By importing it into index.js we can get the same routehandling as we had before, but now it’s in seperate files and provides a much cleaner index.js file. The only thing we need to do is write these four lines of code in index.js:

const userRouter = require('./routers/user');
const taskRouter = require('./routers/task');

// Register routers for users and tasks
app.use(userRouter)
app.use(taskRouter)

As I said, I haven’t shown the example for task.js because it is done the exact same way as in user.js 😀 And there we have it. The final index.js file looks like this:

// index.js

const express = require('express');
require('./db/mongoose');
const userRouter = require('./routers/user');
const taskRouter = require('./routers/task');

const app = express();
const port = process.env.port || 3000

// Set Express to automatically parse JSON so we can access it in request handlers
app.use(express.json())

// Register routers for users and tasks
app.use(userRouter)
app.use(taskRouter)

app.listen(port, () => {
    console.log("Server up and running on:", port)
})

What Distracted Me During The Day

• Emails

Resources

• Andrew Mead – https://mead.io/