Introduction to the MERN Stack
Setting Up Your Development Environment
Creating the Backend with Node.js and Express.js
Connecting to MongoDB
Building the Frontend with React
Integrating the Frontend and Backend
Running and Testing Your Application
Conclusion
–> Introduction to the MERN Stack
The MERN stack is a combination of technologies that allows you to build full-stack applications using JavaScript. Here’s a brief overview of each component:
MongoDB: A NoSQL database system that utilizes a document-oriented data model, allowing for flexible and scalable data storage.
Express.js: A robust web application framework for Node.js, dedicated to facilitating the development of web applications and APIs with its minimalistic and flexible nature.
React: A prominent JavaScript library for crafting dynamic and interactive user interfaces, maintained by Facebook with a focus on efficiency and component reusability.
Node.js: A powerful JavaScript runtime environment built on Chrome’s V8 JavaScript engine, enabling the execution of JavaScript code on the server-side, and adept at handling concurrent requests with its event-driven architecture.
MongoDB: A NoSQL database that stores data in JSON-like documents.
Express.js: A web application framework for Node.js, designed for building web applications and APIs.
React: A JavaScript library for building user interfaces, maintained by Facebook.
Node.js: A JavaScript runtime built on Chrome’s V8 JavaScript engine, allowing you to run JavaScript on the server.
–> Setting Up Your Development Environment
Sure, here’s a clearer version of the text:
Before we begin, please ensure that the following are installed on your machine:
Node.js and npm (Node Package Manager)
MongoDB (You can utilize MongoDB Atlas for a cloud-based solution)
A code editor such as Visual Studio Code
To verify if Node.js and npm are installed, run the following commands in your terminal:
–> ** Creating the Backend with Node.js and Express.js**
First, let’s create a new directory for our project and navigate into it:
Initialize a new Node.js project:
Install express.js
Create an index.js file in the root of your project:
const express = require(‘express’);
const app = express();
app.get(‘/’, (req, res) => {
res.send(‘Hello, MERN Stack!’);
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(Server running on port ${PORT}));
Run the server:
node index.js
Note: You should see the message Server running on port 5000. Visit http://localhost:5000 in your browser to see the message “Hello, MERN Stack!”.
–> Connecting to MongoDB
Install the MongoDB driver:
Update index.js to connect to MongoDB:
const express = require(‘express’);
const mongoose = require(‘mongoose’);
const app = express();
// Connect to MongoDB
mongoose.connect(‘mongodb://localhost:27017/mern-tutorial’, {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => console.log(‘MongoDB connected’))
.catch((err) => console.log(err));
app.get(‘/’, (req, res) => {
res.send(‘Hello, MERN Stack!’);
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(Server running on port ${PORT}));
Note: Make sure your MongoDB server is running. If you’re using MongoDB Atlas, replace the connection string with your Atlas connection string.
–> Building the Frontend with React
In the root of your project directory, run the following command to create a new React app:
Navigate to the client directory:
Start the React development server:
Note:You should see the default React app running at http://localhost:3000.
–> Integrating the Frontend and Backend
We’ll set up a simple proxy to connect our React frontend with the Express backend. In the client directory, open the package.json file and add the following proxy configuration:
“proxy”: “http://localhost:5000“
Now, let’s fetch data from the backend. In the client/src/App.js file, update the component to fetch data from the Express server:
import React, { useEffect, useState } from ‘react’;
import ‘./App.css’;
function App() {
const [message, setMessage] = useState(”);
useEffect(() => {
fetch(‘/’)
.then(response => response.text())
.then(data => setMessage(data));
}, []);
return (
{message}
);
}
export default App;
–> Running and Testing Your Application
To run the entire application, open two terminal windows. In the first window, navigate to the root of your project directory and start the Express server:
In the second window, navigate to the client directory and start the React development server:
–> Conclusion
Congratulations! You’ve successfully set up a basic MERN stack application. You now have a foundation to build more complex applications using MongoDB, Express.js, React, and Node.js. Keep exploring and adding features to your application to enhance your skills and understanding of the MERN stack.
Feel free to share your progress and ask questions in the developer community. Happy coding!
