In this article, we’ll create a boilerplate CRUD application in Node using Express and MongoDB.
Last year, I got the opportunity to develop a CRUD application for a class in Node using Express and MongoDB. Today, one year later, I’m assisting the new generation of web developers to create their web app. With this guide, I’m hoping to make the development experience a bit better!
First things first. What in the world is CRUD? Well, CRUD is a set of methods that are used in making REST API calls. CRUD is short for:
Create (POST) - To Create something
Read (GET) - To read something
Update (PUT) - To update something
Delete (DELETE) - To delete something
Using CRUD methods allows the browser to communicate with the server, which then can do something with it.
If your web app has multiple pages (like they usually do), you probably need a router. Express is a framework that does just that using its middleware more powerfully and shortly than it would be if you were to write it manually. To prove that, I wrote a small example:
req parameter is short for request, it can be used to access the information in a request. For example, it would allow the backend to process parameters that are passed in the URL as
/:parameter or queries as
res parameter is short for the response, it can be used to respond for example after a request is processed. The request parameter can send status codes, headers, files, and more. Furthermore, it allows you to pass data to your template engine, this allows for your pages to be dynamic and, if you wish so, more personal to the user.
MongoDB is a JOSN-like NoSQL database that’s not only faster but saves you on scaling and performance when your app grows bigger. The database operates in the following order:
- The database itself: these contain collections.
- Collections: these are collections of documents.
- Documents: here is where your data is stored.
Let’s get started
Now that we know what we’re dealing with, it is time to write some ✨code✨! You can start a repo and follow along- or just keep it local if you prefer so.
To start, we need to initialize a project using
npm init in the terminal. You will see a prompt to set your preferred names, these can be whatever you like.
Your folder should now contain a
package.json file. This file contains information regarding your project and used libraries.
Setting up node
We should now be able to create a node server. In the same folder, we’re in right now, we make a file
index.js . This file will be our server. We’ll write the following code:
Now, if we enter
node index.js inside our terminal, we should read that the server is running at http://127.0.0.1:3000/. If we click that link will bring us to our server!
To make development easier, I fully recommend using Nodemon. This library watches for changes in your files and then restarts your Node server so that you don’t have to! You can install it using
npm i -g nodemon and use it as
To implement Express, we need to install it first. Enter
npm i expressinto your terminal to install it. Fun fact, you can now see express being added to your
With Express installed, it is now possible to integrate into our server! In our
index.jsfile we require it, and then a router to it.
With that set, we can now navigate to
127.0.0.1/helloin our browser we’ll see a
Hello World!printed in our terminal! This confirms that our router is working.
A little word on template engines
We’re using EJS as a template engine for this tutorial. For what we want to achieve, it won’t matter which one you choose but feel free to explore other options.
To install EJS, you have to enter
npm i ejsin your terminal. From there we can tell Express to use it as a view engine in
index.js. Furthermore, we’ll be using
body-parserto read out the data we enter in, for example. a
<form>. You can install body-parser by entering
npm i body-parserin your terminal.
Now, to bring it all together, we need to make a view. We make one more folder called
views` and therein we create the view
profile.ejs. In it, we add the following:
Now, we can pass data from the router to the template engine. The
.res() function takes 2 parameters: the name of the views and data.
Putting body-parser to work
Now, we’re able to render information but we also would like to fetch data. Express offers the function
.post(). Using this function, we can fetch information we enter in, for example, forms!.
Our form here uses 2 attributes: action to tell the server what action to execute and method to tell the browser what method to use.
On the server-side, we can fetch this request by writing the following:
MongoDB can be run in 2 ways, online (on a server) or offline (on your local machine). For this tutorial, we’ll be using Atlas. Atlas is MongoDB’s service that hosts databases. Their free plan gives users one free database which we will be using for this tutorial!
You can create your own database over at cloud.mongodb.com! Don’t forget to whitelist your own IP address in the network access!
Once it is ready, copy your connection string and save it somewhere. You will use it later on!
To get started, we enter
npm i mongodb in our terminal to install MongoDB! Then, we have to install
npm i dotenvto securely store our credentials. From here, we create a file named
.env! We add 2 lines to this file:
Before we actually start writing the code, we need to create the actual collection first! Head over to your database on Atlast and create a cluster
Now, we can start integrating MongoDB into our code! It starts with requiring the
mongodb library in our router along with
dotenv . Then we construct the URI so that we can find the server, and then we connect to the server when we need it!
Our router now fetches information from the
formand uploads it to the database!
Now, if you’re dealing with user credentials you want to hash it before sending it off using libraries such as Bcrypt but that is another topic for another day!
To save you some time, I have written the basic CRUD methods for MongoDB for you. You can place these functions in a separate
utils.jsfile and call them by requiring or importing them.
Thank you for making it to the end of this post! Did you like this article? Clap those hands! 👏