Guide to implement MERN Stack Web App
Tags: javascript, webdev, beginners, tutorial
Published: 2022-01-13 14:41:19

## _Property Bookings Catalog_ - 3-tier web app developed using MERN Stack

---

## Table of Contents
- [Introduction](#introduction)
- [What is MERN Stack](#what-is-mern-stack)
- [MERN Architecture](#mern-architecture)
- [Steps to create the application](#steps-to-create-the-application)
  - [Create MongoDB Cluster and Get DB Connection String](#create-mongodb-cluster-and-get-db-connection-string)
  - [Setting up Application to connect with MongoDB](#setting-up-application-to-connect-with-mongodb)
  - [Start the Express server](#start-the-express-server)
    - [Method 1](#method-1)
    - [Method 2](#method-2)
  - [Start the React app](#start-the-react-app)
- [Testing Application and Accessing UI](#testing-application-and-accessing-ui)
- [GitHub Repo](#github-repo)
- [GitHub Action Workflow Details](#github-action-workflow-details)
- [Reference](#reference)

## Introduction
Hackathons are always a great and fun way to learn new technologies. This web app is developed for the submission of *__Dev community X  MongoDB Atlas Hackathon__* (#atlashackathon). This is a MERN stack based Web Application. 

I'll be discussing on how to create the app in this blog.

## What is MERN Stack
MERN is one of the popular full stack web app frameworks. It stands for MongoDB, Express, React, Node, which are making up the tech stack.

MongoDB - Popular NoSQL document database
ExpressJS - Node.js web framework
ReactJS - a client-side JavaScript framework
NodeJS - the JavaScript web server

Express and Node make up the middle (application) tier. `Express.js` is a server-side web framework, and `Node.js` the popular and powerful *`JavaScript` server platform*. 

It is one of variant of popular __MEAN__ and __MEVN__ stacks, in which *A* stands for `AngularJS` and *V* stands for `VueJS` respectively.

Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through.

## MERN Architecture
> As per the [documentation](https://www.mongodb.com/mern-stack)
The MERN architecture allows us to easily construct a `3-tier` architecture (frontend, backend, database) entirely using JavaScript and JSON.
![MERN Arch](https://webimages.mongodb.com/_com_assets/cms/mern-stack-b9q1kbudz0.png?raw=true)

It has been a while since I'm trying to create a Web App using the MERN stack. Finally I'm able to create it. Thanks to the great [article by MongoDB team](https://www.mongodb.com/languages/express-mongodb-rest-api-tutorial). I took inspiration from the MongoDB tutorial and created this application.

## Steps to create the application
### Create MongoDB Cluster and Get DB Connection String
- We choose MongoDB Atlas Managed Database Service provider by MongoDB
- We need to signup for an account in MongoDB portal
- After logging into account we need to create a project and enable billing if needed. There is no billing required for Demo purposes.
- Rest of steps assuming that, we have created project in MongoDB account
  - Step 1: Create MongoDB cluster using Atlas UI. Refer the documentation [here](https://docs.atlas.mongodb.com/getting-started/?_ga=2.209539858.187869111.1641820485-130312989.1641820485)

![project](https://github.com/chefgs/repo_images/blob/master/mongo-create-project-cluster.png?raw=true)

  - Step 2: After choosing the project to create the Cluster, click `create` button
  - Step 3: Choose the required Cloud Provider and dedicated or shared infrastructure to host the DB. This would take a few minutes to create the Cluster. Move to next step after the Cluster creation is complete

![create_cluster](https://github.com/chefgs/repo_images/blob/master/mongo-create-cluster.png?raw=true)  

  - Step 4: Select the database from Atlas UI and click on `connect` button available near the DB cluster
  - Step 5: Choose `Connect Your Application` and choose `NodeJS` from the option in next screen

![connect_string](https://github.com/chefgs/repo_images/blob/master/mongo-connect-dbstring.png?raw=true)

- Step 6: Get the `connection string` for the database to use it in the `ATLAS_URI` config value in the file `server/config.env` later in this tutorial
- Step 7: We are choosing `sample_airbnb` database collection to implement the bookings catalog application 
- Step 8 (Optional for DEMO): It would be good to add indexing for the collection to have faster search through the DB schema. Please follow the steps mentioned in [MongoDB Docs here](https://docs.atlas.mongodb.com/atlas-search/tutorial/create-index-ui/) to create indexing for the DB collection
```
mongodb+srv://<admin_user>:<password>@democluster.aurnw.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
```
Note: Replace `<password>` with the password for the `<admin_user>` user. Replace myFirstDatabase with the name of the database that connections will use by default.

### Setting up Application to connect with MongoDB
- We have `server/config.env` file in our repository, replace the values `db_user`, `db_user_pwd` and `mongodb_cluster_url` with the respective values that is set
Then, set the Atlas URI connection parameter in `server/config.env` to our Connection String:
```
ATLAS_URI=mongodb+srv://<db_user>:<db_user_pwd>@<mongodb_cluster_url>?retryWrites=true&w=majority
```
- We need to run the Express server and React app parallely in two different terminals
## Start the Express server
- Express server runs on `localhost:5000`
### Method 1
- In this method we use `nodemon` - Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
```
cd server
npm install
npm install -g nodemon
nodemon server
```

### Method 2
- In this method, we simply run `npm start` to run the server
```
cd server
npm install
npm start
```

## Start the React app
- React app runs on `localhost:3000`
```
cd app/listings/
npm install
npm start
```
## Testing Application and Accessing UI
- Once `Server` and `React App` are up and running, it opens the portal in default browser on `http://localhost:3000` URL (else we can use this URL to access the portal) and we should see our “Property Bookings Catalog” application.

> Application Accessible on Browser
> 
![mern app in browser](https://github.com/chefgs/repo_images/blob/master/mern_app.png?raw=true)

> Application `See Details` response
> 
![mern see details](https://github.com/chefgs/repo_images/blob/master/mern-app-seedetails.png?raw=true)

> Server response on console for various CRUD operations
> 
![server response](https://github.com/chefgs/repo_images/blob/master/mern-app-server-resp.png?raw=true)

## GitHub Repo 
{% github https://github.com/chefgs/mern-app %} 

## GitHub Action Workflow Details
- This repo has GitHub action [CI workflow](https://github.com/chefgs/mern-app/blob/master/.github/workflows/node.js.yml) to perform Continuous integration process explained below,
  - Checks out the code into workspace root
  - Build the server and frontend app
  - Creates docker image build for server and frontend app
  - Pushes the docker image into docker hub registry

## Reference
- This repository contains the sample application for the [MongoDB and Express.js REST API tutorial](https://www.mongodb.com/languages/express-mongodb-rest-api-tutorial).

- [Getting Started with Atlas](https://docs.atlas.mongodb.com/getting-started/) guide, to learn how to create a free Atlas account, create your first cluster and get your Connection String to the database. 

- [MongoDB Indexing](https://docs.atlas.mongodb.com/atlas-search/tutorial/create-index-ui/) Doc

- [MERN Stack documentation](https://www.mongodb.com/mern-stack)