Merge pull request #933 from felipecrs/volta

Use Volta to manage Node and Yarn version

.devcontainer/Dockerfile

@@ -1,10 +1,9 @@
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-16
+FROM mcr.microsoft.com/devcontainers/base:ubuntu-22.04
 
-# Install Docker
-ENV DOCKER_BUILDKIT="1"
-# https://github.com/microsoft/vscode-dev-containers/commits/main/script-library/docker-debian.sh
-ARG DOCKER_SCRIPT_VERSION="364972b0d7d20ee5de40c1084e65f3f1bc6d5951"
-RUN bash -c "$(curl -fsSL "https://raw.githubusercontent.com/microsoft/vscode-dev-containers/${DOCKER_SCRIPT_VERSION}/script-library/docker-debian.sh")" \
-    && rm -rf /var/lib/apt/lists/*
-ENTRYPOINT ["/usr/local/share/docker-init.sh"]
-CMD ["sleep", "infinity"]
+USER vscode
+
+# Install Volta
+ARG HOME="/home/vscode"
+ENV VOLTA_HOME="${HOME}/.volta"
+ENV PATH="${VOLTA_HOME}/bin:${PATH}"
+RUN bash -c "$(curl -fsSL https://get.volta.sh)" -- --skip-setup

.devcontainer/devcontainer.json

@@ -2,8 +2,15 @@
 {
   "dockerComposeFile": "../docker-compose.yml",
   "service": "dev",
+  "features": {
+    "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {
+      "moby": false,
+      "dockerDashComposeVersion": "v2"
+    }
+  },
   "workspaceFolder": "${localWorkspaceFolder}",
   "shutdownAction": "stopCompose",
+  "forwardPorts": [10001, "hass:8123", "frigate:5000"],
   "portsAttributes": {
     "10001": {
       "label": "Rollup",
@@ -18,33 +25,36 @@
       "onAutoForward": "silent"
     }
   },
-  "forwardPorts": [10001, "hass:8123", "frigate:5000"],
   "initializeCommand": ".devcontainer/initialize.sh",
   "postCreateCommand": "yarn install",
-  "extensions": [
-    "github.vscode-pull-request-github",
-    "eamodio.gitlens",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "bierner.lit-html",
-    "runem.lit-plugin",
-    "davidanson.vscode-markdownlint",
-    "redhat.vscode-yaml",
-    "lokalise.i18n-ally",
-    "ms-azuretools.vscode-docker"
-  ],
-  "settings": {
-    "files.eol": "\n",
-    "editor.tabSize": 2,
-    "editor.formatOnPaste": false,
-    "editor.formatOnSave": true,
-    "editor.formatOnType": true,
-    "files.trimTrailingWhitespace": true,
-    "[json]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "[jsonc]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "github.vscode-pull-request-github",
+        "eamodio.gitlens",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "bierner.lit-html",
+        "runem.lit-plugin",
+        "davidanson.vscode-markdownlint",
+        "redhat.vscode-yaml",
+        "lokalise.i18n-ally",
+        "ms-azuretools.vscode-docker"
+      ],
+      "settings": {
+        "files.eol": "\n",
+        "editor.tabSize": 2,
+        "editor.formatOnPaste": false,
+        "editor.formatOnSave": true,
+        "editor.formatOnType": true,
+        "files.trimTrailingWhitespace": true,
+        "[json]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        },
+        "[jsonc]": {
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
+        }
+      }
     }
   }
 }

.github/workflows/build.yml

@@ -16,11 +16,17 @@ jobs:
     name: Test build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - name: Build
-        run: |
-          yarn install
-          yarn run build
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node and Yarn
+        uses: volta-cli/action@v3
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build the file
+        run: yarn run build
 
       - name: HACS build validation
         uses: "hacs/action@21.12.1"

.github/workflows/release.yml

@@ -11,13 +11,17 @@ jobs:
     name: Prepare release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node and Yarn
+        uses: volta-cli/action@v3
+
+      - name: Install dependencies
+        run: yarn install --immutable
 
-      # Build
       - name: Build the file
-        run: |
-          yarn install
-          yarn run build
+        run: yarn run build
 
       # Upload build file to the release as an asset.
       - name: Upload zip to release

.gitignore

@@ -2,9 +2,17 @@
 /.rpt2_cache/
 package-lock.json
 /dist
-/.yarn/
 
 .env
 .envrc
 
-stats.html
+stats.html
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -3281,6 +3281,10 @@ This card heavily uses [Embla Carousel](https://www.embla-carousel.com/) -- a li
 
 ### Building
 
+This project uses [Volta](https://github.com/volta-cli/volta) to ensure a consistent version of Node and Yarn are used during development. If you install Volta in your environment, you should not need to worry about which version of both to choose. **Note:** the dev container already comes with Volta installed.
+
+However, if you are not using Volta, you can check the `volta` key in the [`package.json`](./package.json) for a reference on which version of Node and Yarn should be used.
+
 ```sh
 $ git clone https://github.com/dermotduffy/frigate-hass-card
 $ cd frigate-hass-card
@@ -3292,9 +3296,9 @@ Resultant build will be at `dist/frigate-hass-card.js`. This could be installed
 
 ### Dev Container
 
-[![Open in Remote - Containers](https://img.shields.io/static/v1?label=Remote%20-%20Containers&message=Open&color=blue&logo=visualstudiocode&style=flat-square)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/dermotduffy/frigate-hass-card)
+[![Open in Dev Containers](https://img.shields.io/static/v1?label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/dermotduffy/frigate-hass-card)
 
-You can use the [VS Code Remote - Containers](https://code.visualstudio.com/docs/remote/containers) extension to speed up the development environment creation. Simply:
+You can use the [VS Code Dev Containers](https://code.visualstudio.com/docs/remote/containers) extension to speed up the development environment creation. Simply:
 
 1. Clone the repository to your machine
 1. Open VS Code on it
@@ -3303,9 +3307,9 @@ You can use the [VS Code Remote - Containers](https://code.visualstudio.com/docs
 
 Everything should just work without any additional configuration. Under the hood, the dev container setup takes care of bringing up:
 
-* Home Assistant (port `48123:8123`)
-* Frigate (ports `45000:5000`, `41935:1935`)
-* MQTT (port `41883:1883`)
+* Home Assistant (port `8123` or the next available one)
+* Frigate (ports `5000` or the next available one)
+* MQTT (port `1883` or the next available one)
 
 As docker-compose containers.
 

docker-compose.yml

@@ -1,10 +1,10 @@
 ---
-version: '3'
 services:
   dev:
-    user: node
     init: true
     build: .devcontainer
+    entrypoint: /usr/local/share/docker-init.sh
+    command: sleep infinity
     env_file:
       - .env
     volumes:

package.json

@@ -74,12 +74,15 @@
     "ts-prune": "^0.10.3",
     "typescript": "^4.9.5"
   },
-  "packageManager": "yarn@3.4.1",
   "scripts": {
     "start": "rollup -c --watch",
     "build": "yarn run lint && yarn run rollup",
     "lint": "eslint 'src/**/*.ts'",
     "rollup": "rollup -c",
     "prune": "ts-prune"
+  },
+  "volta": {
+    "node": "18.14.0",
+    "yarn": "3.4.1"
   }
 }