Differential Polymer Demo
YOUTUBES
AS SEEN ON THEInstallation
- Clone the repository
git clone https://github.com/Differential/polymer-demo
- From the root directory of the meteor app, run
bower install
- This will install Polymer, web components, & vulcanize
- Also, includes some custom elements we made so you can see how that works
- Start the Meteor server
meteor
- WEB COMPONENTS!
Important concepts:
Including webcomponents.js
In the client/templates/layout/head.html
file, there is a line that looks like this:
<script src="/components/webcomponentsjs/webcomponents.js"></script>
This is very important because it includes the web components polyfill.
imports.html
-
This is where you list what Polymer components you want to load, from polymer core, paper-elements, and even your own custom components. We put these tags in a specific file
client/templates/layout/imports.html
which is then compiled with Vulcanize and thedifferential-vulcanize
package to concatenate the web components into one file. -
After running
bower install
, your components will placed into thepublic/components
directory, which you can see in the.bowerrc
file -
There are customized polymer overrides in the
client/stylesheets/components
folder
Deploying to production
- Run your production deploy command with a
VULCANIZE=true
environment variable. i.e..VULCANIZE=true modulus deploy