What is the best folder structure for a MERN stack application?
Best Folder Structure for a MERN Stack Application
When you start building a MERN Stack project (MongoDB, Express.js, React, Node.js), having a clean folder structure is very important.
It helps you:
Organize code better
Scale the app easily
Debug and maintain code faster
Work smoothly with teams
In this blog, we’ll cover a recommended folder structure for a full-stack MERN project.
💡 Why Is Folder Structure Important?
Without a proper structure:
Your code becomes messy
You duplicate files
You spend more time finding bugs
Scaling becomes hard
With a proper structure:
You separate concerns (frontend/backend)
You follow industry best practices
You speed up development
🧱 MERN Stack Overview
Before we dive in, here’s what each technology does:
Stack Role
MongoDB Database (NoSQL)
Express.js Web framework for Node.js
React.js Frontend (UI)
Node.js Backend runtime
Let’s now look at how to structure this app.
📂 Recommended Folder Structure
A good practice is to separate client and server code.
mern-app/
│
├── client/ # React Frontend
├── server/ # Node + Express Backend
├── package.json # Root-level config (optional tools)
├── README.md
└── .gitignore
🔷 client/ – React App Folder
Your React frontend code lives here.
client/
├── public/ # Static files (index.html, icons)
├── src/
│ ├── assets/ # Images, fonts, icons
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page-level components (Home, Login)
│ ├── context/ # React context (Auth, Theme)
│ ├── services/ # API calls (Axios, fetch)
│ ├── hooks/ # Custom hooks
│ ├── utils/ # Utility functions
│ ├── App.js
│ └── index.js
├── package.json
└── .env
🔸 Explanation:
components/: Buttons, Navbar, Cards
pages/: Page screens like /login, /dashboard
services/: Functions that call your Express backend
context/: Centralized state using React Context API
hooks/: Reusable logic (e.g., useAuth)
utils/: Helper functions like formatDate, validators
🔷 server/ – Backend Folder (Express + Node)
This folder handles your API, business logic, database, and auth.
server/
├── config/ # DB config, environment variables
├── controllers/ # Logic for each route (e.g., authController)
├── models/ # Mongoose schemas
├── routes/ # Express route handlers
├── middleware/ # Custom middlewares (auth, error handler)
├── utils/ # Helper functions (e.g., token generator)
├── validations/ # Input validation (Joi or custom)
├── index.js # Entry point (or app.js)
├── .env
└── package.json
🔸 Explanation:
config/: MongoDB connection, secret keys
controllers/: Actual business logic (e.g., loginUser)
models/: Mongoose models (User, Post)
routes/: API endpoints (e.g., /api/users)
middleware/: JWT auth, error handlers
utils/: Helper functions (e.g., sendEmail)
🔁 Connecting Client and Server
You can connect frontend and backend in two ways:
1. Run both separately
client/ runs on port 3000
server/ runs on port 5000
Use proxy in client/package.json:
"proxy": "http://localhost:5000"
2. Serve frontend from backend
In production, you can serve React build from Express:
app.use(express.static(path.join(__dirname, "../client/build")));
⚙️ Shared Scripts and Tools
At the root level:
mern-app/
├── .gitignore
├── package.json # For concurrently or root-level scripts
├── README.md
You can use concurrently to run both client and server with one command:
"scripts": {
"dev": "concurrently \"npm run server\" \"npm run client\"",
"client": "cd client && npm start",
"server": "cd server && nodemon index.js"
}
🧪 Testing Structure (Optional)
Add test folders:
client/
└── __tests__/ # React unit/integration tests
server/
└── __tests__/ # Jest or Mocha tests
🧠 Best Practices
Keep client and server separate
Group files by feature if project gets big
Use .env files in both client/ and server/
Use meaningful file names
Clean and delete unused components regularly
Use version control (Git)
Follow consistent naming conventions
Keep route files small and use controllers
Modularize repeated code into utils/hooks
Use linters and formatters (Prettier, ESLint)
🚀 Real-World Example
Here’s how a blog app folder might look:
mern-blog/
├── client/
│ ├── pages/ (Home.js, Login.js)
│ ├── components/ (PostCard.js, Header.js)
│ └── services/ (postService.js)
│
├── server/
│ ├── models/ (User.js, Post.js)
│ ├── controllers/ (auth.js, post.js)
│ └── routes/ (authRoutes.js, postRoutes.js)
🔚 Conclusion
A clean folder structure in your MERN app:
✅ Makes development easier
✅ Helps new developers understand the project
✅ Boosts productivity and maintainability
✅ Supports project scalability
Even if your app is small today, planning a solid folder structure will help your project grow smoothly in the future.
🙋 FAQ
Q: Can I keep everything in one folder?
Yes, for learning. But in real-world apps, separation is better.
Q: Can I change the folder structure later?
Yes, but it's easier to set it up correctly from the start.
Q: Do I need all these folders from day one?
No. Add folders as your project grows.
Comments
Post a Comment