Skip to content

Instantly share code, notes, and snippets.

@RobbieMcKinstry
Created February 2, 2015 15:26
Show Gist options
  • Save RobbieMcKinstry/751537f663a80cd33749 to your computer and use it in GitHub Desktop.
Save RobbieMcKinstry/751537f663a80cd33749 to your computer and use it in GitHub Desktop.
# How to: Polymer
##Installation Instructions: Alternative Method:
-------
### On a Linux distro who's default package manager is `apt-get` (Debian, Ubuntu...)
1. Open up the terminal, and execute all of the below commands one by one.
- `sudo apt-get install -yq npm` --> This will install the Node package manager. You might already have this. You can check with `which npm`; if you get a result back, then it's already installed.
- `npm install -g bower` --> This installs bower, a package manager for JavaScript. You probably don't have it, but you can check with the command `which bower`; if you get a result back, then it's already installed.
- `bower init` --> fill out all the information. The defaults are perfectly acceptable.
- `cd` into the directory of your project. Everything after this is specific to your project and needs repeating for each separate project you use Polymer in.
- `bower install --save Polymer/polymer`
- `bower install --save Polymer/core-elements`
- `bower install --save Polymer/paper-elements`
Now you can use Polymer, and the UI library elements, in your projects by linking them in. First, link in the webcomponents.js script.
<script src="/components/webcomponentsjs/webcomponents.js"></script>
Then link in all of the other elements that you want to use. For example:
<link rel="import" href="../../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-icons/core-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
See the docs for a more in depth tutorial on how to go about using the elements.
The above elements are used in [this example](https://www.polymer-project.org/docs/elements/layout-elements.html#app-bars-and-toolbars).
----------
### On a OSX distro (Mac):
1. Open up the terminal, and execute all of the below commands
- Install homebrew if you don't have it already. --> `ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`
- `brew install npm`
- Execute steps 3-8 of the Linux distro's instructions.
-------------
### On a Windows Machine (Untested):
1. Install [Chocolately](https://chocolatey.org/).
- `choco install npm`
- Execute steps 3-8 of the Linux distro's instructions.
-----------
### Links:
- [Chocolately](https://chocolatey.org/)
- [Bower](bower.io)
- [Homebrew](http://brew.sh/)
- [Node Package Manager](https://www.npmjs.com/)
- [Polymer](polymer-project.org)
- [Starting tutorial for Polymer Paper Elements](https://www.polymer-project.org/docs/elements/layout-elements.html#app-bars-and-toolbars)
- [The official installation instructions](https://www.polymer-project.org/docs/start/getting-the-code.html)
- [Ten-minute introduction to Polymer Custom Elements](https://www.polymer-project.org/docs/start/creatingelements.html)
###Happy Hacking!
\- Robbie McKinstry
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment