Add /dev/index.html for local dev. Update README

README.md

@@ -47,6 +47,9 @@ To run the dev server and open the project in a new browser tab:
 ```bash
 npm run serve
 ```
+
+There is a development HTML file located at `/dev/index.html` that you can view at http://localhost:8000/dev/index.html.
+
 ## Editing
 
 If you use VS Code, we highly reccomend the [lit-plugin extension](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin), which enables some extremely useful features for lit-html templates:
@@ -78,6 +81,32 @@ npm run lint
 
 Prettier has not been configured to run when commiting files, but this can be added with Husky and and `pretty-quick`. See the [prettier.io](https://prettier.io/) site for instructions.
 
+## Static Site
+
+This project includes a simple website generated with the [eleventy](11ty.dev) static site generator and the templates and pages in `/docs-src`. The site is generated to `/docs` and intended to be checked in so that GitHub pages can serve the site [from `/docs` on the master branch](https://help.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site).
+
+To enable the site go to the GitHub settings and change the GitHub Pages &quot;Source&quot; setting to &quot;master branch /docs folder&quot;.</p>
+
+To build the site, run:
+
+```bash
+npm run docs
+```
+
+To serve the site locally, run:
+
+```bash
+npm run docs:serve
+```
+
+To watch the site files, and re-build automatically, run:
+
+```bash
+npm run docs:watch
+```
+
+The site will usually be served at http://localhost:8000.
+
 ## More information
 
 See [Get started](https://lit-element.polymer-project.org/guide/start) on the LitElement site for more information.

dev/README.md

@@ -0,0 +1,2 @@
+
+This directory contains HTML files containing your element for development. By running `npm run build:watch` and `npm run serve` you can edit and see changes without bundling.

docs-src/_README.md

@@ -2,6 +2,6 @@ This directory containts the sources for the static site contained in the /docs/
 
 The site is intended to be used with GitHub pages. To enable the site go to the GitHub settings and change the GitHub Pages "Source" setting to "master branch /docs folder".
 
-To view the site locally, run `npm run serve`.
+To view the site locally, run `npm run docs:serve`.
 
 To edit the site, add to or edit the files in this directory then run `npm run docs` to build the site. The built files must be checked in and pushed to GitHub to appear on GitHub pages.

docs/_README/index.html

@@ -1,4 +1,4 @@
 <p>This directory containts the sources for the static site contained in the /docs/ directory. The site is based on the <a href="11ty.dev">eleventy</a> static site generator.</p>
 <p>The site is intended to be used with GitHub pages. To enable the site go to the GitHub settings and change the GitHub Pages &quot;Source&quot; setting to &quot;master branch /docs folder&quot;.</p>
-<p>To view the site locally, run <code>npm run serve</code>.</p>
+<p>To view the site locally, run <code>npm run docs:serve</code>.</p>
 <p>To edit the site, add to or edit the files in this directory then run <code>npm run docs</code> to build the site. The built files must be checked in and pushed to GitHub to appear on GitHub pages.</p>

package.json

@@ -17,6 +17,7 @@
     "docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
     "docs:serve": "es-dev-server --root-dir=docs --node-resolve --watch",
     "analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json",
+    "serve": "es-dev-server --node-resolve --watch",
     "test": "karma start karma.conf.cjs",
     "test:watch": "karma start karma.conf.cjs --auto-watch=true --single-run=false",
     "test:update-snapshots": "karma start karma.conf.cjs --update-snapshots",