When I was new to MERN stack development, I faced this problem way too many times:
- I’d open my project.
- I’d start the frontend (npm start inside the client folder).
- I’d forget to start the backend.
- Then I’d spend 10 minutes wondering why nothing was working… 😅
If you’ve worked with MERN, you probably know the drill:
my-project/
│── client/ # React frontend
│── server/ # Node.js backend
We usually run them separately:
# In client folder
npm run dev
# In server folder
node server.js
This means two terminals and remembering to start both every time.
💡 The Solution: Run Both Together with concurrently
A few days ago, I found a simple way to avoid this hassle — run both with a single command.
Step 1: Install concurrently
Go to your project root (the folder containing both client and server) and install:
npm install concurrently --save-dev
Step 2: Update package.json in the root
Inside your root package.json, add a new script:
"scripts": {
"start": "concurrently \"npm start --prefix client\" \"npm run dev --prefix server\""
}
Here’s what’s happening:
npm start --prefix client → runs the React app from the client folder.
npm run dev --prefix server → runs the backend from the server folder (you can replace dev with whatever script you use for backend).
Step 3: Start both with one command
Now you can simply run:
npm start
🎉 Both frontend and backend will start in the same terminal!
Why I Love This
✅ Beginner-friendly — No more “Oops, backend isn’t running.”
✅ Cleaner workflow — One command, one terminal.
✅ Easy to share — Anyone cloning your repo can run the project instantly.
This might be a small trick, but it saved me time and frustration when I was starting out.
If you’re new to MERN, give it a try — your future self will thank you! 🙌
Happy coding! 💻✨
Have you used concurrently before, or do you have other tricks for running MERN smoothly? Share in the comments!
SOCIAL SHARE CARD GENERATOR