In this article, we are going in-depth for MERN tech stack. A very popular programming stack these days. We will look at individual components of MERN stack, their usage, how they work together to create a full-stack application.

Components of MERN stack

There are four components of MERN stack.

• M (MongoDB)
• E (Express)
• R (React)
• N (Node)

MongoDB

For database, we have MongoDB, which is a NoSQL, document-based Database, which means we store data in JSON-like objects.

Express

Express is a web application framework, which helps us to create RESTful APIs, which our front end can consume and make requests.

React

React is our front end in MERN stack. Using React we can build user interfaces based on components.

Node

And finally we have Node JS, which is a powerful JavaScript server platform.

MERN folder Structure

MERN will have two folders when we are working on it locally. So, for example, we can name our front-end Client and Backend Server. After we are done developing, or completed first iteration of project, we can deploy these separately to individual servers.

BACKEND

Backend will constitute of all the things that will make up majority of our full stack applications. It will include models, controllers, routes. Backend will also include an index.js (or server.js) file, which basically is the entry point into our backend.

Models

Before, we create functions to fetch some data, or to update some field based on an ID, which need to define models first. Models define schema for the data to be stored in the database. Like for example, in the User Schema, you will need name, email, age, education, skills, experience, and so on. Schema help us to have a pre-defined structure for your data.

Routes

Routes defines the URL pattern and associated controller for that specific route. For example, if you want to fetch user information, you only want that user’s information not all of the users’ information.

router.get("/:userID/information", getUserInformation)

The above route is telling the getUserInformation controller that it needs to accept a userID and fetch the required information.

router.get("/allUsersInformation", getAllUsersInformation)

Unlike the first route, the above route is telling the controller that there is no parameter to accept and that it needs to fetch information of all users.

So, in routes, we will defines routes for each scenario, that way we will only get the data we need, and makes it easier to understand.

Controllers

This is where the magic happens. We defined our models, and we defined routes. Now, we need to define the logic for each function.

For example, if you want to get of the user’s information, you will need to do the following.

import UserModel from "./Models/User";

export const getAllUsersData = async(req, res) => {
    try{
       const users = await UserModel.find({})
       res.status(200).json(users)
     }catch(err){
      res.status(404).json({message:err.message})

The above code first imports UserModel. It then defines getAllUsersData controller which fetches all of the users data using the UserModel we imported earlier. Find method with no parameters will find and fetch all of the users and return to us, which we can send back to the frontend.

.env

Last but not least, you need to manage your environmental variables. It’s really important because you don’t really want to hard code your password, API credentials, connection strings and other important variables into your main files. Rather, you want to put all of the important variables into .env file. That way, no one will be able to access your secret files in your source code, once it’s deployed.

• create a .env file
• add .env to .gitignore
• list all of your important variables in .env file.

MONGO_URL = 'mongodb......mongodb.net/?retryWrites=true&w=majority'
JWT_SECRET = "secretKeyHere"
PORT = 3001

• To get the variable in, let’s say your index.jsx file, you need to do the following:

process.env.MONGO_URL
That way you will be able to retrieve and use the value stored in .env file.

FrontEnd

Frontend will constitute all of the files for UI. That means everything from Navigation to reusable components to screens; all will be defined in the front-end.

Scenes

For good organization, you need to separate your frontend pages into their respective folders. For example, for Homepage, you need to place it into separate home folder, and repeat for other pages well.

To do that, you need to simple create a new folder, e.g., Home and create a new file inside, named index.jsx. That index.jsx file will act as official file for your Homepage but remember only file named as index.jsx will be considered as official file for that page.

Components

You also want to make separate files for components that are used frequently. That way, you are not copying pasting your code again and again. Rather you can just import components where you want to use them.

DRY – DON’T REPEAT YOURSELF
Always make components for files that you are going to use frequently.

Redux

Although not necessary to use, but Redux makes it easier to store global variables. Because the values are stored globally, we don’t need to pass values in props, which prevents prop drilling.

How MERN stack works

Once our backend functionalities are done, we can move to frontend of our application. As described above, we will create several frontend pages, components according to our use case. We will then request our backend server to do the CRUD functionalities for our application. Which basically means that we will request our server for Creating, Updating, Reading and Deleting objects.

Ending Note

This was the very basic, beginner friendly article for MERN Stack. It briefly describes what the MERN stack is, the folder structure and how it works together.

In the next MERN articles, we will build projects using MERN stack.