How To Run MERN Project in vs Code

How To Run MERN Project in vs Code

Running a MERN (MongoDB, Express, React, Node.js) project in Visual Studio Code (VS Code) is one of the most efficient ways to develop and manage full-stack web applications. VS Code provides a rich development environment that simplifies debugging, version control, and project organization. Whether you’re a beginner learning the MERN stack or a professional building enterprise-grade applications, knowing how to properly set up and run a MERN project in VS Code is essential.

In this comprehensive guide, we’ll cover everything from setting up the environment to running the backend and frontend servers, troubleshooting issues, and streamlining development workflows.

What is the MERN Stack Development?

Before MERN Stack Development diving into the setup, let’s briefly understand what the MERN stack is made of:

• MongoDB: A NoSQL database used to store application data in a flexible, JSON-like format.
• Express.js: A lightweight web application framework for Node.js, used to build APIs and handle backend logic.
• React.js: A popular JavaScript library for building dynamic user interfaces.
• Node.js: A JavaScript runtime environment that enables JavaScript to be used for backend development.

The MERN stack provides a unified JavaScript environment, making it easier for developers to handle both frontend and backend development using a single language.

Prerequisites

Before running a MERN project in VS Code, make sure you have the following tools installed:

1. Node.js and npm (Node Package Manager)
   Download and install Node.js from nodejs.org. It comes bundled with npm.

   To verify installation:

   node -v
   npm -v
   

2. MongoDB
   Install MongoDB locally or use a cloud service like MongoDB Atlas.

   Verify installation:

   mongo --version
   

3. Visual Studio Code
   Download from code.visualstudio.com.
   Install extensions like:

   • ES7+ React/Redux snippets
   • Prettier – Code formatter
   • MongoDB for VS Code

4. Git (optional but recommended)
   Useful for version control and managing project repositories.

   Verify installation:

   git --version
   

Once all these tools are ready, you can proceed with running your MERN project.

Setting Up the MERN Project

If you already have a MERN project cloned from GitHub, skip to the next section. If not, let’s create a simple one for demonstration.

Step 1: Create the Folder Structure

In VS Code terminal, create a new directory and navigate into it:

mkdir mern-project
cd mern-project

Inside it, create two main folders:

mkdir backend frontend

Step 2: Initialize the Backend (Node + Express)

Navigate into the backend folder and initialize a Node.js project:

cd backend
npm init -y

Then install essential dependencies:

npm install express mongoose cors dotenv
npm install --save-dev nodemon

Create a simple server file:

backend/server.js

import express from "express";
import mongoose from "mongoose";
import cors from "cors";
import dotenv from "dotenv";

dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());

app.get("/", (req, res) => {
  res.send("MERN Backend is running!");
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Step 3: Connect MongoDB

In your .env file inside the backend folder, add:

MONGO_URI=mongodb://localhost:27017/mernapp

Modify server.js to include MongoDB connection:

mongoose
  .connect(process.env.MONGO_URI)
  .then(() => console.log("MongoDB Connected"))
  .catch((err) => console.log(err));

Step 4: Run the Backend

Add the following script in package.json:

"scripts": {
  "start": "node server.js",
  "dev": "nodemon server.js"
}

Run the server:

npm run dev

If everything is correct, your terminal should show:

MongoDB Connected
Server running on port 5000

Your backend API is now live.

Setting Up the React Frontend

Step 1: Create the React App

Navigate back to the root and create a new React app inside the frontend folder:

cd ..
npx create-react-app frontend

After installation, open the React project:

cd frontend
npm start

The React app will run on http://localhost:3000.

Step 2: Connect Frontend with Backend

To make API calls to your Express server, install Axios:

npm install axios

Then, in src/App.js, replace the content with:

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

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

  useEffect(() => {
    axios.get("http://localhost:5000/")
      .then(res => setMessage(res.data))
      .catch(err => console.log(err));
  }, []);

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>MERN Stack Project</h1>
      <p>{message}</p>
    </div>
  );
}

export default App;

Now when both servers are running, you’ll see “MERN Backend is running!” displayed on your React page.

Running the MERN Project in VS Code

Step 1: Open the Entire Project in VS Code

Open the root directory (mern-project) in VS Code so that you can easily manage both the backend and frontend folders.

Step 2: Open Integrated Terminal

Use VS Code’s terminal to run both servers. Open two terminals:

• In the first terminal:

  cd backend
  npm run dev
  

• In the second terminal:

  cd frontend
  npm start
  

You now have both the backend API and the frontend React app running simultaneously.

Step 3: Use VS Code Extensions for Productivity

Recommended extensions include:

• Prettier: For automatic code formatting.
• ESLint: For maintaining consistent code style.
• REST Client: To test backend API routes directly inside VS Code.
• MongoDB for VS Code: To manage and view your database visually.

These extensions make debugging, data inspection, and API testing more efficient.

Debugging in VS Code

VS Code provides powerful debugging tools for Node.js and React.

Debugging Node.js

Add a launch configuration in .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Backend",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/backend/server.js"
    }
  ]
}

Now press F5 to start debugging the backend server.

Debugging React

For frontend debugging, you can use Chrome Developer Tools or the React Developer Tools browser extension. VS Code also supports debugging React directly when using the JavaScript Debug Terminal.

Common Issues and Fixes

| Issue | Possible Fix | |-------|---------------| | CORS error | Install and use CORS middleware on Express: npm install cors | | Port conflict | Change the default port in React by adding PORT=3001 in .env | | MongoDB connection error | Verify MongoDB is running or use MongoDB Atlas URI | | “nodemon not found” | Reinstall nodemon globally: npm install -g nodemon |

Optimizing the Workflow

To simplify running both servers, install concurrently:

npm install concurrently

Then modify the root package.json:

"scripts": {
  "start": "concurrently "npm run dev --prefix backend" "npm start --prefix frontend""
}

Now, from the root directory, just run:

npm start

This will launch both backend and frontend together — a huge time saver!

Deploying Your MERN App

Once your MERN app runs successfully in VS Code, you can deploy it to platforms like:

• Vercel or Netlify (for frontend)
• Render or AWS EC2 (for backend and database)

For a detailed guide, you can read our article on Deploying MERN Apps to AWS to take your project live.

Why Choose AAMAX for MERN Stack Development

If you’re looking to develop a custom MERN stack application, partnering with a professional team can save you significant time and ensure better performance and scalability.

AAMAX is a full-service digital marketing and web development company offering expert MERN Stack Development, SEO, and Digital Marketing services. Whether you need an eCommerce solution, SaaS platform, or dynamic web application, AAMAX’s team can help you design, develop, and deploy your project efficiently.

Their expertise covers every layer of the stack — from setting up Node.js APIs and MongoDB databases to building sleek React frontends that deliver seamless user experiences.

Conclusion

Running a MERN project in VS Code is simple once you understand the workflow. By organizing your folders, managing dependencies, and using VS Code’s powerful extensions, you can streamline your full-stack development process. With tools like concurrently, nodemon, and MongoDB integrations, managing both servers becomes hassle-free.

If you’re aiming to take your MERN development to the next level or need a professional team to build scalable applications, consider working with AAMAX — your partner in digital innovation and growth.