Streamlining Development: How to Run .NET and React Apps Together with a Single Command

Managing two separate projects—like a .NET backend and a React frontend—can get tedious, especially when it means running commands in different terminals each time you start developing. Here’s a quick guide to streamline that process, allowing you to start both applications with a single command, whether you’re on Windows, macOS, or Linux.

In this guide, I’ll walk you through using batch or shell scripts, the Node.js package concurrently, and even VS Code’s tasks.json configuration to make your workflow smoother.

The Problem

Working with separate backend and frontend applications means:

• You need to open multiple terminals.
• Remember the commands and the order in which to run them.
• Keep switching between applications, which can interrupt your flow.

Instead, you can use one command to launch both applications in parallel. This keeps you focused on the code, not on terminal commands.

The Solutions

There are several ways to achieve this, depending on your preference and development environment. Let’s explore each approach:

Solution 1: Batch and Shell Scripts

For those who prefer quick command-line solutions, a batch file (Windows) or shell script (macOS/Linux) can do the trick.

Windows: Batch Script

1.Open a new text file and save it as start-apps.bat.

2.Add the following code, modifying the paths to your project directories:

@echo off  
start cmd /k "cd /d path\to\dotnet\project && dotnet run" 
start cmd /k "cd /d path\to\react\project && npm start"        

3.Save and double-click the batch file to start both applications in separate terminal windows.

macOS/Linux: Shell Script

1.Open a new text file and save it as start-apps.sh.

2.Add the following code, updating the paths as needed:

#!/bin/bash
 (cd path/to/dotnet/project && dotnet run) &
 (cd path/to/react/project && npm start) &        

3.Make the script executable by running chmod +x start-apps.sh in your terminal.

4.Run the script with ./start-apps.sh to launch both projects.

This approach is lightweight and doesn’t require additional dependencies. It’s a great solution if you’re comfortable managing command-line scripts and only need something simple.

Solution 2: Using concurrently in Node.js

For those already working with Node.js, concurrently is a package that lets you run multiple commands in parallel. This solution works cross-platform and integrates nicely with Node project scripts.

1.First, install concurrently globally or in your project:

npm install -g concurrently        

2.Open the package.json file of either project (usually your frontend), and add a custom script:

"scripts": { 
"start:both": "concurrently \"cd path/to/dotnet/project && dotnet run\" \"cd path/to/react/project && npm start\""
 }        

3.Now, you can run both applications with one command:

npm run start:both        

Using concurrently has some key advantages, like easy error management and cross-platform support. Plus, if you’re already using Node.js, this fits seamlessly into your workflow.

Solution 3: Configuring VS Code Tasks

If you work in Visual Studio Code, you can set up a custom task in tasks.json to start both projects. This integrates directly with VS Code, making it easy to launch everything with a few clicks.

1.In VS Code, open the .vscode folder (create it if it doesn’t exist) and add a tasks.json file.

2.Add the following configuration, adjusting the paths to your projects:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start .NET and React",
      "dependsOn": ["dotnet-run", "react-start"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "dotnet-run",
      "type": "shell",
      "command": "dotnet run",
      "problemMatcher": "$msCompile",
      "group": "build",
      "detail": "Starts the .NET backend server"
    },
    {
      "label": "react-start",
      "type": "shell",
      "command": "npm start",
      "problemMatcher": [],
      "detail": "Starts the React frontend server",
      "options": {
        "cwd": "path/to/react-app"
      }
    }
  ]
}
        

3.Now, in the Command Palette (??P / Ctrl+Shift+P), type “Run Task” and select Start .NET and React.

This approach integrates nicely with VS Code’s Task Runner and is ideal for developers who work primarily in this IDE.

Best Practices and Tips

• Organize Your Project Structure: Try to place your frontend and backend projects under a common root directory. This way, your scripts don’t need to use long paths, and your configuration becomes more portable.
• Document Your Scripts: If you’re working in a team, consider adding comments in the batch or shell scripts to help others understand what each line does.
• Handle Errors Gracefully: Depending on your setup, one of the processes might fail to start (e.g., if the server is already running). You can add conditional checks or customize error handling within your scripts or tasks to make them more robust.

Wrapping Up

With a little setup, you can make your daily development routine more efficient by reducing the number of commands you have to run. Whether you prefer shell scripts, Node packages, or IDE tasks, each of these solutions can save time, reduce context-switching, and make your work feel a lot smoother.

Further Reading

For more details on setting up concurrent tasks and automating your workflow, check out these resources:

1. Visual Studio Code Tasks Documentation – Comprehensive guide on configuring tasks within VS Code to automate commands.
2. Concurrently NPM Package – Learn more about concurrently, a Node.js package that lets you run multiple commands in parallel.
3. Running React and Express with Concurrently – Practical example of using concurrently with frontend and backend servers, adaptable for .NET and React applications.
4. Creating Custom Tasks in VSCode – A helpful tutorial on defining custom tasks in VS Code to streamline development workflows.