Adds devcontainer

.devcontainer/configuration.yaml

@@ -0,0 +1,4 @@
+default_config:
+lovelace:
+  mode: yaml
+demo:

.devcontainer/devcontainer.json

@@ -0,0 +1,31 @@
+// See https://aka.ms/vscode-remote/devcontainer.json for format details.
+{
+  "name": "Boilerplate Card Development",
+  "image": "ludeeus/devcontainer:monster",
+  "context": "..",
+  "appPort": ["5000:5000", "9123:8123"],
+  "postCreateCommand": "npm install",
+  "runArgs": [
+    "-v",
+    "${env:HOME}${env:USERPROFILE}/.ssh:/tmp/.ssh" // This is added so you can push from inside the container
+  ],
+  "extensions": [
+    "github.vscode-pull-request-github",
+    "tabnine.tabnine-vscode",
+    "dbaeumer.vscode-eslint",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+    "esbenp.prettier-vscode",
+    "bierner.lit-html",
+    "runem.lit-plugin",
+    "ms-python.python"
+  ],
+  "settings": {
+    "files.eol": "\n",
+    "editor.tabSize": 4,
+    "terminal.integrated.shell.linux": "/bin/bash",
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": true,
+    "editor.formatOnType": true,
+    "files.trimTrailingWhitespace": true
+  }
+}

.devcontainer/ui-lovelace.yaml

@@ -0,0 +1,7 @@
+resources:
+  - url: http://127.0.0.1:5000/boilerplate-card.js
+    type: module
+views:
+  - cards:
+      - type: "custom:boilerplate-card"
+        name: Boilerplace card development

README.md

@@ -40,7 +40,7 @@ A community driven boilerplate of best practices for Home Assistant Lovelace cus
 
 ### Step 1
 
-Clone this repo
+Clone this repository
 
 ### Step 2
 
@@ -54,16 +54,41 @@ Do a test lint & build on the project. You can see available scripts in the pack
 
 ### Step 4
 
-Search the repo for all instances of "TODO" and handle the changes/suggestions
+Search the repository for all instances of "TODO" and handle the changes/suggestions
 
 ### Step 5
 
 Customize to suit your needs and contribute it back to the community
 
-[Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
+
+## Starting a new card from boilerplate-card with [devcontainer][devcontainer]
+
+1. Fork and clone the repository.
+2. Open the [devcontainer][devcontainer] and run `npm start` when it's ready.
+3. The compiled `.js` file will be accessible on
+   `http://127.0.0.1:5000/custom-header.js`.
+4. On a running Home Assistant installation add this to your Lovelace
+   `resources:`
+
+```yaml
+- url: "http://127.0.0.1:5000/custom-header.js"
+  type: module
+```
+
+_Change "127.0.0.1" to the IP of your development machine._
+
+### Bonus
+
+If you need a fresh test instance you can install a fresh Home Assistant instance inside the devcontainer as well.
+
+1. Run the command `dc start`.
+2. Home Assistant will install and will eventually be running on port `9123`
+
+## [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
 
 [commits-shield]: https://img.shields.io/github/commit-activity/y/custom-cards/boilerplate-card.svg?style=for-the-badge
 [commits]: https://github.com/custom-cards/boilerplate-card/commits/master
+[devcontainer]: https://code.visualstudio.com/docs/remote/containers
 [discord]: https://discord.gg/5e9yvq
 [discord-shield]: https://img.shields.io/discord/330944238910963714.svg?style=for-the-badge
 [forum-shield]: https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge

package.json

@@ -32,6 +32,7 @@
     "rollup": "^1.26.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-typescript2": "^0.24.3",
     "rollup-plugin-uglify": "^6.0.3",

rollup.config.js

@@ -1,19 +1,30 @@
-import resolve from 'rollup-plugin-node-resolve';
+import resolve from "rollup-plugin-node-resolve";
-import typescript from 'rollup-plugin-typescript2';
+import typescript from "rollup-plugin-typescript2";
-import babel from 'rollup-plugin-babel';
+import babel from "rollup-plugin-babel";
+import serve from "rollup-plugin-serve";
 import { terser } from "rollup-plugin-terser";
 
 export default {
-  input: ['src/boilerplate-card.ts'],
+  input: ["src/boilerplate-card.ts"],
   output: {
-    dir: './dist',
+    dir: "./dist",
-    format: 'es',
+    format: "es"
   },
   plugins: [
     resolve(),
     typescript(),
     babel({
-      exclude: 'node_modules/**'
+      exclude: "node_modules/**"
     }),
-    terser()]
+    terser(),
+    serve({
+      contentBase: "./dist",
+      host: "0.0.0.0",
+      port: 5000,
+      allowCrossOrigin: true,
+      headers: {
+        "Access-Control-Allow-Origin": "*"
+      }
+    })
+  ]
 };