Getting started with MERN stack: A step-by-step guide
Published: 2023-02-15 17:14:19

MERN stack is a popular web development technology stack that consists of four technologies: MongoDB, Express, React, and Node.js. MERN stack provides a simple, scalable, and efficient way to build web applications. In this blog post, we will cover how to get started with MERN stack and build your first web application.

**Step 1: Install Node.js and MongoDB**
The first step in getting started with MERN stack is to install Node.js and MongoDB on your machine. Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine, and it allows you to run JavaScript on the server-side. MongoDB is a popular NoSQL database that stores data in a JSON-like format.

You can download and install Node.js from the official website: https://nodejs.org/en/. After installing Node.js, open your terminal and run the following command to verify the installation:

```
node --version
```
You should see the version number of Node.js in the terminal.

To install MongoDB, you can download the appropriate version from the official website: https://www.mongodb.com/try/download/community. Follow the installation instructions to install MongoDB on your machine.

**Step 2: Create a new Node.js project**
Now that you have Node.js and MongoDB installed, you can create a new Node.js project. Open your terminal and run the following commands to create a new project directory and navigate to it:

```
mkdir my-mern-app
cd my-mern-app
```
Next, run the following command to initialize a new Node.js project:

```
npm init -y
```
This will create a package.json file in your project directory.

**Step 3: Install required dependencies**
In order to build a MERN stack application, you will need to install several dependencies. Run the following command to install the required dependencies:

```
npm install express mongoose body-parser cors
```
express: A Node.js framework for building web applications.
mongoose: An Object Data Modeling (ODM) library for MongoDB and Node.js.
body-parser: A middleware for handling JSON, raw, text, and URL-encoded form data.
cors: A middleware for handling Cross-Origin Resource Sharing (CORS) requests.

**Step 4: Create a server using Express**
The next step is to create a server using Express. Create a new file called server.js in your project directory and add the following code:

```
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(cors());

app.get('/', (req, res) => {
  res.send('Hello from MERN stack!');
});

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}.`);
});
```
This will create a new Express server that listens on port 5000 and responds with "Hello from MERN stack!" when you make a GET request to the root endpoint (/).

**Step 5: Connect to MongoDB using Mongoose**
The next step is to connect to MongoDB using Mongoose. In your server.js file, add the following code to connect to MongoDB:

```
const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/my-mern-app', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => {
  console.log('Connected to MongoDB.');
}).catch(error => {
  console.error(error);
});
```
This will connect to a MongoDB database called my-mern-app on your localhost. Make sure that MongoDB is running on your machine before running the server.

**Step 6: Create a React application**
Now that you have a server set up, you can create a React application to interact with it. Run the following command to create a new React application:

```
npx create-react-app client
```
This will create a new React application in a directory called client.

**Step 7: Add a proxy to your React application**
In your React application's package.json file, add the following line:

```
"proxy": "http://localhost:5000"
```
This will allow your React application to make requests to your server without running into any Cross-Origin Resource Sharing (CORS) issues.

**Step 8: Create a simple React component**
In your React application's App.js file, add the following code to create a simple React component:

```
import React, { useEffect, useState } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/')
      .then(res => res.text())
      .then(data => setMessage(data));
  }, []);

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default App;
```
This will fetch the message from your server and display it in your React application.

**Step 9: Start your application**
To start your MERN stack application, run the following command in your project directory:

```
npm run start
```
This will start your server and your React application. You can then navigate to http://localhost:3000 in your web browser to see your MERN stack application in action.

**Conclusion**
In this blog post, we covered how to get started with MERN stack and build your first web application. We walked through the process of installing Node.js and MongoDB, creating a new Node.js project, installing required dependencies, creating a server using Express, connecting to MongoDB using Mongoose, creating a React application, adding a proxy to your React application, creating a simple React component, and starting your application. With this knowledge, you can start building your own MERN stack applications and take your web development skills to the next level.


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b82gp7cri9ipeyyozhke.png)](https://www.buymeacoffee.com/bhavikgevariya)

Small support comes a long way!