Express.js in MERN Stack: Bridging React Front-End with MongoDB Back-End

What is Express.js?

Express.js is a fast, unopinionated, and minimalist web application framework for Node.js. It is used to build robust web and mobile applications, enabling developers to handle HTTP requests and responses efficiently. Express.js simplifies the development process by providing a range of built-in features and middleware for routing, request handling, and data processing.

Role of Express.js in MERN Full-Stack Development

In a MERN (MongoDB, Express.js, React, Node.js) stack application, Express.js serves as the back-end framework. It acts as a bridge between the React front-end and the MongoDB database by:

1. Handling HTTP Requests:

   • Express.js processes incoming HTTP requests (GET, POST, PUT, DELETE) sent from the React front-end.

   • It routes these requests to the appropriate back-end logic or APIs.

2. Connecting to MongoDB:

   • Express.js works with a MongoDB driver or an Object Data Modeling (ODM) library like Mongoose to interact with the MongoDB database.

   • It enables performing CRUD operations (Create, Read, Update, Delete) on the database.

3. Serving API Responses:

   • After interacting with the database, Express.js sends the processed data or status responses back to the front-end, enabling a dynamic and interactive application.

How Express.js Communicates Between MongoDB and React

Here’s a step-by-step breakdown of how Express.js integrates with MongoDB and React:

Routing HTTP Requests

Define routes in Express.js to handle specific API endpoints, e.g., /api/products or /api/users.

const express = require('express');

const router = express.Router();

// Define a route for fetching all products

router.get('/products', async (req, res) => {

    try {

        const products = await Product.find(); // Interact with MongoDB

        res.json(products); // Send data to React front-end

    } catch (error) {

        res.status(500).json({ message: 'Server Error' });

    }

});

module.exports = router;

Connecting to MongoDB

• Use Mongoose (or the native MongoDB Node.js driver) to interact with MongoDB.

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mernDB', {

    useNewUrlParser: true,

    useUnifiedTopology: true,

})

.then(() => console.log('Connected to MongoDB'))

.catch((err) => console.error('Error connecting to MongoDB', err));

API Layer Integration

• Express.js acts as an API layer between the front-end and database. The React front-end sends requests to the back-end API endpoints.

Example of a Fetch request from React:

fetch('http://localhost:5000/api/products')
    .then((response) => response.json())

    .then((data) => console.log(data));

Middleware for Data Handling

• Middleware functions in Express.js, like body-parser or express.json(), parse incoming request bodies (e.g., JSON data) for processing.

const express = require('express');

const app = express();

app.use(express.json()); // Parse JSON request bodies

CRUD Operations

• Express.js handles CRUD operations via routes and Mongoose methods.

router.post('/products', async (req, res) => {

    try {

        const product = new Product(req.body); // Create new product

        await product.save(); // Save to MongoDB

        res.status(201).json(product); // Return created product

    } catch (error) {

        res.status(400).json({ message: 'Bad Request' });

    }

});

Summary Workflow in MERN Stack:

1. React Front-End: Sends HTTP requests to the Express.js back-end using APIs.

2. Express.js Back-End: Routes requests, processes them, and interacts with MongoDB.

3. MongoDB: Stores and retrieves data as required by the application.

4. Express.js: Sends the processed data or appropriate responses back to React.

Express.js enables seamless communication, making it an essential component for creating efficient and scalable full-stack MERN applications.