Setting Up a MERN Stack Application

The MERN stack is a popular web development stack that consists of MongoDB, Express.js, React, and Node.js. It allows developers to build powerful, full-stack web applications using JavaScript. This tutorial will walk you through the steps to set up a MERN stack application from scratch.

Prerequisites

• Node.js and npm installed on your machine.
• Basic knowledge of JavaScript and web development.
• MongoDB installed or accessible via a cloud service (e.g., MongoDB Atlas).

1. Setting Up the Backend with Node.js and Express

1.1. Creating a New Directory

Create a new directory for your project:

mkdir mern-stack-app
cd mern-stack-app

1.2. Initializing npm

Initialize a new npm project:

npm init -y

1.3. Installing Dependencies

Install Express and Mongoose (for MongoDB interaction):

npm install express mongoose

1.4. Creating the Express Server

Create a file named server.js in your project directory:

touch server.js

Open server.js in your favorite editor and add the following code:

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

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

// Middleware
app.use(express.json());

// MongoDB connection
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('MongoDB connected!'))
.catch(err => console.log(err));

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

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

2. Setting Up the Frontend with React

2.1. Creating the React App

Open a new terminal window and create a React app using Create React App:

npx create-react-app client

This creates a new directory called client with a React setup.

2.2. Installing Axios

Navigate into the client directory and install Axios for making HTTP requests:

cd client
npm install axios

2.3. Creating API Calls

Open src/App.js and add code to call your Express API:

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

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

    useEffect(() => {
        axios.get('http://localhost:5000/')
            .then(response => setMessage(response.data))
            .catch(error => console.error(error));
    }, []);

    return 
{message}
;
}

export default App;

3. Connecting the Frontend and Backend

To allow CORS (Cross-Origin Resource Sharing) for your Express server, install the CORS package:

npm install cors

Then, update your server.js file to include CORS support:

const cors = require('cors');
app.use(cors());

4. Running the Application

Start the backend server:

node server.js

And start the React app from another terminal session:

cd client
npm start

Your browser should open and display messages from your backend API.

5. Conclusion

By following these steps, you have set up a full MERN stack application with a functioning backend and a React frontend. This combination allows for powerful and dynamic web applications. Explore further enhancements such as adding database models, user authentication, and deploying your application for production.

About the Author

Dorian Kane

Author

View All Posts