How To Create Restful APIs In Mern Stack?

Introduction

The MERN stack, comprising MongoDB, Express.js, React, and Node.js, offers a powerful framework for building full-stack applications. RESTful APIs, integral to this stack, enable efficient communication between the server and client by adhering to the principles of Representational State Transfer.

This guide explores the process of creating RESTful APIs within the MERN stack, covering backend setup, data modeling, routing, and integration with a React frontend.

Creating Restful APIs In Mern Stack

Creating RESTful APIs in the MERN stack involves setting up a backend server with Node.js and Express, connecting to a MongoDB database, and possibly interacting with a front-end built with React. One can join the MERN Full Stack Developer Course to learn how to create Restful APIs in MERN Stack.

Here’s a detailed guide on how to create RESTful APIs using the MERN stack:

1. Set Up Your Project

Start by setting up the basic structure of your MERN stack application.

1.1 Install Node.js and NPM

Ensure you have Node.js and npm (Node Package Manager) installed. You can download them from nodejs.org.

1.2 Initialize Your Project

Create a new directory for your project and initialize it with npm:

“mkdir my-mern-api

cd my-mern-api

npm init –y”

2. Set Up the Backend

2.1 Install Dependencies

You need to install Express, Mongoose (for MongoDB), and other useful packages:

“npm install express mongoose body-parser cors”

2.2 Create the Server File

Create a file named server.js in the root directory of your project:

“// server.js

const express = require(‘express’);

const mongoose = require(‘mongoose’);

//++

const bodyParser = require(‘body-parser’);

const cors = require(‘cors’);

//++

const app = express();

const PORT = process.env.PORT || 5000;

// Middleware

app.use(bodyParser.json());

app.use(cors());

// MongoDB Connection

const dbURI = ‘mongodb://localhost:27017/mydatabase’; // Replace with your MongoDB URI

mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })

    .then(() => console.log(‘MongoDB connected’))

    .catch(err => console.log(err));

// Routes

app.get(‘/’, (req, res) => {

    res.send(‘Hello World!’);

});

// Start Server

app.listen(PORT, () => {

    console.log(`Server running on port ${PORT}`);

});”

2.3 Define Models

Create a directory called models and define your data models. Refer to the MERN Full Stack Developer Course for the best guidance. For example, create a file named User.js:

“// models/User.js

const mongoose = require(‘mongoose’);

const UserSchema = new mongoose.Schema({

    name: { type: String, required: true },

    email: { type: String, required: true, unique: true },

    password: { type: String, required: true },

});

module.exports = mongoose.model(‘User’, UserSchema);”

2.4 Create Routes

Create a directory called routes and add route files. For instance, create userRoutes.js:

“// routes/userRoutes.js

const express = require(‘express’);

* const router = express.Router();

const User = require(‘../models/User’);

// Get all users

router.get(‘/users’, async (req, res) => {

    try {

        const users = await User.find();

        res.json(users);

    } catch (err) {

        res.status(500).json({ message: err.message });

    }

});

// Get user by ID

router.get(‘/users/:id’, async (req, res) => {

    try {

        const user = await User.findById(req.params.id);

        if (user) {

            res.json(user);

        } else {

            res.status(404).json({ message: ‘User not found’ });

        }

    } catch (err) {

        res.status(500).json({ message: err.message });

    }

});

// Create a new user

router.post(‘/users’, async (req, res) => {

    const user = new User({

        name: req.body.name,

        email: req.body.email,

        password: req.body.password,

    });

    try {

        const newUser = await user.save();

        res.status(201).json(newUser);

    } catch (err) {

        res.status(400).json({ message: err.message });

    }

});

// Update a user

router.patch(‘/users/:id’, async (req, res) => {

    try {

        const user = await User.findByIdAndUpdate(req.params.id, req.body, { new: true });

        if (user) {

            res.json(user);

        } else {

            res.status(404).json({ message: ‘User not found’ });

        }

    } catch (err) {

        res.status(400).json({ message: err.message });

    }

});

// Delete a user

router.delete(‘/users/:id’, async (req, res) => {

    try {

        const user = await User.findByIdAndDelete(req.params.id);

        if (user) {

            res.json({ message: ‘User deleted’ });

        } else {

            res.status(404).json({ message: ‘User not found’ });

        }

    } catch (err) {

        res.status(500).json({ message: err.message });

    }

});

module.exports = router;”

2.5 Connect Routes to Server

Update server.js to use the routes:

“// Add this line after other middleware

const userRoutes = require(‘./routes/userRoutes’);

app.use(‘/api’, userRoutes);”

3. Test Your API

Use tools like Postman or cURL to test your API endpoints. The Mern Stack Course in Hyderabad offers the best guidance for aspiring professionals. You can test the following:

• GET /api/users – Retrieve all users
• GET /api/users/:id – Retrieve a specific user by ID
• POST /api/users – Create a new user
• PATCH /api/users/:id – Update a specific user
• DELETE /api/users/:id – Delete a specific user

4. Set Up the Frontend with React

4.1 Create a React App

If you haven’t already, set up a new React application in a separate directory:

“npx create-react-app my-mern-client

cd my-mern-client”

4.2 Install Axios

To make HTTP requests to your API, install Axios:

“npm install axios”

4.3 Create Components

Create React components to interact with your API. For instance, you can create a UserList component to display users:

“// src/components/UserList.js

import React, { useState, useEffect } from ‘react’;

import axios from ‘axios’;

const UserList = () => {

    const [users, setUsers] = useState([]);

    useEffect(() => {

        axios.get(‘http://localhost:5000/api/users’)

            .then(response => setUsers(response.data))

            .catch(error => console.error(‘Error fetching users:’, error));

    }, []);

    return (

        <div>

            <h1>User List</h1>

            <ul>

                {users.map(user => (

                    <li key={user._id}>{user.name} – {user.email}</li>

                ))}

            </ul>

        </div>

    );

};

export default UserList;”

4.4 Run Your Application

Start your React application with:

“npm start”

Make sure your backend server is also running. You should now be able to interact with your API through the React front end.

Conclusion

Creating RESTful APIs in the MERN stack involves setting up a Node.js server with Express, connecting to a MongoDB database, defining data models, and creating routes for API endpoints. The Mern Stack Course in Hyderabad offers the best training to aspiring professionals in this field. Integrating these APIs with a React frontend allows you to build a full-stack application. By following the steps outlined, you’ll have a basic RESTful API up and running, ready to be expanded with additional features and functionality.