Setting up a Polymer development environment

When working with Polymer you’ll need a development environment. Google has created some great tools for doing this, mainly the Polymer-CLI. This is a command line interface for creating elements, applications, building applications (though I prefer a Gulp build system), a web server and some other misc. tools. This should be your starting point for setting up your development environment.

To setup the polymer-cli you’ll need a few dependencies:

Once those are installed you can just use npm to install the polymer-cli:

npm install -g polymer-cli

Now to use the polymer-cli, create a directory for your project. If you’re creating a custom element I’ve found it best to name the directory the same as your element name. This is because the polymer-cli will use the directory name as the default name for your element. Once you do that move to that directory in the command line and type:

polymer init

That will present you with the following:

Screen Shot 2016-07-29 at 11.17.01 AM

Use your arrow keys to select the option you want. In our case we want to create an element so we’ll just leave it at ‘element’ and press enter. Then just follow the prompts and answer a couple of questions. Namely the name of your element (it’ll default to the directory name) and a description of the element. Once you press enter for the last question it’ll generate the boilerplate for a new element and run bower install.

Screen Shot 2016-07-29 at 11.21.22 AM

This will generate the following directory tree:

Screen Shot 2016-07-29 at 11.23.11 AM

Now you’re all set to start writing code. When you’re ready to test your element just fire up the server:

polymer serve

Screen Shot 2016-07-29 at 11.25.36 AM

Then navigate your browser to the advertised url:

Screen Shot 2016-07-29 at 11.26.36 AM

And voila, you’re all set to develop your first element. If you would like to learn more about the polymer-cli there is a PolyCast out that describes it use.

Another tool I’ve found useful working with Polymer are mainly a chrome extension called PolySearch. With this tool you can search the polymer element catalog right from your browser url bar. Type (without quotes): poly<space><Element Name>. That will give you something like this:

Screen Shot 2016-07-29 at 11.40.12 AM

Once you press enter, you’ll be taken to the Polymer Element Catalog with that search term and all the elements that match the search term will be listed. Very handy and I use it every day.

Hope you find this useful and until next time… Happy Coding!

Share This: