How to set environment-specific "npm start" commands in .NET 7?

Question

I'm using .NET Core 7.0, and I created a project based on the ASP.NET Core with Angular template, which is a standard template in Visual Studio 2022 (and perhaps in earlier versions too).

The following line was generated automatically in the .csproj file when the project was created:

<SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>

And the npm start command is found in the project's package.json file, as follows:

"start": "ng serve --port 44450",

My question is how I can run different npm launch commands based on the environment the program is currently running in. For example, if I change the package.json as follows:

"startdev": "ng serve --port 44450",
"startprod": "ng serve --port 44451",

How do I ensure that the startdev command is being used when the project runs in the Development environment. Alternatively, how do I ensure that the startprod command is being used when the project runs in the Production environment?

My best guess is to add the following code to the project's program.cs file:

webApplication.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (webApplication.Environment.IsProduction())
    {
        spa.UseAngularCliServer(npmScript: "startprod");
    }
    else
    {
        spa.UseAngularCliServer(npmScript: "startdev");
    }
});

But the WebApplication class doesn't seem to have an .UseSpa function, because I get the following error message:

'WebApplication' does not contain a definition for 'UseSpa' and no accessible extension method 'UseSpa' accepting a first argument of type 'WebApplication' could be found (are you missing a using directive or an assembly reference?)

I don't know how to get it working, and I get the impression (from this link and others) that .UseSpa is outdated and has been replaced by the aforementioned SpaProxyLaunchCommand (in the .csproj file).

How do I use different npm or ng serve commands based on whether the program is running in Development or Production? I'm looking for any solution: if it's possible to do this directly in the .csproj or package.json file (and not in program.cs), then I'd like to know how to do that.

Answer 1

I managed to do what I wanted by adding conditions to the SpaProxyLaunchCommand, as such:

<SpaProxyLaunchCommand Condition="'$(ASPNETCORE_ENVIRONMENT)' == 'Production'">npm run startprod</SpaProxyLaunchCommand>
<SpaProxyLaunchCommand Condition="'$(ASPNETCORE_ENVIRONMENT)' != 'Production'">npm run startdev</SpaProxyLaunchCommand>