What is MERN?

By -

1. Introduction

  • MERN stands for MongoDB, Express, React, and Node.

2. Big Picture for the MERN Architecture

  • Client (Browser):
    • ReactJS: Responsible for presentation and the user interface.
    • NodeJS & Express: Server-side responsible for business logic and file storage.
    • The server side and client side communicate with requests and responses in JSON format.
  • Database:
    • MongoDB: Responsible for persistent data storage.
    • NodeJS & Express communicate with MongoDB through database queries using the MongoDB SDK.

3. Diving into Client Side

  • React single-page application is served from the server to the browser.
  • React handles rendering everything in the browser.
  • React manages frontend or client-side routing with an extra library, react-router-dom.
  • react-router-dom helps render different React components based on the path the user enters into the URL bar of the browser.
  • The React application typically handles some front-end state that influences what is shown on the screen.
  • Developers build React components and style them.
  • React route configuration defines which React components are rendered for which path.
  • Implement state management with React hooks or Redux.

4. Understanding the Server Side

  • Decoupled Ends:
    • Frontend powered by React.
    • Backend powered by Node Express.
    • Database server powered by MongoDB.
  • Backend:
    • Built as an API (Application Programming Interface).
    • Uses a REST API (Representational State Transfer).
    • APIs perform various actions on the server, such as storing data in a database, validating user input, and retrieving data from a database.
    • REST API uses a combination of different URLs and HTTP verbs (GET, POST, PATCH, DELETE) to build endpoints that trigger different actions when a client makes a request.
    • The REST API executes code on the server.
    • The Node Express server communicates with the database.

5. More About REST

  • Client-Server Combination:
    • The server uses Node Express, which communicates with MongoDB, and the client uses React.
    • A request is a combination of a specific URL, for example, www.yourpage.com/user.
    • The URL combined with a specific HTTP verb triggers a specific action.

REST & HTTP Methods (HTTP Verbs)

  • GET: Retrieve a resource from the server.
  • POST: Create or append a resource on the server.
  • PUT: Create or overwrite a resource on the server.
  • PATCH: Update parts of an existing resource on the server.
  • DELETE: Delete a resource on the server.
  • OPTIONS: Determine whether follow-up requests are allowed (sent automatically).

6. Connecting Node & React

6.1 One Server Hosts Node API & React SPA

  • One server hosts both the Node API and the React single-page application under the same domain.
  • For example, mypage.com/ might return the single-page application, while mypage.com/api serves the endpoints for the React single-page application to communicate with.
  • The Node Express API handles incoming requests on the server. Requests targeting mypage.com/api reach the API, and other requests return the React single-page application.
  • Data is exchanged between the React app and the Node API in JSON format.

6.2 Two Separate Servers

  • One server serves the single React.js application HTML page.
  • Another server hosts the Node (Express) API, which handles incoming requests.
  • Data is exchanged between the React app and the Node API in JSON format.

6.3 MongoDB Database

  • MongoDB always has its own database server. This server could be installed on the same physical machine as the Node and React app.

Comments

Post a Comment

Popular posts from this blog

MongoDB & Mongoose - A Refresher

By -
 1. What is MongoDB? MongoDB is a no SQL database, which stores Documents in Collections instead of Records in Tables as in SQL It is used to store application data Stored data doesn't enforce a specific data schema or any relations MongoDB can also be easily connected to Node and Express, but we do not connect it directly to our front end (React) MongoDB is a powerful database and it can be easily integrated into a node express environment 2. SQL vs NoSQL NoSQL(e.g MongoDB) do not enforce a strict data schema(collections can contain documents with different schemas),  have less focus on relations, works with independent documents SQL(e.g MySQL) enforce a strict data schema(define the tables and the corresponding records, normally don't deviate from that structure ), relations are a core feature the records are related 3. Connecting React to a Database? Connecting react to the database is a bad idea It is a highly insecure approach, secure authentication is not reall...
Read more

Node.js & Express.js - A Refresher

By -
 1. What is Node.js? Like Browser is one host environment of that Javascript of frontend, Node.js is a host environment for Javascript of backend Chrome's Javascript engines V8  has all been cloned and is now maintained as a standalone project working without a browser and enriched with some extra APIs that is basically Node.js, it allows us to run Javascript outside of the browser Compare to V8, Node.js dropped some APIs(e.g. DOM API), and added some APIs(e.g. Filesystem) 2. A Simple Node.js Code Node.js code are just normal javascript code with extra node  api In Node.js runtime environment, there are a few globally function (e.g., require) Between different Node.js module (javascript file), we can transfer object through require and export A simple Node.js Code: const fs = require("fs"); const userName = "Light"; fs.writeFile("./user-data.txt", "Name: " + userName, (error) => { if (error) { console.log(error); return; } ...
Read more

WSL2配置proxychains, 使得终端走宿主机代理

By -
安装：           sudo apt-get update           sudo apt-get upgrade           sudo apt-get install proxychains4 获得宿主机 IP： cat /etc/resolv.conf | grep nameserver | awk '{ print $2 }' 查询代理软件端口：10810 编辑配置文件：sudo nano /etc/proxychains4.conf           change：socks4 127.0.0.1 9095         to：socks5 xxx.xxx.xxx.xxx 10810         中间的x是上面查出来的ip地址，10810是v2rayN局域网（不是本地）监听的端口。          并在 [ProxyList]之前添加：           # Exclude localhost           localnet 127.0.0.0/255.0.0.0 测试：           proxychains4 curl -L myip.ipip.net           proxychains4 curl -L cip.cc vscode走代理：proxychains4 code . 更新proxychains:           sudo apt-get update # This will update the list of available ...
Read more

React.js - A Refresher

By -
 1. What is React? It's a Javascript library for building user interfaces that are shown in the browser It's a browser side Javascript library running in browser It started a huge ecosystem with other third-party packages forming a framwork We use it to build the frontend of web applications React does not run on a server, React does not communicate with databases React build highly reactive modern user interfaces and do so by following a declarative approach(you define the results, not the steps that lead to the result) React using components which are UI building blocks we can define, then we compose our user interface from these components Every component also define what it should render, under which circumstance 2. React Component React component can be one of two things, it can be a Javascript function which returns jsx or it can be a Javascript class that has a render method Custom components can be used as jsx( JavaScript XML ) as well,  they should star...
Read more