Search⌘ K
AI Features
Home
Courses
Building Web Applications with React and ASP.NET Core

Running in Development Mode

Explore how to run a React app integrated with ASP.NET Core in development mode. Understand the role of Node, npm dependency restoration, and the Webpack development server. This lesson helps you optimize your development workflow by enabling fast feedback loops and smoother debugging through efficient tooling and project configuration.

We'll cover the following...

Steps to run an app in development mode

In the following steps, we’ll examine the ASP.NET Core project file to see what happens when the app runs in development mode:

  1. We can open the project file by right-clicking the web application project in “Solution Explorer” and selecting the “Edit Project File” option:

Opening the project file in Visual Studio
Opening the project file in Visual Studio

This is an XML file that contains information about the Visual Studio project.

  1. Let’s look at the Target element, which has a Name attribute of DebugEnsureNodeEnv:

JavaScript (JSX)
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"
Condition=" '$(Configuration)' == 'Debug' And
!Exists('$(SpaRoot)node_modules') ">
  <!-- Ensure Node.js is installed -->
  <Exec Command="node --version"
    ContinueOnError="true">
    <Output TaskParameter="ExitCode"
      PropertyName="ErrorCode" />
  </Exec>
  <Error Condition="'$(ErrorCode)' != '0'"
   Text="Node.js is required to build and run this
    project. To continue, please install Node.js from
     https://nodejs.org/, and then restart your
       command prompt or IDE."
   />
  <Message Importance="high" Text="Restoring
   dependencies using 'npm'.
    This may take several minutes..." />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm
    install" />
</Target>

This executes tasks when the ClientApp/node-modules folder doesn’t exist and the Visual Studio project ...