Becoming a MERN Developer: Interact with MongoDB Atlas in Your Node.js Application

Introduction

You’ve probably set up your Atlas cluster already, now let’s find out how to insert and retrieve data from it in your Node.js app.

if not, check out one of my other posts:

How to set up MongoDB Atlas

Set up a connection

Install mongoose instead of using the native MongoDB driver:

npm install mongoose

Require mongoose and connect to Atlas, notice that you might need to configure some of these options to suppress the warning:

mongoose.connect(“mongodb+srv://username:<Enter your pwd here>@cluster0-fpwyv.mongodb.net/survey?retryWrites=true&w=majority”, { useUnifiedTopology: true, useNewUrlParser: true})

Create mongoose schema and model for your data

const personSchema = {
  name: String,
  address: Object,
  job: String,
};
const Person = mongoose.model("collection", personSchema);

Then you can start to populate your database by creating and inserting more objects (documents):

const vanGogh = {
    name: "Vincent Ven Gogh",
    address: {
    country: "Netherland",
    state: "Zundert"
    },
    job: "Artist",
};
Person.insertMany([vanGogh, daVinci]);

And to require these data from Atlas, simply use:

Person.find(function(err, items){
if (err) {
    console.log(err);
} else {
    console.log(items);
}
})

Use nodemon or node to run your app, and these objects should start to poping up in your terminal.

Why am I using EJS to pass data?

I used EJS as the view engine, as I don’t have enough time to figure it out properly, I’m just gonna leave some of my thoughts and doubts here:

Is it a good practice to pass data from back-end to front-end with EJS?

Probably not, I don’t think the data should be exposed to client-side, neither should the logic of treating these data.

As I can require data from Atlas in my Node.js entry point (Yes that app.js file, I don’t even know how to call it honestly), and most of my logic is written in the front-end js file, how can I feed the data to the front end?

Obviously I understand that EJS provides a way for developer to render back-end data on web pages (.ejs file), but it also seems like the only way to serve something to the front end.

But how it can be done?

Here’s what I find out after 3 hours straight on stackoverflow:

First, still pass the data you wanna get rendered in front-end:

Than pass it to your ejs file:

Notice how tricky it is? With Vanilla JS, you can retrieve the data by element.innerText().

That’s currently what I’m doing in my app as I don’t have enough time to figure out how Node.js should be dealing with these issues.

And also be careful when you wanna use this trick to pass object data you probably just got from Atlas. You will need to stringify it in the back-end before passing it to your ejs pages, and then parse it in JS. I don’t know why it have to work like that and hopefully I can solve this issue later.

And Don’t forget to place the data-passing HTML before your JS reference!

To make this trick work, you will need to define the HTML section before loading the javascript, cause otherwise a null reference exception gonna ruin your lovely life like what it did to me :(