Migrate Dashy to Vue 3, Vite and Node 24

.devcontainer/devcontainer.json

@@ -4,17 +4,25 @@
 	"name": "Dashy",
 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
 	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-24-bookworm",
+
 	"customizations": {
 		"vscode": {
 			"extensions": [
 				"Vue.volar",
 				"dbaeumer.vscode-eslint",
-				"ms-azuretools.vscode-docker",
+				"ms-azuretools.vscode-containers",
 				"EditorConfig.EditorConfig",
-				"esbenp.prettier-vscode",
 				"vitest.explorer",
 				"redhat.vscode-yaml"
-			]
+			],
+			"settings": {
+				"editor.formatOnSave": false,
+				"editor.codeActionsOnSave": {
+					"source.fixAll.eslint": "explicit"
+				},
+				"eslint.validate": ["javascript", "vue"],
+				"files.eol": "\n"
+			}
 		}
 	},
 
@@ -23,11 +31,25 @@
 		"ghcr.io/devcontainers/features/github-cli:1": {}
 	},
 
-	// Make the dev server and production server ports available locally.
-	"forwardPorts": [8080, 4000],
+	// Ports to forward to the host (Codespaces / Dev Containers will surface these).
+	"forwardPorts": [8080, 4000, 4001],
+	"portsAttributes": {
+		"8080": {
+			"label": "Vite Dev Server",
+			"onAutoForward": "openPreview"
+		},
+		"4000": {
+			"label": "Dashy (Production)",
+			"onAutoForward": "notify"
+		},
+		"4001": {
+			"label": "Dashy (SSL)",
+			"onAutoForward": "silent"
+		}
+	},
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "yarn install --ignore-engines --network-timeout 300000"
+	// Runs once after the container is created, then VS Code attaches.
+	"postCreateCommand": "yarn install --network-timeout 600000"
 
 	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
 	// "remoteUser": "root"

.dockerignore

@@ -1,9 +1,15 @@
-# 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/ 
-
-node_modules
-docs
-.git
-.github
+# Files specified here are not required for Docker
+# Excluding them helps keep the build context lite
+node_modules
+docs
+tests
+dist
+.git
+.github
+
+# The only things needed to build the Dockerfile are:
+# Depens: package.json, yarn.lock
+# Setup:  tsconfig.json, vite.config.mjs
+# Client: index.html, src/, public/
+# Server: services/, server.js
+# Config: user-data/conf.yml

.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/workflows/docker-build-publish.yml

@@ -39,13 +39,10 @@ jobs:
           type=raw,value=latest
         flavor: |
           latest=false
-        labels: |
-          maintainer=Lissy93
-          org.opencontainers.image.title=Dashy
-          org.opencontainers.image.description=A self-hosted startpage for your server
-          org.opencontainers.image.documentation=https://dashy.to/docs
-          org.opencontainers.image.authors=Alicia Sykes
-          org.opencontainers.image.licenses=MIT
+
+    - name: ⏱️ Capture Build Timestamp
+      id: timestamp
+      run: echo "iso=$(date -u +'%Y-%m-%dT%H:%M:%SZ')" >> "$GITHUB_OUTPUT"
 
     - name: 🔧 Set up QEMU
       uses: docker/setup-qemu-action@v4
@@ -71,12 +68,17 @@ jobs:
     - name: 🚦 Check Registry Status
       uses: crazy-max/ghaction-docker-status@v4
 
-    - name: ⚒️ Build and push
+    - name: ⚒️ Build and Push
       uses: docker/build-push-action@v7
       with:
         context: .
         file: ./Dockerfile
         platforms: linux/amd64,linux/arm64,linux/arm/v7
         tags: ${{ steps.meta.outputs.tags }}
-        labels: ${{ steps.meta.outputs.labels }}
+        build-args: |
+          VERSION=${{ steps.meta.outputs.version }}
+          REVISION=${{ github.sha }}
+          CREATED=${{ steps.timestamp.outputs.iso }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
         push: true

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

@@ -30,6 +30,25 @@ jobs:
       - name: 🔍 Run ESLint
         run: yarn lint
 
+  typecheck:
+    name: 🧷 Type Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🛎️ Checkout Code
+        uses: actions/checkout@v6
+
+      - name: 🔧 Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: 📦 Install Dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: 🧷 Run vue-tsc
+        run: yarn typecheck
+
   test:
     name: 🧪 Run Tests
     runs-on: ubuntu-latest
@@ -67,8 +86,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,51 +1,63 @@
-FROM node:18.19.1-alpine AS build
-
-# Set the platform to build image for
-ARG TARGETPLATFORM
-ENV TARGETPLATFORM=${TARGETPLATFORM:-linux/amd64}
-
-# Install additional tools needed if on arm64 / armv7
-RUN \
-  case "${TARGETPLATFORM}" in \
-  'linux/arm64') apk add --no-cache python3 make g++ ;; \
-  'linux/arm/v7') apk add --no-cache python3 make g++ ;; \
-  esac
-
-# Create and set the working directory
-WORKDIR /app
-
-# Install app dependencies
-COPY package.json yarn.lock ./
-RUN yarn install --ignore-engines --immutable --no-cache --network-timeout 300000 --network-concurrency 1
-
-# Copy over all project files and folders to the working directory
-COPY . ./
-
-# Build initial app for production
-RUN yarn build --mode production --no-clean
-
-# Production stage
-FROM node:20.11.1-alpine3.19
-
-# Define some ENV Vars
-ENV PORT=8080 \
-  DIRECTORY=/app \
-  IS_DOCKER=true
-
-# Create and set the working directory
-WORKDIR ${DIRECTORY}
-
-# Update tzdata for setting timezone
-RUN apk add --no-cache tzdata
-
-# Copy built application from build phase
-COPY --from=build /app ./
-
-# Finally, run start command to serve up the built application
-CMD [ "yarn", "build-and-start" ]
-
-# Expose the port
-EXPOSE ${PORT}
-
-# Run simple healthchecks every 5 mins, to check that everythings still great
-HEALTHCHECK --interval=5m --timeout=5s --start-period=30s CMD yarn health-check
+FROM node:24-alpine AS build
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile --network-timeout 600000
+
+COPY . .
+RUN yarn build
+
+FROM node:24-alpine AS deps
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+RUN yarn install --production --frozen-lockfile --network-timeout 600000 \
+  && yarn cache clean
+
+FROM node:24-alpine
+
+ARG VERSION=dev
+ARG REVISION
+ARG CREATED
+
+LABEL org.opencontainers.image.title="Dashy" \
+      org.opencontainers.image.description="The self-hosted dashboard" \
+      org.opencontainers.image.url="https://dashy.to" \
+      org.opencontainers.image.documentation="https://dashy.to/docs" \
+      org.opencontainers.image.source="https://github.com/lissy93/dashy" \
+      org.opencontainers.image.licenses="MIT" \
+      org.opencontainers.image.authors="Alicia Sykes <alicia@omg.lol>" \
+      org.opencontainers.image.vendor="Alicia Sykes" \
+      org.opencontainers.image.version="${VERSION}" \
+      org.opencontainers.image.revision="${REVISION}" \
+      org.opencontainers.image.created="${CREATED}"
+
+ENV NODE_ENV=production \
+    IS_DOCKER=true \
+    PORT=8080 \
+    HOST=0.0.0.0
+
+WORKDIR /app
+
+RUN apk add --no-cache tzdata tini
+
+COPY --chown=node:node --from=deps  /app/node_modules ./node_modules
+COPY --chown=node:node --from=build /app/dist ./dist
+COPY --chown=node:node --from=build /app/public ./public
+COPY --chown=node:node --from=build /app/services ./services
+COPY --chown=node:node --from=build /app/src/utils/config/ConfigSchema.json ./src/utils/config/ConfigSchema.json
+COPY --chown=node:node --from=build /app/server.js ./server.js
+COPY --chown=node:node --from=build /app/package.json ./package.json
+COPY --chown=node:node --from=build /app/user-data/conf.yml ./user-data/conf.yml
+
+USER node
+
+EXPOSE 8080
+
+HEALTHCHECK --interval=5m --timeout=10s --start-period=20s --retries=3 \
+  CMD node services/healthcheck.js
+
+ENTRYPOINT ["/sbin/tini", "--"]
+CMD ["node", "server.js"]