DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Guide to implement MERN Stack Web App
Saravanan Gnanaguru
Saravanan Gnanaguru

Posted on • Updated on

Guide to implement MERN Stack Web App

Property Bookings Catalog - 3-tier web app developed using MERN Stack


Table of Contents

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
The MERN architecture allows us to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON.
MERN Arch

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. 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

project

  • 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

  • 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

  • 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 to create indexing for the DB collection
mongodb+srv://<admin_user>:<password>@democluster.aurnw.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Method 2

  • In this method, we simply run npm start to run the server
cd server
npm install
npm start
Enter fullscreen mode Exit fullscreen mode

Start the React app

  • React app runs on localhost:3000
cd app/listings/
npm install
npm start
Enter fullscreen mode Exit fullscreen mode

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

Application See Details response

mern see details

Server response on console for various CRUD operations

server response

GitHub Repo

"Property Bookings Catalog" web app developed using MERN Stack

NodeJS CI Job CodeQL

Table of Contents

Introduction

This application is developed for the submission of Dev community X MongoDB Hackathon. This is a MERN stack based Web Application.

MERN 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. Regardless of which variant you choose, ME(RVA)N is the…

GitHub Action Workflow Details

  • This repo has GitHub action CI workflow 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

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post