jlengrand/polymer-hot-reloading-example
1
0
Fork 0
mirror of https://github.com/jlengrand/polymer-hot-reloading-example.git synced 2026-03-10 08:41:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Begin writing readme

Browse Source 
* Add embedded component as example
This commit is contained in:
julien Lengrand-Lambert
2017-06-17 18:28:58 +02:00
parent 006133a540
commit 9d1380d0bb
5 changed files with 75 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
README.md Normal file
View File

@@ -0,0 +1,51 @@
# A simple example of Polymer project with hot reloading
## To test it
```
$ npm install
```
and then
```
$ bower install
```
or
```
$ ./node_modules/.bin/bower install
```
in case you don't have [bower](TBD) installed globally.
Finally, simply start the service
```
$npm start
```
and modify the component. The browser will be reloaded dynamically as you modify code.
## How it works
The project simply make use of [browser-sync](TBD).
The actual command line used is the following:
```
$ browser-sync start --server app -f app --serveStatic bower_components --no-notify
```
* The command expects your code / project to be sitting in the `app` folder. Change as desired
* `bower_components` files will be served synamically, which means you don't need to reference the `bower_components folder when using external dependencies`.
## Author
* Julien Lengrand-Lambert <@jlengrand>
## LICENSE
See LICENSE file

20
app/components/another-component/another-component.html Normal file
View File

@@ -0,0 +1,20 @@
<link rel="import" href="/polymer/polymer.html">
<dom-module id="another-component">
<template>
<style>
:host {
display: block;
}
</style>
<h1>Another example</h1>
<p>This is another component, embedded inside the example-component</p>
</template>
<script>
Polymer({
is: 'another-component'
});
</script>
</dom-module>

3
app/components/example-component/example-component.html
View File

@@ -1,4 +1,5 @@
<link rel="import" href="/polymer/polymer.html">
<link rel="import" href="/app/components/another-component/another-component.html">
<dom-module id="example-component">
<template>
@@ -11,6 +12,8 @@
<h1>Example</h1>
<p>This is an example almost empty component</p>
<another-component></another-component>
</template>
<script>
Polymer({

2
app/index.html
View File

@@ -6,8 +6,6 @@
</head>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="stylesheet" href="index.css">
<link rel="import" href="components/example-component/example-component.html">
<body>

2
package.json
View File

@@ -6,7 +6,7 @@
"scripts": {
"start": "browser-sync start --server app -f app --serveStatic bower_components --no-notify"
},
"author": "Julien Lengrand-Lambert <julien.lengrand-lambert@ing.nl>",
"author": "Julien Lengrand-Lambert <julien@lengrand.fr>",
"license": "MIT",
"devDependencies": {
"browser-sync": "^2.18.12",