Polymer Elements In A Meteor App

October 07, 2024 Post a Comment

Has anyone successfully added Polymer elements to a Meteor project? I'm struggling to make it work. I've tried using bower to install the Polymer package under public: ├── pu

Solution 1:

I have created a package to add Polymer functionality to Meteor.

Here is the github.

http://github.com/ecwyne/meteor-polymer

Update: It can also be added using meteor add ecwyne:polymer-elements

Solution 2:

In case you still have issues with adding and using Polymer in Meteor, here's an approach that will work.

We are going to add Polymer to the Meteor project using Bower.

After creating your Meteor app, navigate to your app's directory and follow the steps below:

$ bower init => This will take you through the steps you require to create your bower.json file through the terminal

Now lets add the Polymer components:

$ bower install --save Polymer/polymer
bower install --save Polymer/webcomponentsjs
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

Now we'll have a bower_components directory inside the app's root folder which contains the Polymer componets. Create another folder called public and move the bower_components into the public folder so that we have public/bower_components.

Here's a simple piece of code you can replace the contents of yourappname.html with.

<head><title>Athman's Polymer Demo</title><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><metaname="mobile-web-app-capable"content="yes"><metaname="apple-mobile-web-app-capable"content="yes"><scriptsrc="bower_components/webcomponentsjs/webcomponents.js"></script><linkrel="import"href="bower_components/core-scaffold/core-scaffold.html"><linkrel="import"href="bower_components/core-header-panel/core-header-panel.html"><linkrel="import"href="bower_components/core-menu/core-menu.html"><linkrel="import"href="bower_components/core-item/core-item.html"><linkrel="import"href="bower_components/paper-toast/paper-toast.html"><linkrel="import"href="bower_components/paper-fab/paper-fab.html"><style>html, body {
        height: 100%;
        margin: 0;
    }
    body {
        font-family: sans-serif;
    }
    core-scaffold {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
    }
    #core_card {
        width: 96%;
        height: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px2px4px, rgba(0, 0, 0, 0.0980392) 0px0px3px;
        margin: 2%;
        background-color: rgb(255, 255, 255);
        text-align: left;
    }
    paper-fab {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }
</style></head><body ><core-scaffold><core-header-panelnavigationflexmode="seamed"><core-toolbarid="core_toolbar">Navigation</core-toolbar><core-menutheme="core-light-theme"><core-itemicon="settings"label="item1"></core-item><core-itemicon="settings"label="item2"></core-item></core-menu></core-header-panel><divtool>Test Project</div><core-cardid="core_card"verticallayoutstart><divstyle="padding: 20px;">This is a sample project</div></core-card><paper-toastid="toast1"text="Created by Nic Raboy"></paper-toast></core-scaffold><paper-fabicon="add"onclick="document.querySelector('#toast1').show()"></paper-fab></body>

Now let's get our app running ...

$ meteor

Enjoy Polymer

Credits: Nic Raboy: Using Polymer With Apache Cordova

Solution 3:

Sorry to hear you've been having trouble getting Meteor and Polymer to play well together. The comments above explain the situation with Meteor's templating system, but in case it's useful:

Over on the Polymer team we created a tool called Vulcanize which can flatten (concatenate) all of the styles, scripts and dependencies needed for Polymer elements into a single file. This removes the need for any XHR/Ajax calls unless an element is calling out to a remote server somewhere.

Here's a guide to using the Vulcanize tool, which may be able to help with the above.

Solution 4:

I have aslo played with these both. Its not so pretty, but i get work them together.

<head> <title>my-app</title> <script src="/polymer/platform.js"></script> <link rel="import" href="/polymer/polymer.html"> </head>

in my public directory

/public/polymer/polymer.html
/public/polymer/other-polymer-files

the meteor-polymer package is out-date

Solution 5:

While there is a meteorite package for polymer (https://atmospherejs.com/package/polymer) which seems promising.

If you want to add javascript files yourself, you might want to try putting them under:

client/compatibility/

If you don't, you won't have access to polymer's global variables, since in normal javascript globals are just variables created as var myGlobal; outside of any function.

I am curios on how meteor is going to resolve polymers handlebars-like syntax for templates.

JavaScript Lib