3

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?

NicolasR
  • 2,222
  • 3
  • 23
  • 38

2 Answers2

6

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:

Ben-Coden
  • 126
  • 1
  • 14
NicolasR
  • 2,222
  • 3
  • 23
  • 38
0

You can add the polymer init command in the pre-build command of the project in Vusual Stddio.

athar13
  • 382
  • 1
  • 8
  • Thanks but `polymer init` is a one time task during project setup. It would have to be `polymer build` (--options) and I don't want to execute it during every VS build! `polymer build` is more like VS publish so it would have to be executed on VS publish or directly before (if there is such an event). `polymer build` creates a build sub directory and that is the one that would have to be VS-published not all the other files in wwwroot. Any ideas on this? – NicolasR Mar 16 '17 at 11:08
  • @NicolasR How is the Polymer and ASP.NET Core working for you? Do you have a blog or documentation anywhere. I am thinking to do the same thing – Jordan McDonald Jun 27 '17 at 12:00
  • @JordanMcDonald Sorry, no blog :-( So far I really like the combination. I like the clean separation: ASP.NET for a REST API, EF Core for abstracting from the concrete database technology and Polymer for a client side single page app with a standards conform component system. I also like that the server side can now run on many platforms, even on a RasPi with Linux. Polymer hides the differing support for web components by the major browsers. The ES6 class syntax for defining components in Polymer is a great help for someone coming from C++/C#. The Polymer community could be greater though. – NicolasR Jun 27 '17 at 20:50
  • @NicolasR I am looking forward to do the same thing, can u please post a kind of tutorial somewhere? or perhaps make a basic template? so others users like me can also benefit from it? thanks – Muhammad Touseef Oct 06 '17 at 08:28
  • @touseef ok, give me a little time, I will try to set it up on github. – NicolasR Oct 06 '17 at 12:39
  • @JordanMcDonald Try this: https://github.com/nicolasr75/PolymerAspNetCore – NicolasR Oct 09 '17 at 17:18
  • this is great help @NicolasR thanks a lot, I look forward to contributing :) – Muhammad Touseef Oct 10 '17 at 06:45