53 lines
2 KiB
Markdown
53 lines
2 KiB
Markdown
|
# 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](https://github.com/GoogleChrome/chromedeveditor).
|
||
|
|
|
||
|
|
To use the Polymer Starter Kit you have to download the [latest release](https://github.com/PolymerElements/polymer-starter-kit/releases) 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
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Before opening the folder inside CDE, we need to move the file `bower.json` to `app/bower.json`, this way running `Bower Update` from CDE's menu, will place the updated packages in `app/bower_components`
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
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`
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
*This change is needed because `manifest.json` is interpreted by CDE as a [Chrome Apps Manifest](https://developer.chrome.com/extensions/manifest) and the [web app manifest](https://w3c.github.io/manifest/) is slightly different*
|
||
|
|
|
||
|
|
Open `app/elements/routing.html` and add the following code after the last route:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
page('*', function () {
|
||
|
|
app.route = 'home';
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
After the change, the code will look like the following:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
...
|
||
|
|
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.
|