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](https://aamax.co/service/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](https://nodejs.org/). It comes bundled with npm. To verify installation: ```bash node -v npm -v ``` 2. **MongoDB** Install MongoDB locally or use a cloud service like [MongoDB Atlas](https://www.mongodb.com/atlas). Verify installation: ```bash mongo --version ``` 3. **Visual Studio Code** Download from [code.visualstudio.com](https://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: ```bash 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: ```bash mkdir mern-project cd mern-project ``` Inside it, create two main folders: ```bash mkdir backend frontend ``` ### Step 2: Initialize the Backend (Node + Express) Navigate into the backend folder and initialize a Node.js project: ```bash cd backend npm init -y ``` Then install essential dependencies: ```bash npm install express mongoose cors dotenv npm install --save-dev nodemon ``` Create a simple server file: **backend/server.js** ```javascript 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: ```javascript 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**: ```json "scripts": { "start": "node server.js", "dev": "nodemon server.js" } ``` Run the server: ```bash 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: ```bash cd .. npx create-react-app frontend ``` After installation, open the React project: ```bash cd frontend npm start ``` The React app will run on [http://localhost:3000](http://localhost:3000). ### Step 2: Connect Frontend with Backend To make API calls to your Express server, install Axios: ```bash npm install axios ``` Then, in **src/App.js**, replace the content with: ```javascript 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 ( ); } 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: ```bash cd backend npm run dev ``` - In the second terminal: ```bash 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`: ```json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Debug Backend", "skipFiles": ["/**"], "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**: ```bash npm install concurrently ``` Then modify the root **package.json**: ```json "scripts": { "start": "concurrently "npm run dev --prefix backend" "npm start --prefix frontend"" } ``` Now, from the root directory, just run: ```bash 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**](https://aamax.co) 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.