DEV Community

Cover image for How to Build and Deploy a Full-Stack MERN Application
Ayush Kumar Vishwakarma
Ayush Kumar Vishwakarma

Posted on

1

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'));
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay