start-lit-element v1.0.0
start-lit-element
A simple Hello World for LitElement.
https://start-lit-element.firebaseapp.com/
Quick start
npm install -g polymer-cli
git clone https://github.com/PolymerLabs/start-lit-element
cd start-lit-element
npm install
polymer serve
Detailed setup info
Clone this repo
git clone https://github.com/PolymerLabs/start-lit-element
Start a dev server
npm install -g polymer-cli
cd start-lit-element
npm install
polymer serve
Set up new app
- In index.html, update metadata stuff:
<!-- Change stuff here for your app -->
<meta name="description" content="start-lit-element">
<meta name="theme-color" content="#ffffff">
<title>start-lit-element</title>
- In index.html, uncomment the service worker registration code:
<!-- Register service worker if supported. -->
<!--
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
</script> -->
- In manifest.json, update the app description, etc:
"description": "start-lit-element",
"start_url": "index.html",
"name": "start-lit-element",
"short_name": "start-lit-el",
"background_color": "#ffffff",
"theme_color":"#ffffff",
Update your package.json if required
In polymer.json, update your shell & entrypoint if required
"shell": "src/start-lit-element.js",
"entrypoint": "index.html",
- Remember to update firebase.json and .firebaserc for a real deployment!
Build for production and serve locally
Build your project and serve the build locally:
polymer build
polymer serve build/default
If you changed significant stuff (e.g. filenames, folder structure, installed other modules, etc), edit your polymer.json file to configure your build correctly. See the Polymer CLI documentation for more info.
Deploy
- Set up Firebase CLI tools.
- Create a new Firebase project.
- Update firebase.json and .firebaserc with your own app details.
Deploy.
firebase deploy
See the Firebase CLI Reference for more info.
Browser compatibility and performance
At the time of writing (Dec 11 2018) this app was scoring 100% on all Lighthouse audits when deployed, and was working fine on the most recent versions of Chrome, Safari, Firefox, and Edge.
Let me know of any issues.
Known issues
(All browsers) Dynamic import
warning:
Could not resolve module specifier "require" in file "..src/start-lit-element.js".
See https://github.com/Polymer/tools/issues/131.
(IE11 and Edge) Warning due to <!--!
in built HTML:
Unexpected character: U+0021 EXCLAMATION MARK (!)
Unexpected character in comment end. Expected "-->"
5 years ago