how to publish wepback bundles on VSTS for MVC app on azure

Question

I am having trouble figuring out how to use VSTS to deploy an arbitrary directory from my build to an azure web app.

The arbitrary directory is produced during the build step and contains the webpack bundled javascript for my app. Here are the details:

I have an MVC 5 app and I just started using webpack to bundle the output of my typescript files. webpack creates a set of bundles and writes them to $(project_dir)/Scripts/bundles.

All my typescript source are in various other directories under /Scripts as well (App, Api, Lib etc). But from a VS project point of view, bundles is empty, but added to the project.

Everything works great locally. I can do a debug build and webpack-dev-server serves up the bundles. I can do a release build and webpack happily creates the bundles on disk in /Scripts/bundles. And my code happily consumes the bundles.

I have edited the project file to include:

<Content Include="Scripts\Bundles\**" />

and if I do a publish from within visual studio it all works great. But VSTS doesn't seem to recognize this part of the project

We use VSTS to do our building and releasing to azure. I can't for the life of me figure out how to get VSTS to publish this /Scripts/bundles directory.

In my project properties, I created a pre-build step that runs webpack. I know that the files are in the Scripts/bundles directory at the end of the build because the closest I have come to getting this working is to have the VSTS build a second artifact that is the zip file of that bundles directory and the files are in there.

I could solve my problem if I knew one of the following (I think):

how to get an arbitrary directory to show up in the main artifact like the normal build output - I can then use my standard release definition to push it to azure
how to publish a second artifact in a release definition?

If you can solve #2, the issue is that in building the artifact for /Scripts/bundle, it put the contents of the bundle directory in the root of the zip file, rather than having bundle as the root of the zip file. So when I unzip the file, It will have to first create /Scripts/bundle and then unzip.

Greg Veres Greg Veres · Accepted Answer · 2017-12-09T03:48:38

I must have been entering the wrong search terms when I was first trying to figure out how to do this. Once I hit on the right search terms I found a bunch of articles that talk about how to get "extra files" into the deployment package for Azure.

Here is a good article. I basically followed it and things just worked. I added these lines to my csproj file:

  <PropertyGroup>
    <CopyAllFilesToSingleFolderForPackageDependsOn>
      WebpackBundles;
      $(CopyAllFilesToSingleFolderForPackageDependsOn);
    </CopyAllFilesToSingleFolderForPackageDependsOn>
    <CopyAllFilesToSingleFolderForMsdeployDependsOn>
      WebpackBundles;
      $(CopyAllFilesToSingleFolderForMsdeployDependsOn);
    </CopyAllFilesToSingleFolderForMsdeployDependsOn>
  </PropertyGroup>
  <Target Name="WebpackBundles">
    <ItemGroup>
      <_CustomWebPackFiles Include="Scripts\bundles\*" />
      <_CustomWebPackFiles Include="Scripts\bundles\**\*" />
      <FilesForPackagingFromProject Include="%(_CustomWebPackFiles.Identity)">
        <DestinationRelativePath>Scripts\bundles\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
      </FilesForPackagingFromProject>
    </ItemGroup>
  </Target>

The PropertyGroup was already there. I just inserted the WebpackBundles; call into those two elements and then defined the WebpackBundles target.

And I ended up removing the

<Content Include="Scripts\Bundles\**" />

line and replaced it with the new Target that the article suggests. I am running webpack as a pre-build step only on the release build. I am using webpack-dev-server for the debug build locally. The only change I had to make to our VSTS build was to add two npm steps:

npm install
npm install webpack -g

this allowed the pre-build step to find the webpack executable and run it.

there was no change to the VSTS release definition because the webpack bundles got put into the deployment zip file in the right location.

how to publish wepback bundles on VSTS for MVC app on azure

1 Answers