Search code examples
polymerpolymer-1.0web-componentpolymer-cli

Polymer CLI: build component page


Using polymer init you can create an element project and using polymer serve you can serve the component page (showing docs and demo).

To serve it, Polymer CLI does some path remapping because the import tags do not match the project structure. From the docs:

When you run polymer serve, all elements in bower_components are remapped to appear to be in sibling directories relative to my-el. The current element is served from the made-up path of /components/bower name, where bower name is the name field from your element project's bower.json file.

What should be the appropriate way to build the component page so it can be served by another web server?

Should I move the files so they match the references or is there any better approach?


Solution

  • There is a tool for deploying the component page to github pages.
    From the docs:

    In the commands below, replace with your GitHub username, and with your GitHub repository name.

    # git clone the Polymer tools repository somewhere outside of your 
    # element project
    git clone git://github.com/Polymer/tools.git
    
    # Create a temporary directory for publishing your element and cd into it
    mkdir temp && cd temp
    
    # Run the gp.sh script. This will allow you to push a demo-friendly
    # version of your page and its dependencies to a GitHub pages branch
    # of your repository (gh-pages). Below, we pass in a GitHub username
    # and the repo name for our element
    ../tools/bin/gp.sh <username> <test-element>
    
    # Finally, clean-up your temporary directory as you no longer require it
    cd ..
    rm -rf temp
    

    This will create a new gh-pages branch (or clone and clear the current one) then push a shareable version of your element to it. To see your newly-published docs, point a browser at:

    http://<username>.github.io/<test-element>/