WebPack on VSTS Hosted Build

5
votes

We're using the hosted build agent on VSTS to build and release our ASP.NET Core code to Azure App service.

My question is: can we run WebPack to handle front-end tasks on this hosted build on VSTS or do we have to do it manually before checking the code into our repository?

Update: I'm utilizing the new ASP.NET Core Build (Preview) template that's available on VSTS -- see below:

enter image description here

Here are the steps -- out of the box:

enter image description here

2
buildwebpackazure-devops
How do you run WebPack? Build vNext is very customisable, you can easily add powershell of cmd calls if you need to. – DaveShaw
@DaveShaw I updated the original post. I'm using the ASP.NET Core Build that's available on VSTS. You're saying, I can just add a new step that runs a PowerShell script. In my case, I guess I'd make it the second step i.e. after Restore but before Build. – Sam
Yes, that would work. There other way might be to put it into the publish tasks of the .NetCore in the project.json, but I don't know how to do that, my .NET Core app does it for free :) – DaveShaw
@Sam Not so clearly about your issue. Could you provide the details of your issue/question. You can add Azure App Service Deployment ARM to your build/release definition to deploy it to azure. – starian chen-MSFT
@Sam Do you mean angular 2 webpack? Try to use Npm build step to run. – starian chen-MSFT

2 Answers

2
votes

For VSTS we're working on an extension, currently it's in beta phase, you can ask for a share.

Check the VSTS marketplace. Check this github repo.

0
votes

Webpack is definitively not a first class citizen for VS2015 and VSTS. Streamlining webpack for CI/CD has been a real headache in my case, especially as webpack was introduced hastily to solve dreadful performance issues with a large monolithic SPA (ASP.NET 4.6, Kendo, 15,000 files, 2000 folders). To cut short, after trying many scenarios to make sure that freshly rebuilt bundles would end up in IIS and Azure webapp, I did a 2-pass build. The sequence of VSTS tasks is as follows: npm install global, npm install local, npm webpack install local, npm webpack install global, build pass 1, webpack, build pass 2, etc... This works with hosted and private agents, providing you supply the proper path for webpack as webpack is installed in a different location in host and in private (did not find a way to chose the webpack install location for consistency). I scorch everything before starting the build. Also need to do these in VS2015 solution : (1) unload "built" folder, and (2) Add Content Include="Built\StarStar" in project file. The "built" folder contains the bundles and should appear greyed, otherwise more bad surprises and instabilities to deal with...

Build-Pass #2 task in VSTS BUILD allows to collect the fresh bundles generated by Build-Pass #1 and includes them automatically in the package to be published.

Without a second build-pass, collecting the bundles and merging them in the zip package is a nightmare, especially when you have 15,000 files to unzip then rezip (300 ms per file!!). Did not find file-merging capability that I could readily use in VSTS.

I have my hears to the ground listening for someone coming up with a more efficient CI/CD scheme for webpack. In the meanwhile, my 2-pass-build workaround is working flawlessly, but slow indeed.

I anticipate that the advances with ASP.NET core, Angular 2 and webpack will look into solving this elegantly.