Search code examples
asp.net-corepolymervisual-studio-2017

Publishing Polymer + ASP.NET Core

I am a great fan of ASP.NET Core and have followed its evolution from the first steps to the integration in VS2017 with the return to the msbuild-based project system. I am also a great fan of Google Polymer and now that the 2.0 release is almost done I want to experiment with the combination of both.

I created an ASP.NET Core Web Api project that is going to implement a REST API for the Polymer frontend. Then I pointed my command line to the wwwroot folder and did 

polmyer init

to create an application template which creates some template html files and a bower_components directory with all the basic dependencies, all in the wwwroot folder!

My question is:

VS2017 has a publish function which by default publishes everything that's in the wwwroot folder but probably would allow me to exclude specific files or folders. On the other hand Polymer CLI as a build function that allows me to compile ES6 to ES5, minimize either HTML, CSS, JS or all and bundle the files. How can I combine the two to give me a single-click publish experience in VS2017?

Solution

  • Here is my current solution:

    With VS2017 create a new ASP.NET Core Web Application (.NET Core) project. Add the Microsoft.AspNetCore.StaticFiles Nuget package to be able to serve static files.

    Navigate to the wwwroot directory with a command line and do

    polymer init

    Follow the wizard to create your desired polymer project type.

    Open the csproj file in the VS IDE and find the item group where the wwwroot directory is included as a folder. Comment out this line and add two new lines. The first one prevents VS from copying the entire wwwroot directory. The second one adds in again the polymer build directory so we can reference it later in a copy task.

    <ItemGroup>
  <!--<Folder Include="wwwroot\" />-->
  <Content Update="wwwroot\**\*" CopyToPublishDirectory="Never" />
  <ClientFiles Include="wwwroot\build\default\**\*" />
</ItemGroup>

    (Note that I used Update instead of Include in the content node!)

    Create a batch file polymer-build.cmd with the following content and place it in the project root directory. This will make polymer build the client files before each VS publish

    cd wwwroot
polymer build

    Here you could add options like --js-compile, --css-minify etc.

    Create a new target node in the csproj file to call the batch file before publishing

    <Target Name="PolymerBuild" BeforeTargets="Publish">
  <Exec Command="polymer-build.cmd" />
</Target>

    Finally create another target node with a copy task to copy the polymer build directory to the wwwroot directory

    <Target Name="PolymerPublish" AfterTargets="Publish">
  <Copy SourceFiles="@(ClientFiles)" DestinationFolder="$(PublishUrl)\wwwroot\%(RecursiveDir)" />
</Target>

    Addition

    you may also want to suppress TypeScript compilation which you can do in the csproj via

    <PropertyGroup>
    <TypeScriptCompileBlocked>True</TypeScriptCompileBlocked>
</PropertyGroup>

    References: