How to Run a React Frontend and Node.js Backend Simultaneously with One Command

If you're working on a full-stack project with a React frontend and a Node.js backend, you've probably found yourself opening two terminal windows: one to start the backend server and another to start the frontend development server. While this works, it's not the most efficient way to manage your workflow.

In this guide, I'll show you how to simplify this process by running both your backend and frontend with a single command using npm start. Whether your backend is in a separate folder or your frontend is in the root directory (created with create-react-app), this solution will work seamlessly.

Why Use a Single Command?

Saves time: No need to switch between terminals or run multiple commands manually.
Improves workflow: Streamlines your development process, especially when working on both the frontend and backend simultaneously.
Easy to share: Makes it simpler for collaborators to get your project up and running.

Prerequisites

Before we begin, ensure you have:

A React frontend (created with create-react-app).
A Node.js backend (e.g., an Express server).
Both projects in the same repository (e.g., backend in a backend folder and frontend in the root).

Solution 1: Using concurrently

The easiest way to run both your backend and frontend simultaneously is by using the concurrently package. It allows you to run multiple commands in parallel.

Step 1: Install concurrently

Open your terminal and run:

bash


        npm install concurrently --save-dev

Step 2: Update package.json

In the root of your project, modify the scripts section of your package.json file:

bash


        "scripts": {
          "start": "concurrently \"npm run start:backend\" \"npm run start:frontend\"",
          "start:backend": "cd backend && node server.js",
          "start:frontend": "react-scripts start",
        }

Step 3: Run the project

Now, simply run:

bash


        npm start

This will start both your backend and frontend servers in one go!

Solution 2: Using a Custom Node.js Script

If you prefer not to use concurrently, you can write a custom Node.js script to achieve the same result.

Step 1: Create a start.js file

In the root of your project, create a file called start.js and add the following code:

javascript


        const { exec } = require('child_process');

        // Start backend
        exec('cd backend && node server.js', (err, stdout, stderr) => {
          if (err) {
            console.error(`Backend error: ${stderr}`);
            return;
          }
          console.log(`Backend: ${stdout}`);
        });

        // Start frontend
        exec('npm start', (err, stdout, stderr) => {
          if (err) {
            console.error(`Frontend error: ${stderr}`);
            return;
          }
          console.log(`Frontend: ${stdout}`);
        });

Update package.json

Add a script to your package.json to run the custom script:

javascript


        "scripts": {
          "start": "node start.js"
        }

Step 3: Run the project

Now, simply run:

bash


        npm start

Your backend and frontend will now start simultaneously!

Solution 3: Using npm-run-all

Another great alternative is the npm-run-all package, which allows you to run multiple npm scripts in parallel or sequentially.

Step 1: Install npm-run-all

Run the following command in your terminal:

bash


        npm install npm-run-all --save-dev

Step 2: Update package.json

Modify the scripts section of your package.json file:

bash


        "scripts": {
          "start": "npm-run-all --parallel start:backend start:frontend",
          "start:backend": "cd backend && node server.js",
          "start:frontend": "react-scripts start",
        }

Step 3: Run the project

Now, just run:

bash


        npm start

Both your backend and frontend will start together!

Which Solution Should You Use?

concurrently: Best for simplicity and ease of use.
Custom script: Great if you want more control or prefer not to add additional dependencies.
npm-run-all: Ideal if you're already familiar with npm scripts and want a clean, declarative approach.

Bonus Tips

Environment Variables: If your backend and frontend require different environment variables, make sure to configure them properly (e.g., using .env files).
Error Handling: Ensure your scripts handle errors gracefully, especially if one process crashes.
Production Build: For deployment, you'll likely build your React app (npm run build) and serve it using your backend (e.g., with express.static).

Conclusion

Running your React frontend and Node.js backend with a single command is a game-changer for your development workflow. Whether you choose concurrently, a custom script, or npm-run-all, you'll save time and effort while keeping your terminal clutter-free. Give it a try in your next project, and let me know how it goes! If you have any questions or encounter any issues, please feel free to reach out or post them in the live chat. Happy coding!

How to Run a React Frontend and Node.js Backend Simultaneously with One Command

Why Use a Single Command?

Prerequisites

Solution 1: Using concurrently

Solution 2: Using a Custom Node.js Script

Update package.json

Solution 3: Using npm-run-all

Which Solution Should You Use?

Bonus Tips

Conclusion

We Value Your Privacy