Run Webpack-Dev-Server in .NET CORE Build Process

Question

Ok, so I've been tearing my hair out trying to figure this out for the past couple of days and it seems like Visual Studio makes this WAY harder than it needs to be.

I want my .NET CORE app to run my Vue.js application on the webpack-dev-server when in Debug, otherwise build the production build and put it in the file structure it outputs... You'd think I could just add a Post-Build event like so:

if $(ConfigurationName) == 'Debug' {
    npm run dev
}

But as soon as it gets to the webpack process, the IIS server build never proceeds, it just hangs forever after the webpack server says it's running. I assume because there's nothing to tell Visual Studio that the process has completed? The same thing happens if I run npm run build to build the default production build, instead. The only way to then stop the build is to kill all instances of Node with taskkill /F /IM node.exe in a separate terminal instance.

I can run these commands outside of Visual Studio just fine and they work perfectly, but inserting them into the VS build process just does not work at all.

Alternatively, I tried loading the .NET CORE Vue.js template and copying its functionality for building the application in the .csproj file and editing it to fit my needs:

  <Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' ">
    <!-- 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." />

    <!-- In development, the dist files won't exist on the first run or when cloning to
        a different machine, so rebuild them if not already present. -->
    <Message Importance="high" Text="Running dev server..." />
    <Exec Command="node node_modules/webpack/bin/webpack.js" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec Command="npm install" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
        <DistFiles Include="wwwroot\js\**" />
        <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
            <RelativePath>%(DistFiles.Identity)</RelativePath>
            <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

Which this builds the files correctly (basically the same as npm run build), but no dev server is ever run.

There has to be an easier way to get this working just using the pre-built NPM commands, but all the solutions I've found on StackOverflow don't work and what should be a simple solution is becoming wayyyyyy harder than it has to be.

Any ideas? :\

Derek · Accepted Answer · 2018-05-22 16:32:19Z

So, after a ton of Googling, I think I have a decent solution which combines Microsoft's solution in their template with my own NPM scripts:

<Target Name="RunWebpackServer" AfterTargets="Publish" Condition=" '$(Configuration)' == 'Debug' ">
    <!-- Check if Node.js / NPM is installed -->
        <Exec Command="node --version" ContinueOnError="false">
            <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
        </Exec>

    <!-- If there's an error, tell the user to install Node -->
        <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." />

    <!-- Clean cache, install packages and run the dev server -->
        <Message Importance="high" Text="Cleaning NPM Cache..." />
        <Exec Command="npm cache clean" />
        <Message Importance="high" Text="Installing NPM Packages..." />
        <Exec Command="npm install" />
        <Message Importance="high" Text="Running Webpack Dev Server..." />
        <Exec Command="npm run dev" />
</Target>

Now, does anyone know how to shut down the Node dev server when Debug is stopped? If I keep stop and running, I get a ton of Node instances that can really bog down the system.

Collectives™ on Stack Overflow

Run Webpack-Dev-Server in .NET CORE Build Process

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related