Migrate Dashy to Vue 3, Vite and Node 24

.dockerignore

@@ -1,7 +1,7 @@
 # Files specified here are not required for Docker
 # so ignoring them helps to reduce the container size
 # The Docker container MUST have the following files:
-# package.json yarn.lock server.js vue.config.js src/ services/ 
+# package.json yarn.lock server.js vite.config.mjs src/ services/
 
 node_modules
 docs

.env

@@ -37,23 +37,20 @@
 
 # If using BASIC_AUTH above, set these to the same values to skip the browser auth prompt
 # Requires a rebuild to take effect - only use on trusted networks
-# VUE_APP_BASIC_AUTH_USERNAME=
-# VUE_APP_BASIC_AUTH_PASSWORD=
+# VITE_APP_BASIC_AUTH_USERNAME=
+# VITE_APP_BASIC_AUTH_PASSWORD=
 
 # Override where the path to the configuration file is, can be a remote URL
-# VUE_APP_CONFIG_PATH=/conf.yml
+# VITE_APP_CONFIG_PATH=/conf.yml
 
 # Usually the same as BASE_URL, but accessible in frontend
-# VUE_APP_DOMAIN=https://dashy.to
+# VITE_APP_DOMAIN=https://dashy.to
 
 # Override the page title for the frontend app
-# VUE_APP_TITLE=''
-
-# Set the default view to load on startup (can be `minimal`, `workspace` or `home`)
-# VUE_APP_STARTING_VIEW=home
+# VITE_APP_TITLE=''
 
 # Set the Vue app routing mode (can be 'hash', 'history' or 'abstract')
-# VUE_APP_ROUTING_MODE=history
+# VITE_APP_ROUTING_MODE=history
 
 # Should enable SRI for build script and link resources
 # INTEGRITY=true
@@ -62,11 +59,11 @@
 # IS_DOCKER=true
 
 # Again, set automatically using package.json during build time
-# VUE_APP_VERSION=2.0.0
+# VITE_APP_VERSION=2.0.0
 
 # Directory for conf.yml backups
 # BACKUP_DIR=./user-data/config-backups
 
-# Setup any other user defined vars by prepending VUE_APP_ to the var name
-# VUE_APP_pihole_ip=http://your.pihole.ip
-# VUE_APP_pihole_key=your_pihole_secret_key
+# Setup any other user defined vars by prepending VITE_APP_ to the var name
+# VITE_APP_pihole_ip=http://your.pihole.ip
+# VITE_APP_pihole_key=your_pihole_secret_key

.github/pr-auto-comments.yml

@@ -0,0 +1,135 @@
+comment:
+  on-update: edit
+  header: |
+    Hi {{ prAuthor }}! Thank you for contributing to Dashy! ✨
+  footer: |
+    ---
+    > I'm a bot, and this is an automated comment 🤖
+  snippets:
+    - id: docs-changes
+      files:
+      - docs/**.md
+      body: |
+        When making changes to the documentation, be sure to double check that:
+        - Link and images URLs properly resolve
+        - Your spelling and grammar is correct
+        - Any markdown formatting is valid 
+
+    - id: vite-config
+      files:
+      - vite.config.mjs
+      body: >
+        You're making changes to the main Vite build config. Please test the app thoroughly,
+        as any misconfigurations here may cause the app to stop functioning.
+
+    - id: server-entry
+      files:
+      - server.js
+      body: >
+        You're making changes to the main server entry point. Please test the app thoroughly,
+        as any misconfigurations here may cause the app to stop functioning.
+
+    - id: dependency-changes
+      files:
+      - yarn.lock
+      body: >
+        When updating dependencies, take a moment to verify that there are not security
+        issues associated with any added or modified packages. If adding a new dependency,
+        ensure that it is totally necessary, and check the packages size is not too large,
+        as this will increase overall bundle size.
+
+    - id: environmental-vars
+      files: [ '.env', '*.env', '.env*' ]
+      body: >
+        You're making changes to the main server entry point. Please test the app thoroughly,
+        as any misconfigurations here may cause the app to stop functioning.
+
+    - id: license
+      files: [ 'LICENSE', '**/**/LICENSE*' ]
+      body: >
+        Dashy is licensed under MIT. Your modifying the license file, which shouldn't usually
+        need to be changed. Please ensure that you intended to make this update before continuing.
+
+    - id: cname-file
+      files:
+      - CNAME
+      body: >
+        Are you sure you want to modify the CNAME file? This may stop the documentation
+        website hosted on GitHub pages from working.
+
+    - id: git-ignore
+      files:
+      - .gitignore
+      body: >
+        When modifying the .gitignore, please do not remove any of the existing paths,
+        as this may cause files and directories to be unintentionally committed to git
+
+    - id: netlify-file
+      files:
+      - netlify.toml
+      body: >
+        Please ensure you've tested the app on Netlify, so that the 1-Click deployment
+        does not break, before merging these changes
+
+    - id: heroku-ignore
+      files:
+      - Procfile
+      body: >
+        Please ensure you've tested the app on Heroku, so that the 1-Click deployment
+        does not break, before merging these changes
+
+    - id: ignored-dist
+      files:
+      - dist/**/*
+      body: >
+        Please do not commit the built application to git. The contents of the dist
+        directory will be generated after the app is compiled
+
+    - id: ignored-dependencies
+      files:
+      - node_modules/**/*
+      body: >
+        Please do not commit dependencies to git. Node modules will be pulled down
+        when yarn is run, prior to building the app
+
+    - id: user-themes
+      files:
+      - src/styles/user-defined-themes.scss
+      body: >
+        Please do not commit changes to this file, as it is intended to be overridden with Docker.
+        You can instead add your styles to the color-themes file, or for element-specific styles
+        put it within the appropriate component. Thank you
+
+    - id: code-owners
+      files:
+      - .github/CODEOWNERS
+      body: >
+        Are you adding yourself as a code owner? Please specify the file path as specific
+        as possible, and only assign yourself to files that you created and wish to help
+        maintain (such as a language file, specific feature or widget).
+        If the above is not met, your PR will be declined or modified.
+
+    - id: config-schema
+      files:
+      - src/utils/ConfigSchema.json
+      body: >
+        Don't forget to verify they the config validator script responds correctly to
+        your new attribute.
+
+    - id: showcase
+      files:
+      - docs/showcase.md
+      body: >
+        Thank you for adding your dashboard to the showcase! 🌟
+
+    - id: translations
+      files:
+      - src/assets/locales/**.json
+      body: >
+        Thank you for contributing to Dashy's translations 💖
+
+    - id: themes
+      files:
+      - src/styles/color-themes.scss
+      body: >
+        Thank you for contributing to Dashy's themes 🎨

.github/workflows/pr-quality-check.yml

@@ -67,8 +67,6 @@ jobs:
 
       - name: 🏗️ Build Project
         run: yarn build
-        env:
-          NODE_OPTIONS: --openssl-legacy-provider
 
       - name: ✅ Verify Build Output
         run: |

.github/workflows/update-docs-site.yml

@@ -55,8 +55,6 @@ jobs:
 
       - name: Run script to update documentation 🪄
         working-directory: website-docs
-        env:
-          NODE_OPTIONS: '--openssl-legacy-provider'
         run: |
           cp -r ../master-docs/docs ./
           python ./do-doc-updaty-magic.py

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "type": "msedge",
+        "request": "launch",
+        "name": "dashy: edge",
+        "url": "http://localhost:8080",
+        "webRoot": "${workspaceFolder}/src",
+        "preLaunchTask": "dashy start"
+      },
+      {
+        "type": "chrome",
+        "request": "launch",
+        "name": "dashy: chrome",
+        "url": "http://localhost:8080",
+        "webRoot": "${workspaceFolder}/src",
+        "preLaunchTask": "dashy start"
+      },
+      {
+        "type": "firefox",
+        "request": "launch",
+        "name": "dashy: firefox",
+        "url": "http://localhost:8080",
+        "webRoot": "${workspaceFolder}/src",
+        "preLaunchTask": "dashy start"
+      }
+    ]
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.19.1-alpine AS build
+FROM node:20-alpine AS build
 
 # Set the platform to build image for
 ARG TARGETPLATFORM
@@ -22,10 +22,10 @@ RUN yarn install --ignore-engines --immutable --no-cache --network-timeout 30000
 COPY . ./
 
 # Build initial app for production
-RUN yarn build --mode production --no-clean
+RUN yarn build
 
 # Production stage
-FROM node:20.11.1-alpine3.19
+FROM node:20-alpine
 
 # Define some ENV Vars
 ENV PORT=8080 \

docs/authentication.md

@@ -122,18 +122,18 @@ To disable all UI config features, including View Config, set `disableConfigurat
 
 If you don't want to hash your password, you can instead leave out the `hash` attribute, and replace it with `password` which should have the value of an environmental variable name you wish to use.
 
-Note that env var must begin with `VUE_APP_`, and you must set this variable before building the app.
+Note that env var must begin with `VITE_APP_`, and you must set this variable before building the app.
 
 For example:
 
 ```yaml
   auth:
     users:
     - user: bob
-      password: VUE_APP_BOB
+      password: VITE_APP_BOB
 ```
 
-Just be sure to set `VUE_APP_BOB='my super secret password'` before build-time.
+Just be sure to set `VITE_APP_BOB='my super secret password'` before build-time.
 
 ### Adding HTTP Auth to Configuration
 
@@ -184,7 +184,7 @@ If you don't have users in your `conf.yml` (e.g. you handle user management exte
 
 With this approach, there is no Dashy login page. When the browser first requests the config file, the server responds with a `401` and the browser shows its native HTTP auth prompt. Once the user enters the correct credentials, the browser caches them for the session and all subsequent requests work.
 
-To skip the browser prompt and have the frontend authenticate automatically, also set `VUE_APP_BASIC_AUTH_USERNAME` and `VUE_APP_BASIC_AUTH_PASSWORD` to the same values. These are baked in at build time, so a rebuild is required, and you should only do this on a trusted network.
+To skip the browser prompt and have the frontend authenticate automatically, also set `VITE_APP_BASIC_AUTH_USERNAME` and `VITE_APP_BASIC_AUTH_PASSWORD` to the same values. These are baked in at build time, so a rebuild is required, and you should only do this on a trusted network.
 
 > [!WARNING]
 > Do not combine `BASIC_AUTH_USERNAME`/`BASIC_AUTH_PASSWORD` with conf.yml users. If both are present, the server will log a warning at startup. With `ENABLE_HTTP_AUTH` set, config-file users take priority and the static credentials are ignored. Without it, the static credentials protect the server but the Dashy login page will use conf.yml credentials, and the frontend will send the wrong credentials to server endpoints. Pick one approach or the other.
@@ -565,7 +565,6 @@ sections:
   - name: Authentication
     displayData:
       sortBy: default
-      rows: 2
       cols: 1
       collapsed: false
       hideForGuests: false