If I understand your conundrum correctly (I'm unsure) perhaps this will help. I think the logic of automatically logging out when going to the url '/logout' could perhaps be done in the same element which house the app-route rules, example:
<app-route [...] data="{{routedata}}"></app-route>
and in the element polymer definition you define an observer for routedata
__routedataObserver(routedata) { if (routedata.view == "logout") { this.$$('myapp-logout').yourLogoutFunction(); // or you could even skip the logout element and use firebase directly // https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signOut firebase.auth().signOut().then(function () { // logout ok. redirect? }, function(error) { // error. perhaps accessing /logout without actually being online. just redirect? }); } }
maybe?
http://caniuse.com/#feat=imports suggests that we're not there yet for html-import usage (without a JS shim). The table in the article says IE 11 is there (without the shim?) yet this caniuse table says not.
Html-includes is 20 years late, IMO.
Definitely try out Deepstream.io. It's like a self-hosted firebase. They also have an official Polymer library and the elements and behavior included corresponds to those found in polymerfire, albeit with some minor differences.
No matter what I say you seem to be ignoring the fundamental problem of React. Lack of CSS theming/encapsulation. The more I search about CSS + React the more disappointed I get. Even in that course you linked there is no mention of dealing with CSS.
Sure Polymer is not a standard but Shadow Dom and Custom Elements are. As long as React lacks that feature it is not suitable in my eyes.
React always seemed complex, i would go with Polymer instead. I stumbled over egghead, and there it was: i was wrong. I learned it in that lesson, one hour flat. The learning curve was actually tiny, Polymer is a thousand times the effort. Reacts api is so small it fits on a beer coaster, you just remember it, no need for documentation.
> That's the problem and that's why I've decided to give the edge to Polymer. I need an official and unified solution that works now. Betting on standards seems like the safest way to me.
Polymer isn't a standard, that's the problem. It is further from it than most frameworks. createElement(name, props, children) actually works, that is why so many frameworks use it and many of them share components indiscriminately. It also changes the out-of-browser playing field as native systems are re-fitting for it. The v-doms signature is a standard, it will be everywhere if it isn't already, you don't get such dramatic spread if there's no unifying foundation.
How do you test? - the demos work in plunkr (http://plnkr.co/edit/FdgkAtcLFHX5TpTsYtZn?p=preview for example), maybe if you try to introduce them into your application you need to adjust your build pipeline for things to work correctly.
I would start with official tutorials standalone (that is how i stated), and go from there. After you get the basics you should be able to understand how to wire things together with your existing code.
Polymer*library* is maintained, but no new features will be added, same with paper-
elements.
lit-element is Polymer project's latest and greatest, and if you're comfortable with react, you'll be right at home.
I wrote this blog post introducing lit-html and lit-element, take a look:
https://dev.to/bennypowers/lets-build-web-components-part-5-litelement-906
The polymer library is no longer actively developed, but the Polymer project is still very much alive.
See my post on it https://dev.to/bennypowers/lets-build-web-components-part-4-polymer-library-4dk2#the-polymer-project
So like I said you want polymerfire AND login fire.
Firebase gives you a database, auth, and static hosting.
What do you actually need node for?
Looks like firebase has grown a node based backed thing like aws lambda https://firebase.google.com/docs/functions/