MERN Stack: The Complete Guide Step by Step

The MERN Stack Tutorial is a basic CRUD application in which React.js consumes the frontend, Node.js as a server platform, the Express web framework of Node.js, and MongoDB as a NoSQL database.

MERN Stack

MERN stands for MongoDB, Express, React.js, and Node.js. React.js is a very famous UI library provided by Facebook.

We are using Express web framework, which gives us Routing functionality to our application and Middlewares through which we can filter our HTTP requests.

First, we must build the front end using React.js, set up routing, and create a basic form. After that, we build the backend using the express framework.

Step 1: Draft ReactJS Application.

To set up react application at the front end, we use the create-react-app starter kit to initialize our application, so go to the terminal. If you are a Windows user, please open CMD in Administrator mode and type the following.

npm install -g create-react-app

If you are MAC or Linux user, please type the following command.

sudo npm install -g create-react-app

Go to your project directory and type the following command

create-react-app react-frontend

I have given our project’s name react-frontend; you can share whatever you want. It will take some time to initialize our app, and it also installs project dependencies.

After that, go into the project folder. In my case, it is react-frontend. Type the following command.

npm start

At http://localhost:3000/

The development server is started, and the basic boilerplate will show in the browser.

Step 2: Install React and ReactDOM.

We need to set up the react-router-dom package. It provides us with client-side routing for our web application. So download this package via npm.

npm install --save react-router-dom

Note:  I am using React Router version 4.1.1, which is new from the previous version of the routing package and is based on components.

I am providing you my package.json file, so you do not have to worry about it, and if you have any problem, please check out all the dependency versions with mine.

{
  "name": "react-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.1",
    "react-scripts": "0.9.5"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Now define your routes in an index.js file in the src directory.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import App from './App';

ReactDOM.render(
  <Router>
      <div>
        <Route exact path='/' component={App} />
      </div>
  </Router>,
  document.getElementById('root')
);

I am using an ES6 version of JavaScript, importing all the modules from downloaded packages. Here  I am rendering routes as components. Until now, I have defined only one app route: our app route.

Step 3: Make a components folder.

Create one directory in src called components.

In that, create one component called AddItem.js.

// AddItem.js

import React, { Component } from 'react';

class AddItem extends Component {
  render() {
    return (
        <div>
          <h2>Welcome to Add Item</h2>
        </div>
    );
  }
}

export default AddItem;

We need to import this component to the index.js file and register a route for this component.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import App from './App';
import AddItem from './components/AddItem';

ReactDOM.render(
  <Router>
      <div>
        <Route exact path='/' component={App} />
        <Route path='/add-item' component={AddItem} />
      </div>
  </Router>,
  document.getElementById('root')
);

Now, go to this URL: http://localhost:3000/add-item

You will see “Welcome to Add Item.”

Now, go to this URL: http://localhost:3000.

You will see “Welcome to React.”

Possible Errors:

A <Router> may have only one child element

Possible Solutions:

// index.js 

<Router>
      <div>
        <Route exact path='/' component={App} />
        <Route path='/add-item' component={AddItem} />
      </div>
  </Router>

Wrap <div> tag around the Route component, and It will solve this issue.

Step 4: Create a form.

Add the Bootstrap CSS framework to our application. So copy the CDN from an official bootstrap website and put it into the index.html file.

<!-- index.html -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Now, add the bootstrap classes to our add-item.js page

Possible Errors:

Unknown DOM property class.

Possible Solutions:

Use the className property instead of class in React application.

Create a form to submit the item to the server.

// AddItem.js

import React, { Component } from 'react';

class AddItem extends Component {

  constructor(props) {
      super(props);
      this.state = {value: ''};

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
      this.setState({value: event.target.value});
    }

    handleSubmit(event) {
      alert(this.state.value);
      event.preventDefault();
    }

    render() {
      return (
        <div className="container">
          <form onSubmit={this.handleSubmit}>
            <label>
              Add Item:
              <input type="text" value={this.state.value} onChange={this.handleChange} className="form-control"/>
            </label><br/>
            <input type="submit" value="Submit" className="btn btn-primary"/>
          </form>
      </div>
      );
    }
  }

export default AddItem;

I have used ES6 class syntax. React is all about state change, so first, I have set the state to null, and then when the user starts typing in the text box, the state is changed dynamically.

The user puts whatever value in it, and the state also changes and sets the matter according to it. 

After the user submits the form, the state value, which is set, is sent to the server. 

So, now we need to send that value to our Node.js server. 

I am using one AJAX request library called Axios, which is only used for AJAX requests to the server.

Step 5: Make the ItemService.js file.

Create a service file in the components folder for Items called ItemService.js and put the following code in it.

// ItemService.js

import axios from 'axios';

class ItemService {

  sendData(data) {
    axios.post('http://localhost:4200/items/add/post', {
    item: data
  })
  .then(function (response) {
      console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  }
}

export default ItemService;

Here, I am using the axios library, so I have sent the post request to the server, which is the express node server.

Now we need to import this file into our AddItem.js file.

// AddItem.js

import React, { Component } from 'react';
import ItemService from './ItemService';

class AddItem extends Component {

  constructor(props) {
      super(props);
      this.state = {value: ''};
      this.addItemService = new ItemService();

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
      this.setState({value: event.target.value});
    }

    handleSubmit(event) {
      event.preventDefault();
      this.addItemService.sendData(this.state.value);
      this.props.history.push('/');
    }

    render() {
      return (
        <div className="container">
          <form onSubmit={this.handleSubmit}>
            <label>
              Add Item:
              <input type="text" value={this.state.value} onChange={this.handleChange} className="form-control"/>
            </label><br/>
            <input type="submit" value="Submit" className="btn btn-primary"/>
          </form>
      </div>
      );
    }
  }

export default AddItem;

Created the object of ItemService class and called its sendData method. Then, pass the input value as a parameter, and be ready to go.

Step 6: Make a nodejs express project.

We need to create a backend for our application, so I am using node.js and express web framework.

Create a project folder, go to that directory, and put the following command in your terminal.

npm init

After answering all the data, your root folder package.json file will be created. This file is configurable for our dependencies, so when we download new packages from Node Package Manager, the package.json file will automatically update.

Step 7: Install the expressjs framework.

Get the Express package from Node Package Manager by typing the following command on the terminal.

npm install --save express

Possible Error Info: npm WARN install Refusing to install express as a dependency of itself

If you find the above error during installation, make sure your project name must not contain the “express” word.

Step 8: Make an app.js file.

Create a file in root called “app.js.” This is our main server file which bootstraps the node server and serves some static files. For example, please put the following code in it.

// app.js

var express = require('express');
var app = express();
var port = 4200;
app.listen(port, function(){
  console.log('hello world');
})

Now go to the terminal, and if you type node app, you will get hello world in a console.

If we do not want to restart the server manually, we can use one package called nodemon. It is the kind of server that reloads whenever we change the file.

npm install -g nodemon

Change the package.json file and add the following line in the “scripts” object.

"start": "nodemon app.js"

When you type in the terminal “npm start,” it will bootstrap the server, and when we change the files, it will automatically restart.

Switch to chrome and hit: http://localhost:4200. We get “Hello Express” in the browser.

Step 9: Install CORS Middleware.

Create Mongoose database connection and also use CORS middleware to request cross-origin domain. Here we are using CORS middleware to bypass the security.

// app.js

var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var port = 4200;
var cors = require('cors');

// Mongoose connection with mongodb
mongoose.Promise = require('bluebird');
mongoose.connect('mongodb://<uname>:<pwd>@ds139322.mlab.com:39322/aufinancex')
    .then(() => { // if all is ok we will be here
      console.log('Start');
    })
    .catch(err => { // if error we will be here
        console.error('App starting error:', err.stack);
        process.exit(1);
    });

// Required application specific custom router module
var itemRouter = require('./src/routes/itemRouter');

// Use middlewares to set view engine and post json data to the server
app.use(express.static('public'));
app.use(cors());
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.use('/items', itemRouter);

// Start the server
app.listen(port, function(){
  console.log('Server is running on Port: ',port);
});

Step 10: Make routes for our application.

Now, create an itemRouter.js file in the src >> routes directory.

I have coded all the CRUD functionality at the backend, so don’t worry about it.

I have used the Mongoose model to insert, get, update and delete the data.

// itemRoutes.js

var express = require('express');
var app = express();
var itemRouter = express.Router();

// Require Item model in our routes module
var Item = require('../models/Item');

// Defined store route
itemRouter.route('/add/post').post(function (req, res) {
  var item = new Item(req.body);
      item.save()
    .then(item => {
    res.json('Item added successfully');
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});

// Defined get data(index or listing) route
itemRouter.route('/').get(function (req, res) {
  Item.find(function (err, itms){
    if(err){
      console.log(err);
    }
    else {
      res.json(itms);
    }
  });
});

// Defined edit route
itemRouter.route('/edit/:id').get(function (req, res) {
  var id = req.params.id;
  Item.findById(id, function (err, item){
      res.json(item);
  });
});

//  Defined update route
itemRouter.route('/update/:id').post(function (req, res) {
  Item.findById(req.params.id, function(err, item) {
    if (!item)
      return next(new Error('Could not load Document'));
    else {
      // do your updates here
      item.item = req.body.item;

      item.save().then(item => {
          res.json('Update complete');
      })
      .catch(err => {
            res.status(400).send("unable to update the database");
      });
    }
  });
});

// Defined delete | remove | destroy route
itemRouter.route('/delete/:id').get(function (req, res) {
  Item.findByIdAndRemove({_id: req.params.id},
	   function(err, item){
		if(err) res.json(err);
		else res.json('Successfully removed');
	});
});

module.exports = itemRouter;

Step 11: Create a mongoose schema.

Create a model for Mongoose Schema. For example, create a new directory in the src folder called models and then make another file called Item.js.

// Item.js

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

// Define collection and schema for Items
var Item = new Schema({
  item: {
    type: String
  },

},{
	collection: 'items'
});

module.exports = mongoose.model('Item', Item);

Possible Errors:

XMLHttpRequest cannot load http://localhost:4200/items/add/post. Response to a preflight request does not pass the access control check: No ‘Access-Control-Allow-Origin’ header is on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access.

Possible Solutions:

Use a middleware package called ‘cors‘ in the express application

npm install --save cors

Please include this in the app.js file in the node.js Express project and add it as a middleware

//app.js

var cors = require('cors');

app.use(cors());

Now, switch to the URL: http://localhost:3000/add-item

You can see one form but the item name, and if your backend database connection is excellent, you can insert the data into the mongo database and redirect it back to your home router.

Step 12: Register the routes at the front end.

We need to register the index route to list the items.

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import App from './App';
import AddItem from './components/AddItem';
import IndexItem from './components/IndexItem';

ReactDOM.render(
  <Router>
      <div>
        <Route exact path='/' component={App} />
        <Route path='/add-item' component={AddItem} />
        <Route path='/index' component={IndexItem} />
      </div>
  </Router>,
  document.getElementById('root')
);

Create a new file in components called IndexItem.js

// IndexItem.js

import React, { Component } from 'react';
import ItemService from './ItemService';
import axios from 'axios';
import TableRow from './TableRow';

class IndexItem extends Component {

  constructor(props) {
      super(props);
      this.state = {value: '', items: ''};
      this.addItemService = new ItemService();
    }
    componentDidMount(){
      axios.get('http://localhost:4200/items')
      .then(response => {
        this.setState({ items: response.data });
      })
      .catch(function (error) {
        console.log(error);
      })
    }
    tabRow(){
      if(this.state.items instanceof Array){
        return this.state.items.map(function(object, i){
            return <TableRow obj={object} key={i} />;
        })
      }
    }

    render() {
      return (
        <div className="container">
            <table className="table table-striped">
              <thead>
                <tr>
                  <td>No.</td>
                  <td>Item</td>
                </tr>
              </thead>
              <tbody>
                {this.tabRow()}
              </tbody>
            </table>
        </div>
      );
    }
  }

export default IndexItem;

Here, I have sent the axios to get a request to the node.js server, and in response, we are getting the data.

So we are rendering that data in our ItemIndex.js file and creating one more component, which is only responsible for making the table.

To create one more component called TableRow.js

// TableRow.js

import React, { Component } from 'react';

class TableRow extends Component {
  render() {
    return (
        <tr>
          <td>
            {this.props.obj._id}
          </td>
          <td>
            {this.props.obj.item}
          </td>
          <td>
            <button className="btn btn-primary">Edit</button>
          </td>
          <td>
            <button className="btn btn-danger">Delete</button>
          </td>
        </tr>
    );
  }
}

export default TableRow;

So Indexing of data is complete till now.

Now, the remaining is editing and deleting.

Step 13: Make an editItem.js file.

Create a new edit file in components called “EditItem.js.” Please put the following code in it.

// EditItem.js

import React, { Component } from 'react';
import axios from 'axios';

class EditItem extends Component {

  constructor(props) {
      super(props);
      this.state = {items: ''};
  }

  componentDidMount(){
    axios.get('http://localhost:4200/items/edit/'+this.props.match.params.id)
    .then(response => {
      this.setState({ items: response.data });
    })
    .catch(function (error) {
      console.log(error);
    })
  }

  render() {
    return (
          <div className="container">
            <form onSubmit={this.handleSubmit}>
              <label>
                Edit Item:
                <input type="text" value={this.state.items.item}  className="form-control"/>
              </label><br/>
              <input type="submit" value="Update" className="btn btn-primary"/>
            </form>
        </div>
    );
  }
}

export default EditItem;

Here I am fetching exact editable data from the database via their  _id

Also, put an edit link in the TableRow.js file.

// TableRow.js

<Link to={"/edit/"+this.props.obj._id} className="btn btn-primary">Edit</Link>

Register the route in the index.js file.

// Index.js

import EditItem from './components/EditItem';
<Route path='/edit/:id' component={EditItem} />

Step 14: Update the data.

Updating our data, so we need to change the EditItem.js file

// EditItem.js

import React, { Component } from 'react';
import axios from 'axios';
import ItemService from './ItemService';

class EditItem extends Component {

  constructor(props) {
      super(props);
      this.addItemService = new ItemService();
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = {value: '' };
  }

  componentDidMount(){
    axios.get('http://localhost:4200/items/edit/'+this.props.match.params.id)
    .then(response => {
      this.setState({ value: response.data});
    })
    .catch(function (error) {
      console.log(error);
    })
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    this.addItemService.updateData(this.state.value,this.props.match.params.id);
    this.props.history.push('/index');
  }

  render() {
    return (
          <div className="container">
            <form onSubmit={this.handleSubmit}>
              <label>
                Edit Item:
                <input type="text" value={this.state.value.item} onChange={this.handleChange}  className="form-control"/>
              </label><br/>
              <input type="submit" value="Update" className="btn btn-primary"/>
            </form>
        </div>
    );
  }
}

export default EditItem;

We need to code the update function in the ItemService.js file

// ItemService.js

  updateData(data, id){
    axios.post('http://localhost:4200/items/update/'+id, {
      item: data
    })
    .then(res => this.setState({ items: res.data }))
    .catch(err => console.log(err))
  }

When you edit the file and update the data, you will redirect the index.js component, and when you refresh the page, the data will be updated.

Step 15: Delete the data.

We proceed to delete the data. So, we need to modify the TableRow.js file, where we have put the delete button.

// TableRow.js

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import ItemService from './ItemService';

class TableRow extends Component {

  constructor(props) {
      super(props);
      this.addItemService = new ItemService();
      this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.addItemService.deleteData(this.props.obj._id);
  }
  render() {
    return (
        <tr>
          <td>
            {this.props.obj._id}
          </td>
          <td>
            {this.props.obj.item}
          </td>
          <td>
          <Link to={"/edit/"+this.props.obj._id} className="btn btn-primary">Edit</Link>
        </td>
          <td>
            <form onSubmit={this.handleSubmit}>
              <input type="submit" value="Delete" className="btn btn-danger"/>
            </form>
          </td>
        </tr>
    );
  }
}

export default TableRow;

The next step is to code the ItemService.js file.

// ItemService.js

deleteData(id){
    axios.get('http://localhost:4200/items/delete/'+id)
    .then(console.log('Deleted').catch(err => console.log(err))
  }

When you delete the button and refresh the page, we can see that the item has been removed.

Note: In the React.js project, generally, page refresh is not worth it, but I have created this project to showcase how we can work with both React.js and Node.js

GitHub Links

1. React.js Project
2. Node.js Express Project

GitHub Steps to Use  MERN Stack

1. Clone The reactfrontend project repo.
2. Go to the project folder
3. and run the command “npm install” in your terminal
4. after that, run the command “npm start.”
5. Clone the expressbackend repo.
6. Go to the project folder
7. run the command “npm install” in your terminal
8. In the app.js file, change MongoDB URI to your particular URI
9. Run the command “npm start.“
10. Now, go to this URL: http://localhost:3000/add-item.

That’s it.