MERN Stack Application - Part 1

🕘 September 23, 2017 | 3 Minute Read

This post will describe the steps for setting up and deploying a MERN stack application.

MongoDB + Express + ReactJS + NodeJS with Swagger.

To begin with lets go through each of the players involved.

MongoDB: A popular NoSQL database. Read More
Express: Web-Application framework for NodeJS. Read More
ReactJS: A Frontend Framework for building Single-Page-Applications. Read More
NodeJS: A Server Framework built using JavaScript. Read More

All above modules will require NodeJS to be installed. Follow the instructions here to install NodeJs.

To use MongoDB locally follow the installation instructions here. Alternatively use mLab Database-as-a-Service provider for MongoDB.

Create a MERN stack ToDo Application

Install the following node dependencies

# install create-react-app cli
yarn global add create-react-app

# create a react application
create-react-app mern-todo

cd mern-todo

# install other npm dependencies

## express api router
yarn add express cors body-parser

## mongodb driver
yarn add mongodb

## swagger json generator
yarn add swagger-jsdoc

Add main.js node entry-point file

// @file: mern-todo/main.js

// imports
const path = require('path');
const http = require('http');

// create express instance
const express = require('express');
const app = express();

// enable cors
const cors = require('cors');
app.use(cors({
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false,
  'optionsSuccessStatus': 204
}));

// add middlewares
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

// server static files from react /build folder
app.use(express.static(path.join(__dirname, '/build')));

// add the routes
app.get('/api/test', (req,res) => res.send('It works!'));
// return 404 when api route not found
app.use('/api/*', (req, res) => res.status(404).send());

// add error handler for api errors
const isDev = true;
app.use((err, req, res, next) => {
  res.status(500).json({
    error: 500,
    message: 'Internal Server Error!',
    stack: isDev
      ? err.stack
      : null
  })
});

// handle any unhandled route
// redirect to build/index
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/build/index.html'));
  res.end();
});


// start the http server
app.listen('8080', () => {
  console.info('Server listening @ http://localhost:8080');
});

Finally build the react application and run the server

# build the react application
npm run build

# start the http server
node main.js

Lets test our apis routes

curl -X GET http://localhost:8080/api/test
- Result ‘It Works!’
curl -X GET http://localhost:8080/api/login
- Result 404:Not Found

Now we have the server running we can access the react application at http://localhost:8080/

Checkout the sample application here. Still under development.

In Part-2 we will look at creating a database service for the ToDo application

MERN Stack Application - Part 2 »

A Developer' Blog

MERN Stack Application - Part 1

Create a MERN stack ToDo Application