Menu
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:
├── public
│ ├── bower_components
│ │ ├── platform
│ │ └── polymer
│ ├── elements
│ │ └── my-element.html
I then included the element like this:
<head>
<title>test</title>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="elements/my-element.html">
</head>
<body>
...
<my-element></my-element>
...
</body>
That's resulting in an endless loop of XHR requests for platform.js and my-element.html.
I've also tried the meteor-polymer package, that doesn't include polymer.html and I couldn't get it to recognize the package anyway:
=> Errors prevented startup:
While building the application:
error: no such package: 'polymer'
I'm hoping someone has been able to get Polymer working with Meteor as I'd really like to use my components in this app.
763
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
155
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 terminalNow 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>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="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) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
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-panel navigation flex mode="seamed">
<core-toolbar id="core_toolbar">Navigation</core-toolbar>
<core-menu theme="core-light-theme">
<core-item icon="settings" label="item1"></core-item>
<core-item icon="settings" label="item2"></core-item>
</core-menu>
</core-header-panel>
<div tool>Test Project</div>
<core-card id="core_card" vertical layout start>
<div style="padding: 20px;">This is a sample project</div>
</core-card>
<paper-toast id="toast1" text="Created by Nic Raboy"></paper-toast>
</core-scaffold>
<paper-fab icon="add" onclick="document.querySelector('#toast1').show()"></paper-fab>
</body>
Now let's get our app running ...
$ meteorEnjoy Polymer
Credits: Nic Raboy: Using Polymer With Apache Cordova
33
answered Sep 21 '22 04:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With