MERN Stack: A complete MERN guide - Part 1

This tutorial is all about the MERN stack. We’ll outline the basics of the MERN stack and demonstrate how to use it by developing a simple CRUD application from scratch.

To show how the MERN stack works, we’ll first configure the server side by connecting Node.js and Express.js to MongoDB on the backend. Then, we’ll create some APIs. After that, we’ll walk you through building the front end, using React to build our user interfaces. Once both are complete, we’ll connect the front end to the back end.

Meanwhile, we’ll cover the following MERN stack topics:

• What is the MERN stack?
• Server setup with Express.js and Node.js
• Database management with MongoDB
• Building RESTful APIs with the MERN stack
• Building the frontend
• Setting up Create React App
• Initial project structure
• Frontend tasks and features
• Adding feature components
• Connecting the frontend and backend
• Running the frontend and backend
• Testing our MERN stack app in the browser

This demo is designed to highlight the MERN setup. The objective is to develop a simple project with the best possible structure so that you can use it as a boilerplate and elevate your MERN stack projects to meet industry standards.

What is the MERN stack?

The phrase MERN stack refers to the following technologies:

• MongoDB, a cross-platform document-oriented database program
• Express.js, a web application framework for Node.js
• React, a JavaScript library for building user interfaces
• Node.js, is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser

Server setup with Express.js and Node.js

To begin our MERN stack tutorial, we’ll show you how to set up a server with Express.js and Node.js.

npm package initialization

To create a project folder, enter the folder through the terminal, then run the following command:

$ npm init

Now it will ask you some questions about package name, version, entry point, etc. Hit enter if you want to keep the default. After that, you will get something like this:

Select yes and you’re ready to go. It creates a file named package.json.

Installing dependencies

Now, I would like to add some dependencies:

$ npm i express mongoose body-parser bcryptjs validation

Type or copy the command above and hit the enter button. You’ll see something like this:

• bcryptjs is a password hashing function designed by Niels Provos and David Mazières (will be using them later)
• body-parser allows us to get the data throughout the request
• express is our main framework
• mongoose is used to connect/interact with MongoDB
• validation (as its name implies) is used for validation

Now I want to add nodemon as a dev dependency. If you don’t want to add this, you can skip it — it’s optional.

$ npm i -D nodemon

nodemon is a utility that will monitor for any changes in your source and automatically restart your server.

At that point, your package.json should look like this:

Setting the entry point

Now create a file named app.js for our entry point. You can create this from the project folder with the command below (on Mac):

$ touch app.js

Then paste the code below:

// app.js

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('Hello world!'));

const port = process.env.PORT || 8082;

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

Now, run the command

$ node app

You will see Server running on port 8082. You can also check it from the browser: open the browser and enter http://localhost:8082.

At this point, if we change anything, we need to restart the server manually. But if we set up nodemon, then we don’t have to restart it every time; nodemon will watch if there is any change and restart the server automatically.

So what you need to do for that is a little change to the scripts in our package.json file. See below:

// package.json

{
  "name": "mern_a_to_z",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "app": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nurislam03/MERN_A_to_Z.git"
  },
  "author": "Nur Islam",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/nurislam03/MERN_A_to_Z/issues"
  },
  "homepage": "https://github.com/nurislam03/MERN_A_to_Z#readme",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "mongoose": "^5.5.15",
    "validation": "0.0.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

So, now you can run your project using this command:

$ npm run app

If you get any error at this point, then run the commands below:

$ npm install 
$ npm run app

You will see the following changes in your terminal if everything goes right:

Read the next tutorial - part 2 here. If you want to skip part 2 and start exploring the frontend part then read part 3 here.

You can visit my GitHub to see both the server-side and client-side portions of this MERN stack tutorial. You can also find the complete repo for our MERN stack example app on GitHub.

Originally published at https://blog.logrocket.com on February 26, 2021.