Getting started with MERN stack: A step-by-step guide

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.