MERN stack attack!
Tags: beginners, javascript
Published: 2020-07-27 12:31:25

## Building a ***MERN*** stack application

![MERN logos](https://external-preview.redd.it/x7vVnP3L75Wh4ApmXedKjze9b7ZuH5h7oW-4xbHMiHQ.jpg?auto=webp&s=b7d6873eed8c442bb685a083b3b4bfff6dd009ac)
 
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. ***M***ongoDB, ***E***xpressJS, ***R***eactJS, ***N***odeJS 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!
 
 
![MERN stack](https://webassets.mongodb.com/_com_assets/cms/mern-stack-b9q1kbudz0.png)
 
### ***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
```js
//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.
```js
//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
```js
//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!
 
![blkgirlcoder](https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQuOZynGNwRXa4wpMhFD8ZWPXgBtkuRrP2uZg&usqp=CAU)
 
**Credit**:
https://www.mongodb.com/what-is-mongodb
https://www.freecodecamp.org
https://nodejs.org/en/docs/
https://expressjs.com/en/5x/api.html
https://medium.com/edureka/expressjs-tutorial-795ad6e65ab3
https://expressjs.com/en/4x/api.html#app.METHOD
https://reactjs.org/docs/getting-started.html