Skip to content

Instantly share code, notes, and snippets.

@RobbieMcKinstry
Created February 2, 2015 15:26

Revisions

  1. RobbieMcKinstry created this gist Feb 2, 2015.
    57 changes: 57 additions & 0 deletions Installing Polymer
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    # 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