https://github.com/aruntk/kickstart-meteor-polymer-with-auth
:zap: kickstart a meteor polymer project using mwc projects
https://github.com/aruntk/kickstart-meteor-polymer-with-auth
meteor meteor-polymer polymer synthesis webcomponents
Last synced: about 1 month ago
JSON representation
:zap: kickstart a meteor polymer project using mwc projects
- Host: GitHub
- URL: https://github.com/aruntk/kickstart-meteor-polymer-with-auth
- Owner: aruntk
- License: mit
- Created: 2016-05-03T12:57:16.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-04T12:44:46.000Z (over 8 years ago)
- Last Synced: 2025-04-02T08:22:29.528Z (3 months ago)
- Topics: meteor, meteor-polymer, polymer, synthesis, webcomponents
- Language: JavaScript
- Homepage:
- Size: 11.1 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# Synthesis is meteor + polymer
## Usage
### Installation.
#### Clone the repo
```sh
git clone [email protected]:aruntk/kickstart-meteor-polymer-with-app-auth.git your-app-folder
```
[change remote url](https://help.github.com/articles/changing-a-remote-s-url/).
#### Building
Type the following in shell. Script install bower components and npm packages.
```sh
#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
```sh
cd your-app-folder #enters folder
meteor
```
### Polymer Settings
Create client/lib/settings.js
Why lib directory ? Settings code should run before anything else.
```js
/* client/lib/settings.js */
window.Polymer = {
//dom: 'shadow',
lazyRegister: true
};
```
### Polymer Weight
```sh
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](public/sw.js).
Initializing - [client/main.js](client/main.js).
Web Manifest - [public/web.manifest.js](public/web.manifest.js), [client/main.html](client/main.html#L5).
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](https://github.com/GroundMeteor/db)
2. Use [iron-local-storage](https://elements.polymer-project.org/elements/iron-localstorage)
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
you can add js in separate file or you can add it inside the element html file using script tag.
client/your-element.html
```js
//client/main.js
import '../imports/startup/client/router.js';
```
```html
Synthesis
body{
padding:0px;
margin:0px;
}
```
####Routing .
```js
//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';
```
```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);
},
...
});
```
```html
/*style goes here */
...
...
```
bower_components are kept inside imports/ui/bower_components folder.
bower.json (imports/ui/bower.json)
```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](https://github.com/meteorwebcomponents/synthesis) - Synthesis is meteor + polymer.
[mwc:mixin](https://github.com/meteorwebcomponents/mixin) - Polymer data package
[mwc:router](https://github.com/meteorwebcomponents/router) - Flowrouter with polymer
[MWC Layout](https://github.com/meteorwebcomponents/layout) - polymer layout renderer . Added using bower.
### Other Packages Used
[Flow Router](https://github.com/kadirahq/flow-router) - Carefully Designed Client Side Router for Meteor