What is MERN Stack?
MERN Stack is a JavaScript Stack that is used for easier and faster deployment of full-stack web applications. MERN Stack comprises of 4 tecnnologies namely: MongoDB, Express, React, and Node.js. It is designed to make the development process smoother and easier.
The MERN architecture allows you to easily construct a 3-tier architecture(frontend, backend, database) entirely using JavaScript and JSON. Using these four technologies you can create absolutely any application that you can think of everything that exists in this world today. Now let's understand each technology one by one.
MongoDB: MongoDB forms the M of the MERN stack and works pretty well with the JavaScript ecosystem. MongoDB is a NoSQL database in a which data is stored in documents that consist of key-value pairs, sharing a lot of resemblance to JSON.
The data is not stored in the form of tables and that's how it differs from other database programs. This is how the data stored in MongoDB looks like:
Express: Express is a flexible and clean Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based web applications.
Express helps build the backend very easily while staying in JavaScript ecosystem. It is preferred for self-projects as it helps focus on learning development and building projects pretty fast.
In MERN stack, Express will be used as backend API server which interacts with mongoDB database to serve data to client ( React ) application.
React JS: React is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps.
React lets you build up complex interfaces through simple Components, connect them to data on your backend server, and render them as HTML.
Almost all the modern tech companies from early-stage startups to the biggest tech companies like Microsoft ad Facebook use React.
The prime reason why react is used, is for Single Page Applications(SPA). SPA means rendering the entire website on one page rather than different pages of the websites.
Node JS NodeJs is a cross-platform JavaScript runtime environment, it's built on Chrome's V8 engine to run JavaScript code outside the browser, for easily building fast and scalable applications.
The main purpose of NodeJS is simple, it allows us to write our backend in JavaScript, saving us the trouble of learning a new programming language capable of running the backend.
Node.js is the platform for the application layer ( logic layer). This will not be visible to the clients. This is where client applications (React) will make requests for data or webpages.
Creating a MERN project
- Prerequisites Installation:
- Node.js and npm
- MongoDB
- Create the Backend with Node.js and Express:
- Initialize the Project:
mkdir my-project
cd my-project
npm init -y
- Install Backend Dependencies:
npm install express mongoose
- Mongoose: Library that simplifies interaction with MongoDB.
- Set Up the Server:
- Create a file called server.js and add the basic server configuration:
- Create the Frontend with React:
- Create the React Application:
npx create-react-app client
cd client
npm start
This will create a React application in the client folder.
Connect the Frontend to the Backend:
In the frontend, you can use fetch or axios to make requests to the backend created with Node.js/Express.
- Connect the Frontend to the Backend:
- In the React application, make HTTP requests to the backend to fetch or send data. For example:
- Run the Complete Project:
- Backend: In the root directory of the project (where server.js is located), run:
node server.js
Frontend: In the client directory, run:
npm start
Now you have a basic project up and running with the MERN Stack!
- Don't forget to configure environment variables to protect sensitive code information
References: https://www.mongodb.com/resources/languages/mern-stack-tutorial
Top comments (0)