Skip to content

Latest commit

 

History

History
52 lines (33 loc) · 2.16 KB

chrome-dev-editor.md

File metadata and controls

52 lines (33 loc) · 2.16 KB
Raw

Use Polymer Starter Kit on Chrome Dev Editor

If you are using a Chromebook, one of the few IDE you can use is Chrome Dev Editor.

To use the Polymer Starter Kit you have to download the latest release in the light flavor (the additional tools can't be used from CDE).

After downloading the polymer-starter-kit-light-*.zip file unpack it in a new folder (for Example psk-light) you should have a directory structure like

psk-light-folder-p1

When the app first opens you'll notice, in the bottom left, that Bower is updating.

bower updating

Wait for this process to finish before continuing (it may take a few minutes). When it is complete, you should notice that the bower_components directory has moved to app/bower_components. This is because CDE is respecting the configuration in our .bowerrc file. This is a good thing :)

We can now Open Folder... inside CDE and start renaming the file app/manifest.json to app/web-app-manifest.json, followed by updating the link to it in the file app/index.html

manifest json

This change is needed because manifest.json is interpreted by CDE as a Chrome Apps Manifest and the web app manifest is slightly different

Open app/elements/routing.html and add the following code after the last route:

page('*', function () {
  app.route = 'home';
});

After the change, the code will look like the following:

...
page('/contact', function () {
  app.route = 'contact';
});

page('*', function () {
  app.route = 'home';
});

// add #! before urls
page({
  hashbang: true
});
...

Select app/index.html and hit run (or press CTRL+R) to see the application running in the browser.