Polymer in Azure

Having one of my teams looking closer into Polymer, I am looking through the Polymer tutorial today, looking for stumbling blocks ahead of time so that they can be resolved by the time they get there.

First off, if you're behind a corporate firewall, you'll want to make sure that bower can traverse any proxy you might have. You'll need a .bowerrc in your project folder, looking similar to this:



Second off, you cannot test Polymer from your file system - you'll need to serve your resources from a web server.

Provided that you have managed to get things started locally, let's get real - we want to use these components as UI facades to whatever services we might host in the cloud. Fire up Visual Studio and create a Web project. I started a ASP.NET Core project, 'cause that was the shiniest that I had available to me. In my VS solution, I created an elements directory in my wwwroot, pasted in my .bowerrc file in there and opened a console, which I used to install my bower components:

First Polymer
And then paper-input


Let's write a component then! It's essentially a mish-mash of the first couple of examples from the Polymer tutorial:



Once that is in place, we're ready to publish our element so that it can be embedded elsewhere:


I created a free tier app service plan, which is more than I need, given the fact that I'm - so far - only serving static content!

Once published, we need to enable CORS so that browsers allows us to embed elements:


With that in place, we can write a simple web page that embeds a polymer element from Azure!



Will it blend? Yes, yes it will:


Have fun!

Comments

Popular posts from this blog

Auto Mapper and Record Types - will they blend?

Unit testing your Azure functions - part 2: Queues and Blobs

Testing WCF services with user credentials and binary endpoints