Node.js + Express + Angular + MongoDB Stack

The MEAN (MongoDB, Express, Angular, Node.js) stack is a popular one. It represents the opportunity to work with JavaScript on both sides of the application (Backend & Frontend).

During this lecture I’ll show you how to add a MongoDB database to the project created previously (Node.js + Express + Angular stack).

MEAN stack

1. Some definitions:

MongoDB: is a cross-platform document-oriented database. Defined as a NoSQL and uses JSON-like documents with optional schemas.

That’s clear !

Anyway the MongoBD definition, the functionalities and why you should use it rather than other databases are not the purpose of this lecture (maybe another time, or never 🙄).

2. Adding MongoDB to our stack:

Let’s take a look to our server file from the previous lecture:

The server without any persistence

This server provides only one REST service /api/status returning a static value "UP”.

The idea will be to manage resource(s) using the CRUD (Create, Read, Update and Delete) functions of the persistence strategy.

To add MongoDB to our server:

• Download MongoDB: https://docs.mongodb.com/manual/tutorial/
• Run the following command on the project root directory in order to add the MongoDB dependency npm install mongodb --save

The following server.js file version contains the MongoDB connection:

The server connected to the database

The code is commented (don’t hesitate to tell me if I missed some information) but let’s take a look to some key points:

• We use the new dependency integrated withvar mongodb = require("mongodb");
• We will use the ObjectID object managing identifiers for our objects (represents a concatenation of 4-byte timestamp value + 5-byte random value + 3-byte incrementing counter, initialized to a random value) with var ObjectID = mongodb.ObjectID;
• We will manage some products during this lecture, so the idea with var PRODUCTS_COLLECTION = “products”; is just preparing a collection to store them

Smart !

• Locally, the MongoDB database is running on port and URI represented with the two values LOCAL_PORT and LOCAL_DATABASE
• Then we save the database object from the callback and starts the server

3. Use the database:

As I said, we will manage some products. Each product contains three mandatory values {_id: string, name: string, brand: string}.

To do that, we need to create new REST services:

• /api/products with the GET verb to get all products.
• /api/products with the POST verb to create a product.
• /api/products/:id with the DELETE verb to delete a product using the identifier.

More information about how to make MongoDB queries here.

Using Postman (or your favorite tool), try to send requests to test the created endpoints:

⚠️ MongoDB database must be running locally and to start your Express server use thenpm start command.

1. Create a product

Create a product

In the same time you can check your products collection inside the MongoDB database (I’m using Robot 3T for that):

Products collection

2. Get all products

Get all products

3. Delete a product

Delete a product

Bonus:

Inside the GitHub repository, You will find a simple Angular screen using a service developed to manage the created endpoints:

Products service

⚠️ To run the Angular app use the following command and check the http://localhost:4200 URL:

ng serve --proxy-config proxy.config.json

Result !

Useful links

GitHub repository: https://github.com/DjihadBengati/node-express-angular/tree/NODEJS_EXPRESS_ANGULAR_MANGODB