Skip to content
⚡️ kickstart a meteor polymer project using mwc projects
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.meteor
client
imports
public
server
.bowerrc
.gitignore
README.md
bower.json
bower.sh
build.sh
license
package.json

README.md

Synthesis is meteor + polymer

synthesis1

Usage

Installation.

Clone the repo

git clone git@github.com:aruntk/kickstart-meteor-polymer-with-app-auth.git your-app-folder

change remote url.

Building

Type the following in shell. Script install bower components and npm packages.

#shell
cd your-app-folder
./build.sh

cleanup bower_components script is also there in build.sh

Add a component (components are inside imports/ui/bower_components):

  1. Install it as ./bower.sh install --save example-component.

  2. Input component name example-component to import example-component/example-component.html. If you want to import something else (for eg behavior/script/css) skip this step by pressing enter and then manually add it to the imports/ui/imports.html file.

Running

cd your-app-folder #enters folder
meteor

Polymer Settings

Create client/lib/settings.js

Why lib directory ? Settings code should run before anything else.

/* client/lib/settings.js */
window.Polymer = {
  //dom: 'shadow',
  lazyRegister: true
};

Polymer Weight

npm run weigh

See which component is making the app slow.

More details -> https://github.com/aruntk/polymer-weight

Offline First

Service worker caching is enabled in this app.

Service Worker - public/sw.js.

Initializing - client/main.js.

Web Manifest - public/web.manifest.js, client/main.html.

More about Service Worker - https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

This will cache all your assets, js, html, css etc.

What this wont do - It'll not cache db data.

To do this there are two methods

  1. Minimongo caching - Use ground:db

  2. Use iron-local-storage

To check this feature

  1. Browser console -> Network tab -> check offline -> Reload window
  2. Open the app in mobile chrome browser. Select settings -> add to home screen. Go to home screen and click on the mwc icon.

How to open app on mobile browser - https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Directory structure

synth

you can add js in separate file or you can add it inside the element html file using script tag.

client/your-element.html

//client/main.js

import '../imports/startup/client/router.js';
<!-- client/main.html -->
<head>
  <title>Synthesis</title>
  <style>
body{
padding:0px;
margin:0px;
}
  </style>
  </head>
<body class="fullbleed">
  <mwc-layout id="demo-landing">
    <div region="header"></div>
    <div region="main"></div>
  </mwc-layout>
</body>

####Routing .

//client/your-router.js

FlowRouter.wait();

document.addEventListener("WebComponentsReady", function() {

  FlowRouter.initialize({
  });
});

FlowRouter.route("/:view?", {
  name:'landing',
  triggersEnter:[function(c,r){
    if(!c.params.view)
      r("/home");
  }],
  action:function(params,queryParams){
    mwcLayout.render("demo-landing",{"main":"test-layout"});
  }
});

// ***** Loading order is important. ******

import '../../ui/bower_components/webcomponentsjs/webcomponents-lite.min.js'
import "../../ui/bower_components/polymer/polymer.html";
import '../../ui/layouts/test-layout.js';
//imports/ui/layouts/test-layout.js
import './test-layout.html';

Polymer({
  is:"test-layout",
  behaviors:[mwcMixin,mwcRouter],
  getMeteorData:function(){
    this.set("status",Meteor.status().status);
  },
  
...

});
<link rel="import" href="../components/test-element.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<dom-module id="test-layout">
  <style>
  /*style goes here */
    ... 
    
  </style>
  <template>
    <paper-header-panel class="fit layout">
    
     ...
     
    </paper-header-panel>
  </template>
</dom-module>

bower_components are kept inside imports/ui/bower_components folder.

bower.json (imports/ui/bower.json)

{
    "dependencies": {
        "paper-elements": "PolymerElements/paper-elements#^1.0.5",
        "iron-pages": "PolymerElements/iron-pages#^1.0.0",
        "polymer": "Polymer/polymer#^1.0.0"
    },
    "name": "synthesis-demo",
    "version": "0.0.1"
}

Docs

Use meteor data reactively inside polymer components - https://github.com/meteorwebcomponents/mixin/blob/master/README.md

Reactively route polymer projects with flowrouter - https://github.com/meteorwebcomponents/router/blob/master/README.md

How to render polymer elements with mwc:layout - https://github.com/meteorwebcomponents/layout/blob/master/README.md

Forum

https://forums.meteor.com/t/polymer-meteor-with-meteor-webcomponents-packages/20536

MWC packages included.

mwc:synthesis - Synthesis is meteor + polymer.

mwc:mixin - Polymer data package

mwc:router - Flowrouter with polymer

MWC Layout - polymer layout renderer . Added using bower.

Other Packages Used

Flow Router - Carefully Designed Client Side Router for Meteor

You can’t perform that action at this time.