Understanding the MERN Stack for Full-Stack Development

MERN Stack logos, June 2022

Recently, I was tasked to build work on a take-home assignment for an interview where I decided to use the MERN stack for the first time. Though this wasn’t a requirement, it was something that I wanted to do for myself, to understand the stack and to grow as an engineer. I started building my MERN application by setting up MongoDB Atlas, then the Express.js server, followed by React, and finally connecting the two. I also learned that using the MERN stack has many benefits, such as scalability and a large and active community, but there are also some drawbacks which I’ll detail a bit later.

Let’s figure out exactly what this stack entails of:

• MongoDB is an open-source NoSQL database that is known for its scalability and flexibility. It uses a document-oriented data model, which allows you to work with data in a more natural way than a traditional relational database.
• Express.js is a web framework for Node.js that makes it easy to build web applications and APIs. It provides a simple and minimalistic way to handle routing, middleware, and other common web application features.
• React.js is a JavaScript library for building user interfaces. It allows you to build components that can be easily reused and composed to create complex UIs. It also uses a virtual DOM which optimizes the performance of updates.
• Node.js is a JavaScript runtime that allows you to run JavaScript on the server. It is built on top of the V8 JavaScript engine and provides an event-driven, non-blocking I/O model, making it well-suited for building scalable network applications.

Together, these technologies form a powerful stack for building modern web applications. The MERN stack allows for full-stack JavaScript development, which is a big advantage for developers that are familiar with JavaScript and want to use a single language throughout the entire stack.

You can start building a MERN application by

1. Setting up MongoDB Atlas

• Sign up for an account on MongoDB Atlas
• Create a new cluster
• Whitelist your IP address
• Create a database user
• Connect to your database using a MongoDB URI

2. Setting up the Express.js Server

• Create a new directory for your project and navigate into it
• Initialize npm by running npm init in the terminal
• Install the express library by running npm install express
• Create a new file called server.js and paste in the following code: Additionally, you can use additional libraries and frameworks (like Vue.js or Angular) to enhance the functionality of your app (like Redux for state management and webpack for bundling).

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

app.get('/', (req, res) => {
  res.send({ express: 'Hello From Express' });
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

3. Setting up React

• Install create-react-app by running npm install -g create-react-app
• Create a new React app by running create-react-app client
• Navigate into the client directory and install the Axios library by running npm install axios
• Replace the contents of the App.js file with the following code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    axios.get('/api/data')
      .then(res => {
        setData(res.data);
      });
  }, []);

  return (
    <div>
      <p>{data.express}</p>
    </div>
  );
}

export default App;

4. Connecting the Server and React

• Open the server.js file and add the following code to handle API requests:

app.get('/api/data', (req, res) => {
  res.send({ express: 'Hello from the server API' });
});

• In the terminal, navigate back to the root directory and run npm run dev to start both the server and the React app.
• Open your browser and go to http://localhost:3000 to see your application running.

I would also recommend watching this video to get started with an environment.

Pros & Cons

Like everything in life, there are advantages & disadvantages to using the MERN stack.

Advantages:

1. Full-stack JavaScript: With the MERN stack, developers can use JavaScript throughout the entire stack, from the frontend to the backend. This can make the development process more efficient, as developers don’t have to switch between different programming languages.
2. Large and active community: All of the technologies in the MERN stack are open-source and have large and active communities. This means that developers can find a lot of resources and help online, and that there are many libraries and frameworks available to extend the functionality of the stack.
3. Scalability: MongoDB and Node.js are well-suited for building scalable web applications, making the MERN stack a good choice for building large and complex web applications.
4. Flexibility: The MERN stack is flexible, MongoDB is a NoSQL database that allows for a more flexible data model, and React, allows for building reusable and composable UI components.

Disadvantages:

1. Lack of support for traditional SQL: MongoDB, being a NoSQL database, might not be suitable for certain types of applications that require complex SQL queries.
2. Complex setup: MERN stack involves setting up multiple technologies, making the initial setup process complex and time-consuming.
3. Large bundle size: React and Node.js has a relatively large bundle size which can lead to slower load times for the user if not optimized properly.