🔀 Merge pull request #471 from Lissy93/SECURITY/dependency-updates

[SECURITY] Dependency Updates

.github/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## ⬆️ 2.0.2 - Dependency Updates [PR #471](https://github.com/Lissy93/dashy/pull/471)
+- Updates Alpine version for main Dockerfile
+- Updates node_modules to latest stable versions
+
 ## 🐛 2.0.1 - Fixes Section Height [PR #462](https://github.com/Lissy93/dashy/pull/462)
 - Adds `cutToHeight` to config schema (Re: #461)
 - Removes the full-height CSS from colorful theme

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.17.5-alpine AS BUILD_IMAGE
+FROM node:16.13.2-alpine3.15 AS BUILD_IMAGE
 
 ARG TARGETPLATFORM
 ENV TARGETPLATFORM=${TARGETPLATFORM:-linux/amd64}
@@ -24,7 +24,7 @@ COPY . ./
 RUN yarn build
 
 # Build the final image
-FROM node:14.17.5-alpine
+FROM node:16.13.2-alpine3.15
 
 # Define some ENV Vars
 ENV PORT=80 \

README.md

@@ -426,7 +426,11 @@ I would love Dashy to be available to everyone without language being a barrier
 
 ## System Requirements 📊
 
-The hardware requirements vary depending on where and how you are running Dashy. Generally speaking, on a bare-metal system or Docker container, 1GB of memory should be more than enough, and depending on whether you are using your own assets, then 1GB of disk space should be sufficient.  
+If running on bare metal, Dashy requires [Node](https://nodejs.org/en/) V 16.0.0 or later, LTS (16.13.2) is recommended.
+
+If running in Docker container, the recommended base image is Alpine (3.15)
+
+The hardware requirements vary depending on where and how you are running Dashy. Generally speaking, on a bare-metal system or Docker container, 1GB of memory should be more than enough, and depending on whether you are using your own assets, then 1GB of disk space should be sufficient. 
 
 If you are using one of the 1-click cloud deployment methods, serving the app through a CDN or using a static hosting provider, then there are no specific requirements, as the built app is just a series of static JS files, and so is very light-weight.
 
@@ -435,7 +439,7 @@ Dashy also wells run on low-powered ARM-based single board computers, such as a
 **Browser Support**
 ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
 --- | --- | --- | --- | --- |
-Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
+Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ❌ |
 
 ---
 

docker/Dockerfile-multi-arch

@@ -1,50 +0,0 @@
-FROM node:14.17.5-alpine AS BUILD_IMAGE
-
-ARG TARGETPLATFORM
-ENV TARGETPLATFORM=${TARGETPLATFORM:-linux/amd64}
-
-# Install additional tools needed on arm64 and armv7
-RUN \
-  case "${TARGETPLATFORM}" in \
-    'linux/arm64') apk add --no-cache python make g++ ;; \
-    'linux/arm/v7') apk add --no-cache python make g++ ;; \
-  esac
-
-# Create and set the working directory
-WORKDIR /app
-
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile --network-timeout 1000000
-
-# Copy over all project files and folders to the working directory
-COPY . ./
-
-# Build initial app for production
-RUN yarn build
-
-# Build the final image
-FROM node:14.17.5-alpine
-
-# Define some ENV Vars
-ENV PORT=80 \
-    DIRECTORY=/app \
-    IS_DOCKER=true
-
-# Create and set the working directory
-WORKDIR ${DIRECTORY}
-
-# Install tini and tzdata
-RUN apk add --no-cache tzdata tini
-
-# copy from build image
-COPY --from=BUILD_IMAGE /app ./
-
-# Finally, run start command to serve up the built application
-ENTRYPOINT [ "/sbin/tini", "--" ]
-CMD [ "yarn", "build-and-start" ]
-
-# Expose given port
-EXPOSE ${PORT}
-
-# Run simple healthchecks every 5 mins, to check the Dashy's everythings great
-HEALTHCHECK --interval=5m --timeout=2s --start-period=30s CMD yarn health-check

docker/Dockerfile-old

@@ -0,0 +1,31 @@
+FROM node:lts-alpine3.14
+
+# Define some ENV Vars
+ENV PORT=80 \
+  DIRECTORY=/app \
+  IS_DOCKER=true
+
+# Create and set the working directory
+WORKDIR ${DIRECTORY}
+
+# Copy over both 'package.json' and 'package-lock.json' (if available)
+COPY package*.json ./
+COPY yarn.lock ./
+
+# Install project dependencies
+RUN yarn
+
+# Copy over all project files and folders to the working directory
+COPY . .
+
+# Build initial app for production
+RUN yarn build
+
+# Expose given port
+EXPOSE ${PORT}
+
+# Finally, run start command to serve up the built application
+CMD [ "yarn", "build-and-start"]
+
+# Run simple healthchecks every 5 mins, to check the Dashy's everythings great
+HEALTHCHECK --interval=5m --timeout=2s --start-period=30s CMD yarn health-check

netlify.toml

@@ -8,6 +8,7 @@
   command = "yarn build"
   publish = "dist"
   functions = "services/serverless-functions"
+  environment = { NODE_VERSION = "16.13.2" }
 
 # Site info, used for the 1-Click deploy page
 [template.environment]
@@ -43,6 +44,6 @@
 [[headers]]
   for = "/*"
   [headers.values]
-  # Uncomment to enable Netlify user control. You must have a paid plan.
+  # Uncomment to enable Netlify user control. Requires premium plan.
   # Basic-Auth = "someuser:somepassword anotheruser:anotherpassword"
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",
@@ -17,40 +17,40 @@
     "dependency-audit": "npx improved-yarn-audit --ignore-dev-deps"
   },
   "dependencies": {
-    "@formschema/native": "^2.0.0-beta.5",
+    "@formschema/native": "^2.0.0-beta.6",
-    "@sentry/tracing": "^6.14.3",
+    "@sentry/tracing": "^6.17.4",
-    "@sentry/vue": "^6.13.1",
+    "@sentry/vue": "^6.17.4",
-    "ajv": "^8.8.1",
+    "ajv": "^8.10.0",
-    "axios": "^0.24.0",
+    "axios": "^0.25.0",
     "connect-history-api-fallback": "^1.6.0",
     "crypto-js": "^4.1.1",
-    "express": "^4.17.1",
+    "express": "^4.17.2",
     "frappe-charts": "^1.6.2",
     "js-yaml": "^4.1.0",
-    "keycloak-js": "^15.0.2",
+    "keycloak-js": "^16.1.1",
-    "register-service-worker": "^1.6.2",
+    "register-service-worker": "^1.7.2",
     "remedial": "^1.0.8",
-    "rsup-progress": "^2.0.4",
+    "rsup-progress": "^3.0.0",
-    "simple-icons": "^5.23.0",
+    "simple-icons": "^6.8.0",
-    "v-jsoneditor": "^1.4.2",
+    "v-jsoneditor": "^1.4.5",
     "v-tooltip": "^2.1.3",
-    "vue": "^2.6.10",
+    "vue": "^2.6.14",
-    "vue-i18n": "^8.25.1",
+    "vue-i18n": "^8.27.0",
-    "vue-js-modal": "^2.0.0-rc.6",
+    "vue-js-modal": "^2.0.1",
     "vue-json-tree-view": "^2.1.6",
     "vue-material-tabs": "0.1.5",
-    "vue-router": "^3.0.3",
+    "vue-router": "^3.5.3",
-    "vue-select": "^3.15.0",
+    "vue-select": "^3.16.0",
     "vue-swatches": "^2.1.1",
     "vue-toasted": "^1.1.28",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@architect/sandbox": "^3.7.4",
+    "@architect/sandbox": "^4.5.2",
-    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-eslint": "^4.5.12",
+    "@vue/cli-plugin-eslint": "^4.5.15",
-    "@vue/cli-plugin-pwa": "^4.5.12",
+    "@vue/cli-plugin-pwa": "^4.5.15",
-    "@vue/cli-service": "^4.5.12",
+    "@vue/cli-service": "^4.5.15",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^7.24.0",
@@ -62,11 +62,14 @@
     "sass-loader": "^7.1.0",
     "vue-cli-plugin-yaml": "^1.0.2",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.14"
   },
   "gitHooks": {
     "pre-commit": "yarn lint"
   },
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "eslintConfig": {
     "root": true,
     "env": {

src/components/Configuration/AppVersion.vue

@@ -31,7 +31,7 @@
 
 <script>
 import axios from 'axios';
-import ProgressBar from 'rsup-progress';
+import { Progress } from 'rsup-progress';
 import ErrorHandler from '@/utils/ErrorHandler';
 
 export default {
@@ -44,7 +44,7 @@ export default {
   data() {
     return {
       appVersion: process.env.VUE_APP_VERSION, // Current version, from package.json
-      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
+      progress: new Progress({ color: 'var(--progress-bar)' }),
       latestVersion: '', // Will store latest version, when request returns
       checksEnabled: true, // Should we check for updates
       isUpToDate: true, // Is current version === latest version

src/components/Configuration/CloudBackupRestore.vue

@@ -60,7 +60,7 @@
 <script>
 // Import libraries
 import sha256 from 'crypto-js/sha256';
-import ProgressBar from 'rsup-progress';
+import { Progress } from 'rsup-progress';
 // Import form elements
 import Button from '@/components/FormElements/Button';
 import Input from '@/components/FormElements/Input';
@@ -86,7 +86,7 @@ export default {
       restorePassword: '',
       restoreCode: '',
       backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
-      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
+      progress: new Progress({ color: 'var(--progress-bar)' }),
     };
   },
   components: { // UI components / icons

src/components/Configuration/JsonEditor.vue

@@ -51,7 +51,7 @@
 <script>
 
 import axios from 'axios';
-import ProgressBar from 'rsup-progress';
+import { Progress } from 'rsup-progress';
 import VJsoneditor from 'v-jsoneditor';
 import jsYaml from 'js-yaml';
 import ErrorHandler, { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
@@ -83,7 +83,7 @@ export default {
       },
       responseText: '',
       saveSuccess: undefined,
-      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
+      progress: new Progress({ color: 'var(--progress-bar)' }),
       saveOptions: [
         { label: this.$t('config-editor.location-disk-label'), value: 'file' },
         { label: this.$t('config-editor.location-local-label'), value: 'local' },

src/components/Configuration/RebuildApp.vue

@@ -46,7 +46,7 @@
 
 <script>
 import axios from 'axios';
-import ProgressBar from 'rsup-progress';
+import { Progress } from 'rsup-progress';
 import Button from '@/components/FormElements/Button';
 import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg';
 import ReloadIcon from '@/assets/interface-icons/application-reload.svg';
@@ -74,7 +74,7 @@ export default {
     output: '',
     message: '',
     allowRebuild: true,
-    progress: new ProgressBar({ color: 'var(--progress-bar)' }),
+    progress: new Progress({ color: 'var(--progress-bar)' }),
   }),
   methods: {
     /* Calls to the rebuild endpoint, to kickoff the app build */

src/components/InteractiveEditor/EditModeSaveMenu.vue

@@ -74,7 +74,7 @@
 <script>
 import axios from 'axios';
 import jsYaml from 'js-yaml';
-import ProgressBar from 'rsup-progress';
+import { Progress } from 'rsup-progress';
 
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
@@ -117,7 +117,7 @@ export default {
     return {
       saveSuccess: undefined,
       responseText: '',
-      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
+      progress: new Progress({ color: 'var(--progress-bar)' }),
     };
   },
   methods: {

src/mixins/WidgetMixin.js

@@ -3,7 +3,7 @@
  * Manages loading state, error handling, data updates and user options
  */
 import axios from 'axios';
-import ProgressBar from 'rsup-progress';
+import { Progress } from 'rsup-progress';
 import ErrorHandler from '@/utils/ErrorHandler';
 import { serviceEndpoints } from '@/utils/defaults';
 
@@ -15,7 +15,7 @@ const WidgetMixin = {
     },
   },
   data: () => ({
-    progress: new ProgressBar({ color: 'var(--progress-bar)' }),
+    progress: new Progress({ color: 'var(--progress-bar)' }),
     overrideProxyChoice: false,
     overrideUpdateInterval: null,
     disableLoader: false, // Prevent ever showing the loader

src/router.js

@@ -7,7 +7,7 @@
 // Import Vue.js and vue router
 import Vue from 'vue';
 import Router from 'vue-router';
-import ProgressBar from 'rsup-progress';
+import { Progress } from 'rsup-progress';
 
 // Import views, that are not lazy-loaded
 import Home from '@/views/Home.vue';
@@ -19,7 +19,7 @@ import { metaTagData, startingView, routePaths } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
 
 Vue.use(Router);
-const progress = new ProgressBar({ color: 'var(--progress-bar)' });
+const progress = new Progress({ color: 'var(--progress-bar)' });
 
 /* Returns true if user is already authenticated, or if auth is not enabled */
 const isAuthenticated = () => {