MERN stack attack!

Building a MERN stack application

If you are learning to build single-page web applications in JavaScript you most likely have heard the term MERN. The MERN stack is a go-to for building dynamic web interfaces. If you haven't heard of it yet, not allow me to introduce you!

What's a development stack?

A developer's stack is the libraries, tools, languages, and development environments a programmer uses to develop an application. The MERN stack in particular is often a seamless design process to implement. MongoDB, ExpressJS, ReactJS, NodeJS are the components or technologies that are stacked together to handle the front-end and back-end of a web application. "The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON." stated on MongoDB.com. Each of the technologies are an important part of the development process and work together to create robust web applications. Let's meet the team!

MongoDB: Document-oriented Database

The simplicity of learning and using Mongo is the reason it is one of the more popular databases for modern applications. Its simplification doesn't take away from its ability to meet complex requirements. MongoDB non-relational databases provide flexible 'schemas' that hold any data that is stored by the application in JSON-like documents to be retrieved at a later time.

The Setup

Here's a glimpse at a MongoDB database setup

//run the following command 
//model.js
//create a table 
db.createCollection('collectionName');
//insert records into the collection
db.collectionName.insert(
  {
    id : 1,
    name : "Jessa",
    location : "New Orleans, LA"
});
//send a query
db.collectionName.find({name : "Jessa"}).forEach(printjson);

ExpressJS: Server-Side Framework

Express is the de facto standard server framework for NodeJS. The huge amount of modules available on npm provide flexibility and the minimalistic interface makes this lightweight framework very popular for application development. Express is used to quickly build the back-end using NodeJS. In express, a middleware function can access request and response objects and perform task such as executing code, manipulating the objects themselves, ending a response-request cycle and invoking the next middleware function in the cycle.

The Setup

Here's how to create a simple connection between the front end and server side of an application.

//make a directory 
$ mkdir react-express-myFirstApp
// open the folder 
$ cd react-express-myFirstApp
//initialize the project
$ npm init -y
//install express
$ npm add express

//package.json
//add 'node index.js' to the start key to the script section thie will start the node server

//index.js
//create a basic route
const express = require('express');
//create the application
const app = express();
//assign a port 
const port = 3000;

// send a json response 
app.get('api/getGreeting'(req, res) => { 
  res.send('Greetings Earthling!')
}); 

//listen for the connection
server.listen(port, () => { 
  console.log(`Server running at http://localhost:${port}/ better catch it!`); 
}); 
//In the browser run to see the greeting
'http://localhost:3000/api/getGreeting'

//test server from the command line
$ npm start

React: Client-Side User Interface Library

Mainly used for single page applications, ReactJS is used for handling the views or user interface reusable components. React's DOM document object model only refreshed parts of the page increasing the performance of a web application and decreasing the time spent programming for the developer. It's well organized and easy to read even for novice developers. In the stack React's job is to build a user interface consisting of components and render the data on the server as HTML.

The Setup

Here's a glimpse at starting a simple React application

//run in the terminal
$ npm install create-react-app --global
//create a react app and place it in the client folder
$ create-react-app client
//start the application to see the app!
$ npm start

//inside of the client/package.json add a "proxy": "http://localhost:3000/api/getGreeting"

//install packages 
$ npm install -g react-router-dom

//client/index.js
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App/App';

render((
    <BrowserRouter>
        <App/>
    </BrowserRouter>
), document.getElementById('root'));

//See Reactjs.org for steps on how to extend components

NodeJS: JS Runtime Environment

NodeJS package ecosystem npm is the largest ecosystem of open-source libraries in the world! NodeJS is a lightweight and efficient javascript run-tme built on google chrome's v8 javascript engine. The v8 engine will give the application the ability to make request data from the server while simultaneously performing other tasks. Every instance of an npm command is accessing one of the thousand node package managers to enhance the application.

Conclusion

Some other popular technology stack are Linux-Apache-MySQL-PHP referred to as LAMP, PostgreSQL-Express-React-NodeJS referred to as PERN, Mongand DB-ExpressJS-AngularJS-NodeJS referred to as MEAN. Currently MEAN artitecture is a staple as well as many developers still choose to work with AngularJS in place of ReactJS. Whichever route you choose be sure to explore other technologies on your journey to becoming a senior developer. Hopefully this guide helps you to get started build dynamically applications. Practice makes a programmer so jump in and start coding. Thank you for reading!