{"id":20936839,"url":"https://github.com/aruntk/kickstart-meteor-polymer","last_synced_at":"2025-05-13T21:31:13.262Z","repository":{"id":82269342,"uuid":"55239406","full_name":"aruntk/kickstart-meteor-polymer","owner":"aruntk","description":":zap: Kickstart a Meteor - Polymer project with MWC packages. (Flow Router is used to route)","archived":false,"fork":false,"pushed_at":"2017-03-04T12:36:53.000Z","size":13413,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T08:22:26.053Z","etag":null,"topics":["bower-components","meteor","meteor-polymer","mwc","polymer","synthesis"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aruntk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-04-01T14:44:58.000Z","updated_at":"2018-01-25T18:15:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"664ca5de-175f-4cc4-b805-d78dfeb7f8f0","html_url":"https://github.com/aruntk/kickstart-meteor-polymer","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fkickstart-meteor-polymer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fkickstart-meteor-polymer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fkickstart-meteor-polymer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aruntk%2Fkickstart-meteor-polymer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aruntk","download_url":"https://codeload.github.com/aruntk/kickstart-meteor-polymer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254030957,"owners_count":22002679,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bower-components","meteor","meteor-polymer","mwc","polymer","synthesis"],"created_at":"2024-11-18T22:27:36.194Z","updated_at":"2025-05-13T21:31:13.202Z","avatar_url":"https://github.com/aruntk.png","language":"JavaScript","funding_links":[],"categories":["Boilerplates"],"sub_categories":[],"readme":"\u003e Use npm for polymer instead of bower. https://github.com/aruntk/kickstart-meteor-polymer/tree/npm\n\n\u003e Use app-route element for routing instead of flow router https://github.com/aruntk/kickstart-meteor-polymer-with-app-route\n\n# Synthesis is meteor + polymer\n\n![synthesis1](https://cloud.githubusercontent.com/assets/6007432/14216652/9da7131a-f867-11e5-9f84-6dd75d60dd45.gif)\n\n## Usage\n\n### Installation.\n\n#### Clone the repo \n```sh\ngit clone git@github.com:aruntk/kickstart-meteor-polymer.git your-app-folder\n```\n[change remote url](https://help.github.com/articles/changing-a-remote-s-url/).\n\n#### Building\n\nType the following in shell. Script install bower components and npm packages.\n```sh\n#shell\ncd your-app-folder\n./build.sh\n```\ncleanup bower_components script is also there in build.sh\n\n#### Add a component \n\ncomponents are inside imports/ui/bower_components\n\n1. Install it as `./bower.sh install --save example-component`.\n\n2. 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.\n\n\n### Running\n```sh\nmeteor\n```\n### Polymer Settings\n\nCreate client/lib/settings.js\n\nWhy lib directory ? Settings code should run before anything else. \n\n```js\n/* client/lib/settings.js */\nwindow.Polymer = {\n  //dom: 'shadow',\n  lazyRegister: true\n};\n```\n\n### Polymer Weight\n\n```sh\nnpm run weigh\n```\nSee which component is making the app slow.\n\nMore details -\u003e https://github.com/aruntk/polymer-weight\n\n### Offline First\n\nService worker caching is enabled in this app. \n\nService Worker - [public/sw.js](public/sw.js).\n\nInitializing - [client/main.js](client/main.js). \n\nWeb Manifest - [public/web.manifest.js](public/web.manifest.js), [client/main.html](client/main.html#L5).\n\nMore about Service Worker - https://developers.google.com/web/fundamentals/getting-started/primers/service-workers\n\nThis will cache all your assets, js, html, css etc.\n\nWhat this wont do - It'll not cache db data. \n\nTo do this there are two methods\n\n1. Minimongo caching - Use [ground:db](https://github.com/GroundMeteor/db)\n\n2. Use [iron-local-storage](https://elements.polymer-project.org/elements/iron-localstorage)\n\nTo check this feature \n\n1. Browser console -\u003e Network tab -\u003e check offline -\u003e Reload window\n2. Open the app in mobile chrome browser. Select settings -\u003e add to home screen. Go to home screen and click on the mwc icon.\n\nHow to open app on mobile browser - https://developers.google.com/web/tools/chrome-devtools/remote-debugging/\n\n### Directory structure\n\n![synth](https://cloud.githubusercontent.com/assets/6007432/21349548/882a7e88-c6d8-11e6-9a69-512e7294553f.png)\n\nyou can add js in separate file or you can add it inside the element html file using script tag.\n\nclient/your-element.html\n\n\n\n```js\n//client/main.js\n\nimport '../imports/startup/client/router.js';\n\n```\n\n```html\n\u003c!-- client/main.html --\u003e\n\u003chead\u003e\n  \u003ctitle\u003eSynthesis\u003c/title\u003e\n  \u003cstyle\u003e\nbody{\n  padding:0px;\n  margin:0px;\n}\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody class=\"fullbleed\"\u003e\n  \u003cmwc-layout id=\"demo-landing\"\u003e\n    \u003cdiv region=\"header\"\u003e\u003c/div\u003e\n    \u003cdiv region=\"main\"\u003e\u003c/div\u003e\n  \u003c/mwc-layout\u003e\n\u003c/body\u003e\n```\n#### Routing . \n\n```js\n//client/your-router.js\n\nFlowRouter.wait();\n\ndocument.addEventListener(\"WebComponentsReady\", function() {\n\n  FlowRouter.initialize({\n  });\n});\n\nFlowRouter.route(\"/:view?\", {\n  name:'landing',\n  triggersEnter:[function(c,r){\n    if(!c.params.view)\n      r(\"/home\");\n  }],\n  action:function(params,queryParams){\n    mwcLayout.render(\"demo-landing\",{\"main\":\"test-layout\"});\n  }\n});\n\n\nimport '../../ui/layouts/test-layout.js';\n\n```\n\n```js\n//imports/ui/layouts/test-layout.js\nimport './test-layout.html';\n\nPolymer({\n  is:\"test-layout\",\n  behaviors:[mwcMixin,mwcRouter],\n  tracker:function(){\n    this.set(\"status\",Meteor.status().status);\n  },\n  \n...\n\n});\n\n```\n\n```html\n\n\u003clink rel=\"import\" href=\"../components/test-element.html\"\u003e\n\u003cdom-module id=\"test-layout\"\u003e\n  \u003cstyle\u003e\n  /*style goes here */\n    ... \n    \n  \u003c/style\u003e\n  \u003ctemplate\u003e\n    \u003cpaper-header-panel class=\"fit layout\"\u003e\n    \n     ...\n     \n    \u003c/paper-header-panel\u003e\n  \u003c/template\u003e\n\u003c/dom-module\u003e\n\n```\n\n\nbower_components are kept inside imports/ui/bower_components folder.\n\nbower.json\n\n```json\n{\n    \"dependencies\": {\n        \"paper-elements\": \"PolymerElements/paper-elements#^1.0.5\",\n        \"iron-pages\": \"PolymerElements/iron-pages#^1.0.0\",\n        \"polymer\": \"Polymer/polymer#^1.0.0\"\n    },\n    \"name\": \"synthesis-demo\",\n    \"version\": \"0.0.1\"\n}\n\n```\n\n\n\n### Docs\n\nUse meteor data reactively inside polymer components - https://github.com/meteorwebcomponents/mixin/blob/master/README.md\n\nReactively route polymer projects with flowrouter - https://github.com/meteorwebcomponents/router/blob/master/README.md\n\nHow to render polymer elements with mwc:layout - https://github.com/meteorwebcomponents/layout/blob/master/README.md\n\n\n\n\n### Forum \n\nhttps://forums.meteor.com/t/polymer-meteor-with-meteor-webcomponents-packages/20536\n\n\n\n\n### MWC packages included.\n\n[mwc:synthesis](https://github.com/meteorwebcomponents/synthesis) -  Synthesis is meteor + polymer.\n\n[mwc:mixin](https://github.com/meteorwebcomponents/mixin) -  Polymer data package\n\n[mwc:router](https://github.com/meteorwebcomponents/router) - Flowrouter with polymer\n\n\n[MWC Layout](https://github.com/meteorwebcomponents/layout) - polymer layout renderer . Added using bower.\n\n\n\n### Other Packages Used\n\n[Flow Router](https://github.com/kadirahq/flow-router) - Carefully Designed Client Side Router for Meteor\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faruntk%2Fkickstart-meteor-polymer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faruntk%2Fkickstart-meteor-polymer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faruntk%2Fkickstart-meteor-polymer/lists"}