Module 1 :MERN stack

1.1Inroduction to MERN stack:

MERN stack is a collection of technologies that enables faster application development.
It is used by developers worldwide. The main purpose of using MERN stack is to
develop apps using JavaScript only. This is because the four technologies that make up
the technology stack are all JS-based. Thus, if one knows JavaScript (and JSON), the
backend, frontend, and database can be operated easily.

MERN Stack Full Form

MERN Stack is a compilation of four different technologies that work together to develop
dynamic web apps and websites.

It is a contraction for four different technologies as mentioned below:

 M - MongoDB

 E - ExpressJS

 R - ReactJS

 N - NodeJS

You need to open the folder on the CMD (or terminal) and enter the following
command to initialize a [Link] file:

npm init
A standard JSON package looks as shown below:
You can install modules by using:

npm install module_name -save

MERN Stack Components

There are four components of the MERN stack. Let’s discuss each of them one by one.

 The first component is MongoDB, which is a NoSQL database management system.

 The second MERN stack component is ExpressJS. It is a backend web application

framework for NodeJS.

 The third component is ReactJS, a JavaScript library for developing UIs based on UI
components.

 The final component of the MERN stack is NodeJS. It is a JS runtime environment,

i.e., it enables running JavaScript code outside the browser.

MongoDB

MongoDB is a NoSQL DBMS where data is stored in the form of documents having key-
value pairs similar to JSON objects. MongoDB enables users to create databases,
schemas, and tables. It offers the Mongo shell that provides a JS interface for deleting,
querying, and updating the records.

ExpressJS

ExpressJS is a NodeJS framework that simplifies writing the backend code. It saves you
from creating multiple Node modules. For keeping the code precise, ExpressJS offers a
range of middleware.

ReactJS

ReactJS is a JS library that allows the development of user interfaces for mobile apps
and SPAs. It allows you to code JavaScript and develop UI components. The JS library
uses virtual DOM for doing everything.
 NodeJS

NodeJS is an open-source JavaScript runtime environment that allows users to run

code on the server. It comes with the node package manager or npm, enabling users to
select from a wide selection of node modules or packages. Being developed on the
Chrome JavaScript Engine enables Node to execute code faster.

Why Should You Work With MERN Stack?

There are many good reasons to use the MERN Stack. For example, it allows the
creation of a 3-tier architecture that includes frontend, backend, and database using
JavaScript and JSON.

MongoDB, which is the base of the MERN stack, is designed to store JSON data
natively. Everything in it, including CLI and query language, is built using JSON and JS.
The NoSQL database management system works well with NodeJS and thus, allows
manipulating, representing, and storing JSON data at every tier of the application.

It comes in a variant called MongoDB Atlas that further eases database management by
offering an auto-scaling MongoDB cluster on any cloud provider and with just a few
clicks.

Express is a server-side framework that wraps HTTP requests and responses and
makes mapping URLs to server-side functions easy. This perfectly complements the
ReactJS framework, a front-end JS framework for developing interactive UIs
in HTML while communicating with the server.

As the two technologies work with JSON, data flows seamlessly, making it possible to
develop fast and debug easily. To make sense of the entire system, you need to
understand only one language, i.e., JavaScript and the JSON document structure.
1.2 The Model View Controller (MVC) architectural pattern:
Over the last few years, websites have shifted from simple HTML pages with a
bit of CSS to incredibly complex applications with thousands of developers
working on them at the same time. To work with these complex web
applications developers use different design patterns to lay out their projects, to
make the code less complex and easier to work with. The most popular of these
patterns is MVC also known as Model View Controller.
The Model-View-Controller (MVC) framework is an architectural/design
pattern that separates an application into three main logical
components Model, View, and Controller. Each architectural component is
built to handle specific development aspects of an application. It isolates the
business logic and presentation layer from each other. It was traditionally used
for desktop graphical user interfaces (GUIs). Nowadays, MVC is one of the
most frequently used industry-standard web development frameworks to create
scalable and extensible projects. It is also used for designing mobile apps.
The main goal of this design pattern was to solve the problem of users
controlling a large and complex data set by splitting a large application into
specific sections that all have their own purpose.
Features of MVC :
 It provides a clear separation of business logic, Ul logic, and input logic.
 It offers full control over your HTML and URLs which makes it easy to design
web application architecture.
 It is a powerful URL-mapping component using which we can build
applications that have comprehensible and searchable URLs.
 It supports Test Driven Development (TDD).
Components of MVC :
The MVC framework includes the following 3 components:
 Controller
 Model
 View
 MVC Architecture Design

Controller:
The controller is the component that enables the interconnection between the
views and the model so it acts as an intermediary. The controller doesn’t have
to worry about handling data logic, it just tells the model what to do. It process
all the business logic and incoming requests, manipulate data using
the Model component and interact with the View to render the final output.
View:
The View component is used for all the UI logic of the application. It generates
a user interface for the user. Views are created by the data which is collected
by the model component but these data aren’t taken directly but through the
controller. It only interacts with the controller.
Model:
The Model component corresponds to all the data-related logic that the user
works with. This can represent either the data that is being transferred between
the View and Controller components or any other business logic-related data. It
can add or retrieve data from the database. It responds to the controller’s
request because the controller can’t interact with the database by itself. The
model interacts with the database and gives the required data back to the
controller.
Let’s understand the working of the MVC framework with an example:
Let’s imagine an end-user sends a request to a server to get a list of students
studying in a class. The server would then send that request to that particular
controller that handles students. That controller would then request the model
that handles students to return a list of all students studying in a class.

The flow of Data in MVC Components

The model would query the database for the list of all students and then return
that list back to the controller. If the response back from the model was
successful, then the controller would ask the view associated with students to
return a presentation of the list of students. This view would take the list of
students from the controller and render the list into HTML that can be used by
the browser.
The controller would then take that presentation and returns it back to the user.
Thus ending the request. If earlier the model returned an error, the controller
would handle that error by asking the view that handles errors to render a
presentation for that particular error. That error presentation would then be
returned to the user instead of the student list presentation.
As we can see from the above example, the model handles all of the data. The
view handles all of the presentations and the controller just tells the model and
view of what to do. This is the basic architecture and working of the MVC
framework.
The MVC architectural pattern allows us to adhere to the following design
principles:
1. Divide and conquer. The three components can be somewhat
independently designed.
2. Increase cohesion. The components have stronger layer cohesion than if
the view and controller were together in a single UI layer.
3. Reduce coupling. The communication channels between the three
components are minimal and easy to find.
4. Increase reuse. The view and controller normally make extensive use of
reusable components for various kinds of UI controls. The UI, however will
become application specific, therefore it will not be easily reusable.
5. Design for flexibility. It is usually quite easy to change the UI by changing
the view, the controller, or both.
Advantages of MVC:
 Codes are easy to maintain and they can be extended easily.
 The MVC model component can be tested separately.
 The components of MVC can be developed simultaneously.
 It reduces complexity by dividing an application into three units. Model,
view, and controller.
 It supports Test Driven Development (TDD).
 It works well for Web apps that are supported by large teams of web
designers and developers.
 This architecture helps to test components independently as all classes and
objects are independent of each other
 Search Engine Optimization (SEO) Friendly.
Disadvantages of MVC:
 It is difficult to read, change, test, and reuse this model
 It is not suitable for building small applications.
 The inefficiency of data access in view.
 The framework navigation can be complex as it introduces new layers of
abstraction which requires users to adapt to the decomposition criteria of
MVC.
 Increased complexity and Inefficiency of data
1.3 Installing and configuring MongoDB:

MongoDB Version

We install MongoDB 6.0 Community Edition. To install a different version of

MongoDB Community, use the version drop-down menu in the upper-left corner of this
page to select the documentation for that version.

Installation Method

To install MongoDB on Windows using the default MSI installation wizard. To install
MongoDB using the [Link] command-line tool instead, see Install MongoDB using
[Link]. The [Link] tool is useful for system administrators who wish to
deploy MongoDB in an unattended fashion using automation.

Considerations

MongoDB Shell, mongosh

The MongoDB Shell (mongosh) is not installed with MongoDB Server. You need to
follow the mongosh installation instructions to download and install mongosh separately.

Platform Support

MongoDB 6.0 Community Edition supports the following 64-bit versions of Windows
on x86_64 architecture:

 Windows Server 2019

 Windows 10 / Windows Server 2016

MongoDB only supports the 64-bit versions of these platforms.

See Platform Support for more information.

NOTE

MongoDB is not supported on Windows Subsystem for Linux (WSL). To run MongoDB
on Linux, use a supported Linux system.

Virtualization

Oracle offers experimental support for VirtualBox on Windows hosts where Hyper-V is
running. However, Microsoft does not support VirtualBox on Hyper-V.

Disable Hyper-V if you want to install MongoDB on Windows using VirtualBox.

Production Notes

Before deploying MongoDB in a production environment, consider the Production

Notes document which offers performance considerations and configuration
recommendations for production MongoDB deployments.

Install MongoDB Community Edition

Procedure

Follow these steps to install MongoDB Community Edition using the MongoDB Installer
wizard. The installation process installs both the MongoDB binaries as well as the
default configuration file <install directory>\bin\[Link].

Download the installer.

Download the MongoDB Community .msi installer from the following link:
➤ MongoDB Download Center

a. In the Version dropdown, select the version of MongoDB to download.

b. In the Platform dropdown, select Windows.

c. In the Package dropdown, select msi.

d. Click Download.
2

Run the MongoDB installer.

For example, from the Windows Explorer/File Explorer:

a. Go to the directory where you downloaded the MongoDB installer ( .msi file). By
default, this is your Downloads directory.

b. Double-click the .msi file.

3

Follow the MongoDB Community Edition installation wizard.

The wizard steps you through the installation of MongoDB and MongoDB Compass.

a. Choose Setup Type

You can choose either the Complete (recommended for most users) or Custom setup
type. The Complete setup option installs MongoDB and the MongoDB tools to the
default location. The Custom setup option allows you to specify which executables are
installed and where.
b. Service Configuration

Starting in MongoDB 4.0, you can set up MongoDB as a Windows service during
the install or just install the binaries.

MongoDB Service
MongoDB

The following installs and configures MongoDB as a Windows service.

Starting in MongoDB 4.0, you can configure and start MongoDB as a Windows
service during the install, and the MongoDB service is started upon successful
installation.

o Select Install MongoD as a Service MongoDB as a service.

o Select either:

 Run the service as Network Service user (Default)

This is a Windows user account that is built-in to Windows

or

 Run the service as a local or domain user

 For an existing local user account, specify a period (i.e. .) for

the Account Domain and specify the Account Name and
the Account Password for the user.
  For an existing domain user, specify the Account Domain,
the Account Name and the Account Password for that
user.

o Service Name. Specify the service name. Default name is MongoDB. If you
already have a service with the specified name, you must choose another
name.

o Data Directory. Specify the data directory, which corresponds to the --

dbpath. If the directory does not exist, the installer will create the directory

and sets the directory access to the service user.

o Log Directory. Specify the Log directory, which corresponds to the --

logpath. If the directory does not exist, the installer will create the

directory and sets the directory access to the service user.

c. Install MongoDB Compass
Optional. To have the wizard install MongoDB Compass, select Install MongoDB
Compass (Default).

d. When ready, click Install.

Install mongosh

The .msi installer does not include mongosh. Follow the mongosh installation
instructions to download and install the shell separately.

If You Installed MongoDB as a Windows Service

The MongoDB service starts upon successful installation. Configure the MongoDB
instance with the configuration file <install directory>\bin\[Link].

If You Did Not Install MongoDB as a Windows Service

If you only installed the executables and did not install MongoDB as a Windows service,
you must manually start the MongoDB instance.

See Run MongoDB Community Edition from the Command Interpreter for instructions to
start a MongoDB instance.

Run MongoDB Community Edition as a Windows Service

Starting in version 4.0, you can install and configure MongoDB as a Windows
Service during installation. The MongoDB service starts upon successful installation.
Configure the MongoDB instance with the configuration file <install
directory>\bin\[Link].

If you have not already done so, follow the mongosh installation instructions to
download and install the MongoDB Shell (mongosh).

Be sure to add the path to your [Link] binary to your PATH environment variable
during installation.

Open a new Command Interpreter and enter [Link] to connect to MongoDB.

For more information on connecting to a mongod using [Link], such as

connecting to a MongoDB instance running on a different host and/or port, see Connect
to a Deployment.

For information on CRUD (Create, Read, Update, Delete) operations, see:

 Insert Documents

 Query Documents

 Update Documents

 Delete Documents
Start MongoDB Community Edition as a Windows Service

To start/restart the MongoDB service, use the Services console:

1. From the Services console, locate the MongoDB service.

2. Right-click on the MongoDB service and click Start.

Stop MongoDB Community Edition as a Windows Service

To stop/pause the MongoDB service, use the Services console:

1. From the Services console, locate the MongoDB service.

2. Right-click on the MongoDB service and click Stop (or Pause).

Remove MongoDB Community Edition as a Windows Service

To remove the MongoDB service, first use the Services console to stop the service.
Then open a Windows command prompt/interpreter ([Link]) as an Administrator,
and run the following command:

[Link] delete MongoDB

Run MongoDB Community Edition from the Command

Interpreter

You can run MongoDB Community Edition from the Windows command
prompt/interpreter ([Link]) instead of as a service.

Open a Windows command prompt/interpreter ([Link]) as an Administrator.

IMPORTANT

You must open the command interpreter as an Administrator.

1

Create database directory.

Create the data directory where MongoDB stores data. MongoDB's default data
directory path is the absolute path \data\db on the drive from which you start
MongoDB.

From the Command Interpreter, create the data directories:

cd C:\
md "\data\db"
2

Start your MongoDB database.

To start MongoDB, run exe.

"C:\Program Files\MongoDB\Server\6.0\bin\[Link]" --dbpath="c:\data\db"

The --dbpath option points to your database directory.

If the MongoDB database server is running correctly, the Command

Interpreter displays:

[initandlisten] waiting for connections

IMPORTANT

Depending on the Windows Defender Firewall settings on your Windows host, Windows
may display a Security Alert dialog box about blocking "some features" of C:\Program
Files\MongoDB\Server\6.0\bin\[Link] from communicating on networks. To

remedy this issue:

a. Click Private Networks, such as my home or work network.

b. Click Allow access.

To learn more about security and MongoDB, see the Security Documentation.
3

Connect to MongoDB.

If you have not already done so, follow the mongosh installation instructions to
download and install the MongoDB Shell (mongosh).

Be sure to add the path to your [Link] binary to your PATH environment variable
during installation.

Open a new Command Interpreter and enter [Link] to connect to MongoDB.

For more information on connecting to mongod using [Link], such as connecting

to a MongoDB instance running on a different host and/or port, see Connect to a
Deployment.

For information on CRUD (Create, Read, Update, Delete) operations, see:

 Insert Documents

 Query Documents

 Update Documents

 Delete Documents

Additional Considerations

Localhost Binding by Default

By default, MongoDB launches with bindIp set to [Link], which binds to the
localhost network interface. This means that the [Link] can only accept
connections from clients that are running on the same machine. Remote clients will not
be able to connect to the [Link], and the [Link] will not be able to initialize
a replica set unless this value is set to a valid network interface.

This value can be configured either:

 in the MongoDB configuration file with bindIp, or

 via the command-line argument --bind_ip

WARNING

Before binding to a non-localhost (e.g. publicly accessible) IP address, ensure you have
secured your cluster from unauthorized access. For a complete list of security
recommendations, see Security Checklist. At minimum, consider enabling
authentication and hardening network infrastructure.

For more information on configuring bindIp, see IP Binding.

Point Releases and .msi

If you installed MongoDB with the Windows installer ( .msi), the .msi automatically
upgrades within its release series (e.g. 4.2.1 to 4.2.2).

Upgrading a full release series (e.g. 4.0 to 4.2) requires a new installation.

Add MongoDB binaries to the System PATH

If you add C:\Program Files\MongoDB\Server\6.0\bin to your System PATH you can

omit the full path to the MongoDB Server binaries. You should also add the path
to mongosh if you have not already done so.
1.4 Installing [Link] and Installing npm packages:

How to Install [Link] and NPM on Windows?

Since we have decided to create an application using [Link], first of all, you have to
install [Link] on your Windows system.
Here, we are going to explain the installation process step-by-step. So, let’s start with
the first step now.
Step 1: Download the Installer
Download the Windows Installer from NodeJs official website. Make sure you have
downloaded the latest version of NodeJs. It includes the NPM package manager.
Here, we are choosing the 64-bit version of the [Link] installer.

The LTS (Long-term Support) version is highly recommended for you. After the
download of the installer package, install it with a double-click on it.
Now .msi file will be downloaded to your browser. Choose the desired location for that.
Step 2: Install [Link] and NPM
 After choosing the path, double-click to install .msi binary files to initiate the installation
process. Then give access to run the application.
You will get a welcome message on your screen and click the “Next” button. The
installation process will start.

 Choose the desired path where you want to install [Link].

 By clicking on the Next button, you will get a custom page setup on the screen. Make
sure you choose npm package manager , not the default of [Link] runtime . This
way, we can install Node and NPM simultaneously.
You should have 143MB of space to install [Link] and npm features.
The following features will be installed by default:

 [Link] runtime
 Npm package manager
 Online documentation shortcuts
 Add to Path
 Bang! The setup is ready to install Node and NPM. Let’s click on the Install button so
hard!
 Step 3: Check [Link] and NPM Version

 If you have a doubt whether you have installed everything correctly or not, let’s verify it
with “Command Prompt”.
Command Prompt window will appear on the screen.
To confirm Node installation, type node -v command.
To confirm NPM installation, type npm -v command.
And you don’t need to worry if you see different numbers than mine as Node and NPM
are updated frequently.
I