C#•17mo ago

❔ Csproj Run npm command side by side with dotnet run

Hi! How can I make csproj run npm run build alongside it rather than before it and then quitting?

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>

    <NpmLastInstall>node_modules/.last-install</NpmLastInstall>
  </PropertyGroup>

  <Target Name="CheckForNpm" BeforeTargets="NpmInstall">
    <Exec Command="npm -v" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="You must install NPM to build this project" />
  </Target>

  <Target Name="NpmInstall" BeforeTargets="BuildCSS" Inputs="package.json" Outputs="$(NpmLastInstall)">
    <Exec Command="npm install" />
    <Touch Files="$(NpmLastInstall)" AlwaysCreate="true" />
  </Target>

  <Target Name="BuildCSS" BeforeTargets="Compile">
    <Exec Command="npm run build" Condition=" '$(Configuration)' == 'Debug' " />
    <Exec Command="npm run release" Condition=" '$(Configuration)' == 'Release' " />
  </Target>
</Project>

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>

    <NpmLastInstall>node_modules/.last-install</NpmLastInstall>
  </PropertyGroup>

  <Target Name="CheckForNpm" BeforeTargets="NpmInstall">
    <Exec Command="npm -v" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="You must install NPM to build this project" />
  </Target>

  <Target Name="NpmInstall" BeforeTargets="BuildCSS" Inputs="package.json" Outputs="$(NpmLastInstall)">
    <Exec Command="npm install" />
    <Touch Files="$(NpmLastInstall)" AlwaysCreate="true" />
  </Target>

  <Target Name="BuildCSS" BeforeTargets="Compile">
    <Exec Command="npm run build" Condition=" '$(Configuration)' == 'Debug' " />
    <Exec Command="npm run release" Condition=" '$(Configuration)' == 'Release' " />
  </Target>
</Project>

My scripts

    "scripts": {
        "build": "cross-env NODE_ENV=development npx tailwindcss -i ./Styles/site.css -o ./wwwroot/css/site.css --watch",
        "watch": "cross-env NODE_ENV=development npx tailwindcss -i ./Styles/site.css -o ./wwwroot/css/site.css --watch",
        "release": "cross-env NODE_ENV=production npx tailwindcss -i ./Styles/site.css -o ./wwwroot/css/site.css --minify"
    },

    "scripts": {
        "build": "cross-env NODE_ENV=development npx tailwindcss -i ./Styles/site.css -o ./wwwroot/css/site.css --watch",
        "watch": "cross-env NODE_ENV=development npx tailwindcss -i ./Styles/site.css -o ./wwwroot/css/site.css --watch",
        "release": "cross-env NODE_ENV=production npx tailwindcss -i ./Styles/site.css -o ./wwwroot/css/site.css --minify"
    },

13 Replies

WhiteBlackGoose•17mo ago

smh like

  <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
    <Exec Command="echo helloworld" />
  </Target>

  <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
    <Exec Command="echo helloworld" />
  </Target>

https://learn.microsoft.com/en-us/visualstudio/ide/how-to-specify-build-events-csharp?view=vs-2022 (ignore VS-specific configuration, microsoft casually stuck in 2005)

Indeed•17mo ago

  <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
    <Exec Command="npm run build" Condition=" '$(Configuration)' == 'Debug' " />
  </Target>

  <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
    <Exec Command="npm run build" Condition=" '$(Configuration)' == 'Debug' " />
  </Target>

It still does not make the command persist in the background Frankly, now the command doesn't run (it did earlier)

WhiteBlackGoose•17mo ago

wdym persist in the background

Indeed•17mo ago

npx tailwindcss -i ./Styles/site.css -o ./wwwroot/css/site.css --watch i.e. - listen for changes in files and generate appropriate classes in ./wwwroot/css/site.css tailwindcss cli processing persist as in be on another thread so while dotnet watch updates the html implementation, npm run build constantly updates my css files in ./wwwroot/css/site.css based on those changes

WhiteBlackGoose•17mo ago

oh wait huh I see so basically you need npm run build to be spinning there

Indeed•17mo ago

yup

WhiteBlackGoose•17mo ago

you could make a simple bash script if you're on linux otherwise, not sure

Indeed•17mo ago

windows, but can do powershell how would i do it if csproj expects a return from exec

WhiteBlackGoose•17mo ago

I'd do it entirely different then

Indeed•17mo ago

i think it would be csproj -> powershell -> spawn powershell with script running and return but then closing it would be another case

WhiteBlackGoose•17mo ago

I'd go with script running first, then spawn smh like

dotnet watch
npm run build
powershell # here you can do other stuff
kill dotnet-watch
kill npm-run-build

dotnet watch
npm run build
powershell # here you can do other stuff
kill dotnet-watch
kill npm-run-build

(it's pseudo but you get the point) probably not sure honestly, mb someone else can help

Indeed•17mo ago

still, thank you for all of your help <3, getting rough idea, now gotta try to execute it

Accord•17mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ Csproj Run npm command side by side with dotnet run