Ravindra BagaleCourses & study guides मराठी Track your progress

Chapter 12: Technology Stacks — LAMP, LEMP, MEAN, MERN

12.4 MEAN and MERN architecture

By Last updated:

Think of a MERN app like a restaurant: the menu card in your hand is the React frontend (runs in the browser), the waiter is Nginx, the kitchen is the Express API, and the store room is MongoDB. Technically, the browser downloads static JS files, then makes HTTP calls to /api/..., which Nginx proxies to Node.js, which queries MongoDB. Mauli Dairy's notes app needs these same four parts.

Both stacks use JavaScript everywhere: the frontend (Angular or React) runs in the browser, the backend API (Express on Node.js) runs on the server, and data is stored as JSON-like documents in MongoDB.

                     +------------------------- EC2 -----------------------------+
                     |                                                           |
  Browser  ──:80──►  |  Nginx                                                    |
  (runs the SPA)     |   ├── /        → static build of React/Angular            |
                     |   │             (/var/www/mern  or  /var/www/mean)        |
                     |   │             try_files $uri /index.html                |
                     |   └── /api/*   → proxy_pass http://127.0.0.1:5000         |
                     |                    Node.js + Express API (pm2)            |
                     |                          │ Mongoose                       |
                     |                          ▼                                |
                     |                    MongoDB 127.0.0.1:27017 (mongod)       |
                     +-----------------------------------------------------------+

Why build the frontend? React/Angular dev servers (npm start, ng serve on ports 3000/4200) are only for development. For production we run npm run build / ng build, which produces plain HTML/CSS/JS files that Nginx serves very efficiently as a static site.

Ravindra Bagale's Tip

Many students run the React or Angular dev server (npm start, ng serve) on the server and open port 3000 or 4200. In production always build, and serve static files with Nginx – only 80/443 to the outside.

Lab

Chala, varcha diagram kagdavar kadha aani Mauli Dairy chya notes app sathi pratyek bhagasamor port liha: Nginx, Express API aani MongoDB. Mag konte ports security group madhe open hotil aani konte kadhich nahi te khuna kara.