C#•2y 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•2y 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)

IndeedOP•2y 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•2y ago

wdym persist in the background

IndeedOP•2y 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•2y ago

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

IndeedOP•2y ago

yup

WhiteBlackGoose•2y ago

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

IndeedOP•2y ago

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

WhiteBlackGoose•2y ago

I'd do it entirely different then

IndeedOP•2y ago

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

WhiteBlackGoose•2y 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

IndeedOP•2y ago

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

Accord•2y 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