Building Web Applications with React and ASP.NET Core/

...

/

Running in Development Mode

Running in Development Mode

Learn to run React apps in development mode in this chapter.

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:

Press + to interact
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:

Press + to interact
<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 is run in debug mode, which is the mode that’s used ...