How to Build and Deploy a Full-Stack MERN Application

The MERN stack is a popular technology stack for building full-stack web applications. It consists of MongoDB, Express, React, and Node.js, each of which plays a vital role in creating a modern web app. In this article, we will go through the process of building a full-stack MERN application and deploying it to a live server.

What is the MERN Stack?

• MongoDB: A NoSQL database used to store data in a flexible, JSON-like format.
• Express: A lightweight web application framework for Node.js, which helps manage server-side logic.
• React: A frontend JavaScript library used to build user interfaces with reusable components.
• Node.js: A JavaScript runtime used to build the backend server-side logic and APIs.

Steps to Build a Full-Stack MERN Application

1. Setting Up the Backend (Node.js + Express + MongoDB):

• Initialize a Node.js project and install required dependencies like express, mongoose, and cors.
• Set up routes in Express to handle API requests (e.g., GET, POST, PUT, DELETE).
• Use Mongoose to connect to MongoDB and define data models.
• Set up a server with Express and configure it to handle requests.
• Implement CRUD (Create, Read, Update, Delete) operations to interact with MongoDB. Example backend code:

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

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

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

// Define a simple model
const User = mongoose.model('User', { name: String, email: String });

// API route to get all users
app.get('/api/users', async (req, res) => {
  const users = await User.find();
  res.json(users);
});

app.listen(5000, () => console.log('Server running on port 5000'));

2. Building the Frontend (React):

• Set up a React project using create-react-app or your preferred tool.
• Create React components that correspond to different views in your app (e.g., Home, UserList, UserForm).
• Use axios or fetch to make API requests to the Express server and display the data in your components.
• Manage state using React’s useState or useContext for global state management. Example frontend code:

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

function App() {
  const [users, setUsers] = useState([]);

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

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user._id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. Connecting the Frontend and Backend:

• Ensure the backend is running on a different port (e.g., 5000) and the frontend (React) runs on port 3000.
• Use CORS (Cross-Origin Resource Sharing) to allow the frontend to communicate with the backend.
• Configure proxy settings in React’s package.json to simplify API requests during development.

Example:

"proxy": "http://localhost:5000"

4. Deploying the MERN Application:

• Deploy the backend server to a platform like Heroku or DigitalOcean.
• For the frontend, you can use services like Netlify or Vercel to deploy your React app.
• After deployment, update API URLs to point to the live server instead of localhost.

Example deployment steps:

• For backend deployment, you can use Heroku CLI:

heroku create
git push heroku master

• For frontend deployment on Netlify, simply push your React app to GitHub and connect it to Netlify.

Conclusion
Building and deploying a full-stack MERN application involves setting up the backend with Node.js, Express, and MongoDB, and the frontend using React. By following these steps, you can create a complete web application that handles both the client-side and server-side logic. Once developed, deploying the app on platforms like Heroku and Netlify ensures that your application is live and accessible to users.