🚀Running Client and Server Together in MERN — No More “Oh, I Forgot to Start the Backend!” Moments

#webdev #mern #beginners

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!