Building daycare website [Part 6]: Publishing an ASP.NET Core + Aurelia application to Azure

Up to now, I have focused on the application that is auto-generated by the ASP.NET Core project template for Aurelia. I will take a detour and write about deployment in the next couple of posts. The idea is that as the application is developed, with each check-in we should have a public site that we can use to test.

The easiest deployment mechanism for an ASP.NET Core application is Azure, just create a WebApp and push the code into the repo. Azure has the .NET SDK and Node.js installed so its machines can build the project and publish the output. How does this work? Azure detects that this is an .NET Core app and runs a specialized deploy.cmd, that first runs 'dotnet restore' to download the .NET dependencies and then runs ‘dotnet publish’ on the .csproj file that is in the root of the repo. To understand what happens at this stage, let’s take a look at the relevant section in daycare.csproj file:

<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 --config webpack.config.vendor.js --env.prod" />
  <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />

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

Notice that this target is triggered after the ‘ComputeFilesToPublish’ target, which is one of the default targets that are added by the .NET SDK (how you are supposed to know the names of these things is a mystery to me). Anyway the 'PublishRunWebpack' target first runs ‘npm install’ to download all node dependencies into the build machine, then it runs WebPack to create both the vendor and the application bundles that I described in the previous post. An important detail is that it passes the '--env.prod' parameter to WebPack so that the production bundles are built.

Then, it grabs all the assets that WebPack created under 'wwwroot/dist/' and includes them as part of the publish output. This part of the MSBuild process is alien to me, I don't understand what that 'ResolvedFileToPublish' element does, but somehow this moves the client-side assets to a place where 'deploy.cmd' can pick them up to deploy them into the end machine that will host the application.

The last step of deploy.cmd is to run something called KuduSync, which has smarts to only copy new and modified files from the output directory into the host machine. Below is a dump of the output of the deployment script:

Command: "D:\home\site\deployments\tools\deploy.cmd"
Handling ASP.NET Core Web Application deployment.
  Restore completed in 125.13 ms for D:\home\site\repository\daycare.csproj.
  Restore completed in 277.96 ms for D:\home\site\repository\daycare.csproj.
  Restore completed in 343.82 ms for D:\home\site\repository\daycare.csproj.
  Restore completed in 834.03 ms for D:\home\site\repository\daycare.csproj.
Microsoft (R) Build Engine version 15.4.8.50001 for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.

  daycare -> D:\home\site\repository\bin\Release\netcoreapp2.0\Daycare.dll
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"ia32"})
  npm WARN daycare@0.0.0 No repository field.
  npm WARN daycare@0.0.0 No license field.
  Hash: ded10ffca4fd10b012d0
  Version: webpack 2.7.0
  Child
      Hash: ded10ffca4fd10b012d0
      Time: 53637ms
                                     Asset     Size  Chunks                    Chunk Names
      674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]         
      912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]  [big]  
      b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]         
      89889688147bd7575d6327160d64e760.svg   109 kB          [emitted]         
                                 vendor.js   491 kB       0  [emitted]  [big]  vendor
                                vendor.css   560 kB       0  [emitted]  [big]  vendor
                        please-wait.min.js  5.62 kB          [emitted]         
                           please-wait.css   4.2 kB          [emitted]         
  Hash: 0a281103fae1aa51e985
  Version: webpack 2.7.0
  Child
      Hash: 0a281103fae1aa51e985
      Time: 44505ms
       Asset    Size  Chunks                    Chunk Names
      app.js  491 kB       0  [emitted]  [big]  app
  daycare -> D:\local\Temp\8d56a84476f060b\
KuduSync.NET from: 'D:\local\Temp\8d56a84476f060b' to: 'D:\home\site\wwwroot'
Copying file: 'Daycare.deps.json'
Copying file: 'Daycare.runtimeconfig.json'
Copying file: 'wwwroot\dist\674f50d287a8c48dc19ba404d20fe713.eot'
Copying file: 'wwwroot\dist\89889688147bd7575d6327160d64e760.svg'
Copying file: 'wwwroot\dist\912ec66d7572ff821749319396470bde.svg'
Copying file: 'wwwroot\dist\app.js'
Copying file: 'wwwroot\dist\b06871f281fee6b241d60582ae9369b9.ttf'
Copying file: 'wwwroot\dist\please-wait.css'
Copying file: 'wwwroot\dist\please-wait.min.js'
Copying file: 'wwwroot\dist\vendor-manifest.json'
Copying file: 'wwwroot\dist\vendor.css'
Copying file: 'wwwroot\dist\vendor.js'
Finished successfully.

At the end of this process, when a request comes into the website the Azure WebApp service kicks off the process by running some version of 'dotnet run'. You can see the website hosted in Azure here or browse the sources at the project page.