Beginner tutorial for NodeJS, express and MongoDB
Hello everyone! Today we’re going to teach you about how to write “Backend” by using Nodejs, express, and MongoDB. For some people who may not know what “Backend” or “Express” is? Why is it important? You guys can follow the link below!
After you finished reading it, I guess can see someone’s pale face sitting in front of the screen and think
“Oh…Why am I doing what I’m doing right now?”
…BUT!!!
Please don’t shut this Medium tab immediately because in this tutorial we’ll teach you the basic usage of it without considering things like “Best Practice” or those confusing concept(yet🤪) We’ll mainly focus on how to make you understand the most and still be able to use it in the real world.
ps. For those who may interested in how to write a code in a standard way or want to know more about deep down concept, please stick with the next tutorial.
Before we start coding, let’s see what we have to use first. In this tutorial we’ll use only 4 main tools.
- NodeJS for run server
- MongoDB as database to collect the data
- Your favour editor. If you don’t have one, we suggest using VSCode 😊
- Postman for testing request and backend which we are going to write.
Part 1: Getting started
To begin with, please download starter template from https://github.com/chutipon29301/medium-express-mongo-tutorial-1
After finished then open downloaded folder via editor
you’ll see something like this
Next, open terminal
or cmd
and enter to the template
folder. After being inside the folder, you can now install all of the sufficient package by typing npm install
If you’ve already finished installing, you’ll get the folder name node_modules
appear inside the folder. This node_modules
folder will collect all dependency we use in this project altogether.
Note: If you’re Github user, I suggest you should gitignore this folder cause it’s too large
When we loaded all of the package we need into the project, in the next step we’ll test and check whether the project (which we spend a lot of time downloading) can be used or not. We will use npm start
command and this is what we desperately want to see…
If you don’t get the result like this, don’t freak out yet. We’ll basically fix the problem, together, please follow the instruction below.
- If cannot find
npm
: Firstly, check whether you correctly install NodeJS or not because normallynpm
will come with NodeJS installer already. - If cannot find dependency : check whether you correctly install package in the appropriate folder (Please allow me to remind you that you must call
npm install
in template folder not in the outer folder)
Finally, open your browser and go to http://localhost:3000/ping what we suppose to get will look like this
That’s the end of part 1. Quite a confusing right? Actually we just want to check the environment, download and run the project we’ve prepared for you in this tutorial.
Part 2: WebServer
In this part will talk about our main protagonist ….MongoDB !!! Beginner may not know what database is used for? So let me clarify first.
Database is responsible for collecting the data permanently which MongoDB is one of the database that collect data in form of object. The benefit we gain is that MongoDB is quite easy to manage and easier to understand than others.
Structure of mongoDB
When we want to use mongoDB, the first thing we need to know is
The database’s name is what we name database we want to use. Mostly we will use the same name as the project name.
Secondly, in each database there’ll be a collection. THIS collection is like a folder which will manage data inside database.
Lastly, in each collection there’ll be a document or the data of each object we want to collect.
After we see a big picture of what we are gonna use, how it looks like and what is its structure, now it’s time for coding!!! 🤩🤩🤩🤩
Above is fundamental code which we prepared for you. Let’s see what it is used for…
In this project we’ll use 2 dependency which is express
and body-parser
Whileexpress
will be used for create webserver that will communicate with client, body-parser
will transform the data sent by client. What we can do now is to initialize bodyParser
and app
in order to collect 2 value that we’re gonna use.
In the next line, you’ll see that something is messing around bodyParser
and app
.What we do here is to tell express
or app
to use bodyParser
to transform body value which we’ll use in this project.
This is where we tell webserver (created by express) to use port 3000
in order to run server.
Lastly, is to tell app to wait for receiving GET
request by using path /ping
and sent {msg: "pong"}
to a person who call /ping
Next step, it’s time to use Mongo! Node already prepared mongoDB which is official driver for NodeJS for you, so what you have to do is just type npm install mongodb --save
in terminal
or cmd
in order to install this dependency.
Then back to ourindex.js
file and import mongoDB ,which we just installed, to the file.
After that we’ll start connecting to the database. We need database url (assume that we use database within the PC) which is mongodb://localhost:27017
but if you want to use online database, you only need to change the url into mongodb://<url-or-ip-address>:27017
.
As you can see from the code above, we move app.listen
into MongoClient.connect()
since we want server to start running after connected to the database right away.
In this code, we have 2 extra part added which is if(error) throw error;
this one is for checking an error from connecting database. If there’s error detected, we’ll throw error out. Another part is var db = client.db("MediumTutorial")
this one is for initializing variable to collect our database. What we insert inside db()
is the name of the database.(We already mentioned that before, you can scroll up to recall your memory😁)
Next, we’ll talk about the overview of what we will do in this tutorial. What we will write today is the backend that allow user to create, list, edit, delete and login.
Part 2.1: List user
Syntax of mongo which we will use in the request isfind
and toArray
.
Let’s begin with
db
is the variable we’ve already initialized before to collect the instance of database.collection
is to call collection’s name inside database, let’s assume the name is users
.find
is to find data in collection.toArray
will bring data we found and transform it in form of array of object.
ps.We’ll discuss more about find
in the next session when we do request login.
After we finish coding, let’s test it! Are these bunch lines of code work correctly? Firstly, if you didn’t run npm start
then run it first, the result should be as same as what we mentioned before in part 1.We can access to the request we wrote by using Postman and go to the link localhost:3000/listUsers
and what we got is….empty array! Why is that? The answer is so easy… We didn’t create user yet. So in the next part we’ll talk about how to create user.
Note: For people who use mac, please run mongo process first before run
npm start
by typingmongod
on terminal.
Part 2.2: Create user
Ahhhhh! Finally we reach part 2.2. In this part we’ll look at how we can create user or insert data into database. The command we use in this part is insertOne
for insert data into database and what you should know is _id
is a primary key of collection we want to collect.
Some may confused… What exactly is primary key? To describe in the simplest way, it is the field that each collection must not have in similar which is email that client sent to us. If we tried to insert document that have repeating _id
the insertion process will not be success.
And now, it’s time for testing (again). Similarly, if you didn’t run npm start
then run it first, then use postman to sent request.
In the first time created, what we should receive is OK
because we already wrote in the code above that if has no error then sentOK
back.
But if we tried to add user by existing email, we’ll get the same error as below. This show the property of _id
we’ve mentioned before.
After we successfully add user, then go back where request is written in part 1 and check. You’ll see that you won’t get empty array back anymore but get the array that include the user we recently add back instead.
Part 2.3: Edit user
In this part, we’ll talk about how to edit data in database. As you can see above, We use updateOne
to edit data in the target document(one object in line is one document) by insert the parameter that identify the field(can be one field or more) of target document we want to edit and then insert the new updated value in the following parameter. You’ll now get the updated document on your database.
// before
[
{_id:1, name: "Apple"},
{_id:2, name: "Huawei"},
]updateOne({_id:2},{$set:{name:"Pixel"}});// after
[
{_id:1, name: "Apple"},
{_id:2, name: "Pixel"},
]
You’ll see that in updateOne
will have weird syntax called$set
this will allow you to edit only one field in target document and other field will remain the same.
Part 2.4: Login
Next, we’ll try to create request login. What we’ll do in this request is to find user 1 who has the similar email with user we get then check whether the password is correct or not.
We use findOne
to find only 1 document and return as a result. What we can insert inside findOne
is the condition of what we want to find which is an email that we collect in _id
field. So we got condition object like this{_id: req.body.email}
and when we try to request via postman, we’ll get return value as true
or false
.
Part 2.5: Delete
Finally, we’ll delete user from database which is quite easy (really easy…trust me) because we already know about findOne
so we change findOne
into deleteOne
.That’s all we have to do in order to delete document.
When we try to delete and list user, you will get the result as shown below…
And now here we are, at the last session of this article. For those people who interested in using mongoDB in other application, you can read all of mongo function in this link.
Lastly, we’ve prepared the complete code in the folder name final. For those who cannot catch up with the tutorial, you can look it up if you like.