MVC folder structure in Node.js

Are you a developer looking to build scalable web applications using Node.js? One of the best ways to do so is by using the Model-View-Controller (MVC) structure. In this article, we’ll discuss what MVC is, why it’s useful, and how to implement it in your Node.js projects.

What is MVC folder structure?

MVC is a software design pattern that separates an application into three interconnected components: the Model, View, and Controller. Each component has a distinct responsibility, and they work together to create a cohesive application.

Model: This component represents the application’s data and business logic. It interacts with the database or any other data source and encapsulates the data into objects.
View: This component represents the user interface of the application. It presents the data to the user in a visually appealing manner.
Controller: This component acts as a mediator between the Model and View. It receives user input from the View, processes it, and interacts with the Model to update the data accordingly.

MVC provides several benefits, including better code organization, separation of concerns, and improved maintainability.

Implementing MVC folder structure in Node.js

Now that you understand what MVC is, let’s discuss how to implement it in your Node.js projects. Here are the steps:

Set up your project

First, create a new Node.js project and install the required dependencies. You can use npm to install Express, which is a popular Node.js web application framework.

npm install express

Define your routes

In MVC, each route corresponds to a specific action in the Controller. Define your routes using Express:

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

router.get('/', (req, res) => {
  // Render the home page
});

router.get('/users', (req, res) => {
  // Render the list of users
});

router.get('/users/:id', (req, res) => {
  // Render the user's details
});

module.exports = router;

Define your Model

Create a new file for your Model and define the data structure:

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' },
];

module.exports = {
  getAll: () => users,
  getById: (id) => users.find((user) => user.id === id),
};

Define your Controller

Create a new file for your Controller and define the actions:

const userModel = require('../models/userModel');

module.exports = {
  index: (req, res) => {
    const users = userModel.getAll();
    res.render('users', { users });
  },
  show: (req, res) => {
    const id = parseInt(req.params.id);
    const user = userModel.getById(id);
    res.render('user', { user });
  },
};

Define your View

Create a new file for your View and define the HTML template:

<!-- views/users.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title>Users</title>
  </head>
  <body>
    <h1>Users</h1>
    <ul>
      <% users.forEach(function(user) { %>
        <li><a href="/users/<%= user.id %>"><%= user.name %></a></li>
      <% }); %>
    </ul>
  </body>
</html>

Thank You