Web development: a Node CRUD web application

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!

CRUD

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.

Express.js

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:

Manually:

With Express:

The 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 req.param.parameter for /:parameter or queries as req.query.que for ?que=Hello.

The 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

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:

1. The database itself: these contain collections.
2. Collections: these are collections of documents.
3. 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 nodemon index.js.

Implementing Express

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 package.json!

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.

This is our server

This is our router, where we handle all routes

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.

Our server with a template engine and body-parser included.

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:

This view will now display whatever is passed in the query!

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.

Our router can now render /profile with 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!.

This will be our registration form

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:

Our router now receives the data that is entered in the form!

Implementing MongoDB

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!

Click on +Add IP address to add your own.

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:

Enter your own credentials here without the arrows

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

Click on +Create database here

We’re going with userdb as database and users for the collection

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.

Import the ones you need in your router!

Thank you for making it to the end of this post! Did you like this article? Clap those hands! 👏