DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Integrating MongoDB database in Webapp
Roopali Singh
Roopali Singh

Posted on • Updated on

Integrating MongoDB database in Webapp

Hi thereπŸ‘‹,

In this guide we will be learning how to integrate MongoDB in our project using Mongoose.
We will be assuming that you have already setup your node.js app
(or the backend of your app)

MongoDB is an open-source document database and leading NoSQL database.
Mongoose is an Object Data Modelling(ODM) library for MongoDB and Node.js.

Instead of connecting our node app directly to MongoDB, we will use Mongoose.
MongoDB managed via Mongoose

πŸš€ Fasten your seat belt cause we are about to start our journey!

are you ready

For this guide, we will be storing user info. in our database.
(If you're working on complete MERN stack then all of these steps are meant to be perform in the backend of your app.)

1. Start with installing Mongoose.

npm install mongoose
Enter fullscreen mode Exit fullscreen mode

2. Create a file userModel.js.

In this file, we will create a userSchema. A schema is the structure of the database.

import mongoose from "mongoose";

const userSchema = new mongoose.Schema(
  {
    // It atomatically assigns a unique _id, so we don't need to
    // define another id for it.
    firstName: { type: String, required: true },
    lastName: { type: String, required: false },
    email: { type: String, required: true, unique: true },
    pin: { type: Number, required: true },
  },
  {
    timestamps: true,
    // Timestamp of creating a record and last update of record.
  }
);
Enter fullscreen mode Exit fullscreen mode

3. Now we will call mongoose.model() on our schema.

A mongoose model is responsible for creating, querying and reading documents from the mongoDB database.

const User = mongoose.model("User", userSchema);

export default User;
Enter fullscreen mode Exit fullscreen mode

Your userModel.js file should look like this now:

import mongoose from "mongoose";

const userSchema = new mongoose.Schema(
  {
    firstName: { type: String, required: true },
    lastName: { type: String, required: false },
    email: { type: String, required: true, unique: true },
    pin: { type: Number, required: true },
  },
  {
    timestamps: true,
  }
);

const User = mongoose.model("User", userSchema);

export default User;
Enter fullscreen mode Exit fullscreen mode

4. Now lets create another file named userRouter.js to define our API routes for performing CRUD operations on it.

import express from "express";
import User from "./userModel.js ";

// express.Router() =>  a function to make code Modular, instead of
// creating all routes in server.js we can define multiple files
// to have our routers...
const userRouter = express.Router();

// nature of mongoose operation is async
// so we will define the async functions here.

export default userRouter;
Enter fullscreen mode Exit fullscreen mode

5. Before defining our routes in the userRouter.js, we will first connect the mongoose to the database.

For this we need to add a few lines of code in the server.js file.

import express from "express";
import mongoose from "mongoose";

mongoose.connect(process.env.MONGODB_URL ||
"mongodb://localhost/your_app_name", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
});
Enter fullscreen mode Exit fullscreen mode

6. Just two more lines in the server.js to connect server.js to userRouter.js.

import userRouter from "./userRouter.js";

app.use("/api/users", userRouter);
Enter fullscreen mode Exit fullscreen mode

The server.js file should look like this now:

import express from "express";
import dotenv from "dotenv"; // npm install dotenv
import mongoose from "mongoose";
import userRouter from "./router/userRouter.js";

dotenv.config(); // to use .env file content

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// To connect mongoose to mongoDB database
mongoose.connect(process.env.MONGODB_URL ||
"mongodb://localhost/your_app_name", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
});

// To connect server.js to userRouter.js
app.use("/api/users", userRouter);

// listen command
const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log(`Serve at http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

🌏 So now everything is connected to everything πŸ‘©πŸ»β€πŸ’»

Everything is connected

7. It's time to go back to userRouter.js file and define the routes to perform the CRUD operations.

import express from "express";
import User from "./userModel.js ";

const userRouter = express.Router();

// 1) to read/fetch all users:

userRouter.get(
  "/seed",async (request, response) => {

    // there is no condition defined in find, so it will
    // fetch all users.
    const allUsers = await User.find({});

    response.send({ allUsers });
  };
);


// 2) to create new user:

userRouter.post(
  "/register",async (request, response) => {

    // A request body is data sent by the client to your API.
    const newUser = new User({
      firstName: request.body.firstName,
      lastName: request.body.lastName,
      email: request.body.email,
      pin: request.body.pin,
    });

    const createdUser = await newUser.save();

    response.send({ createdUser });
  };
);


// 3) to update existing user:
// first we need to find that user and then update its info.

userRouter.post(
  "/update",async (request, response) => {
    const editUser = await User.find({ email: request.body.email });


    // When there are no matches find() returns [].
    // So we could not use the condition: if(!editUser){...}

    if (!editUser.length) {
      response.status(400).send({ message: "No User Found" });
    } else {
        editUser.firstName: request.body.firstName,
        editUser.lastName: request.body.lastName,
        editUser.pin: request.body.pin,

        const updatedUser = await editUser.save();

        response.status(201).send({ updatedUser });
    }
  };
);


// 4) to delete a user:
// first we need to find that user and then delete it.

userRouter.delete(
  "/delete",async (request, response) => {
    const deleteUser = await User.find({ email: request.body.email });


    if (!deleteUser.length) {
      response.status(400).send({ message: "No User Found" });
    } else {
        const userDeleted = await deleteUser.deleteOne();

        response.status(201).send({ message: "User removed" });
    }
  };
);

export default userRouter;
Enter fullscreen mode Exit fullscreen mode

πŸ† We have successfully integrated Mongoose in our webapp πŸ”₯.

Mission Passed

Now we just need to make a request to our server.
For eg. To fetch all users, make a get request to:
"/api/users/seed".

There are several other functions with these, such as:

  • sort()
  • findById()
  • findOne()
  • findByIdAndUpdate()
  • deleteMany()
  • updateMany() and many more.

You could read more on this from Mongoose Docs

The End

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!