After I created my frontend content ( see the article [Creating the frontend of my website with Github Page]), I decided to add a commenting function for more audience interaction, and also thought this would be an amazing idea to practice backend creation. ( According to some of the definitions I have read, I guess this makes my website dynamic? Let me know if you think it is not. I understand the comment function is very basic for a dynamic websites compared with website like Amzon or Tripadvisor, etc.)

Without further ado, let’s go!

Image source: Streamlining Backend-Frontend Integration: A Quick Guide

Table:

• Step 01 | Preparation - Document Management
• Step 02 | Setting up a MongoDB Atlas account, project and new cluster.
• Step 03 | Start configuring the routing mechanism for accessing the database
• Step 04 | Creating API endpoints based on the CRUD methods.
• Step 05 | Run the connection code file with Node.js.
• troubleshoot Notes
• Comments

Step 01 | Preparation - Document Management

1. Brief:

1. Setting up server files for configuring a CRUD methods based REST API
2. Setting up a MongoDB Atlas account, project and new cluster.
3. Start configuring the routing mechanism for accessing the database.
4. Creating API endpoints based on the CRUD methods.
5. Run the connection code file with Node.js.
6. Testing the API with Postman or Termnals.

2. Directory File Structure:

In the same directory of my HTML, CSS and JS files, I created the following objects for the backend.

Step 02 | Setting up a MongoDB Atlas account, project and new cluster.

Key Steps:

1. Creating a new project

   

2. Creating a cluster

   

3. Connection Form

   A connection form will pop-up after “Create Deployment” is clicked. Memo down the “Username” & “Password”, this will be needed as the environment variables for connecting to the database. Click the “Create Database User” before proceeding to “Choose a connection method”

   

4. Connection Method

   Choosing the Connection Method. Choosing “Drivers” option as the connection method, which will allow us to access the database with native drivers, like Node.js, Go, etc.

   

5. Connection String

   In the next connection step, set the choice of the driver / version as Node.js / v 5.5 or later. Following the instruction of installing the driver. Memo down the connection string which will be needed to include in the server routing file.

   

6. Cluster & Collection

   Go to the “Clusters” pane in the menu on the left side of the screen, the newly created cluster will be found. In each cluster, the data will be stored as a collection, which will be found by clicking “Browse Collections” (At the moment no data can be found in there).

   

Step 03 | Start configuring the routing mechanism for accessing the database

Key Steps:

1. Setup environment variable

   creating .env (specified in .gitignore) file for storing the user credential to the DB.

   .env

2. Set Up Mongoose and Connect to MongoDB Atlas

   Create a file named server.js to set up the Express server.

   server.js

   Create a file named db.js to set up Mongoose and connect to MongoDB Atlas. The configuration will use the credentials from environment variables, and then starting the Express server on a specified port as well as handling any connection errors.

   db.js

Step 04 | Creating API endpoints based on the CRUD methods.

1. Define the Comment Model

   Create a file named Comment.js to define the Comment schema and model.

   Comment.js

2. Defining API Endpoints Routing

   Create a file named comments.route.js to set up the Express server and define the API endpoints.

   comments.route.js

Step 05 | Run the connection code file with Node.js.

1. Running the node module for testing the api connection, using the command:

   terminal

   

2. 5-1. Testing the API with Postman

   Using Postman to checking if the data has been successfully stored, updated, added in or deleted at MongoDB Portal.

   • GET the whole data collection in the MongoDB cluster.
   • POST / Adding various strings of new data to the collection based on the data model schema that has been setup.
   • GET + data ID/ Retrieving single string of data from the collection using ObjectID as the reference.
   • PUT + data ID/ Updating single string of data from the collection using ObjectID as the reference.
   • DELETE + data ID/ Deleting single string of data from the collection using ObjectID as the reference.

3. 5-2. Testing the API with a terminal.

   Command line for testing the api functions POST GET PUT DELETE:

   • POST

     terminal

   • GET

     terminal

   • PUT

     terminal

   • DELETE

     terminal