Update to Vue 3/Node21, authentication flow update and Dockerization.

.dockerignore

@@ -0,0 +1,33 @@
+.DS_Store
+node_modules
+/dist
+yarn.lock
+
+# Local environment files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Additional files and directories
+README.md
+LICENSE
+docker-compose.yml
+*.png
+*.sln
+*.sw?
+*.md
+assets

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   },
   extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
   parserOptions: {
-    parser: "babel-eslint"
+    parser: '@babel/eslint-parser'
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+package-lock.json
 
 # local env files
 .env
@@ -20,4 +21,4 @@ pnpm-debug.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

.node-version

@@ -1 +1 @@
-14
+21

Dockerfile

@@ -0,0 +1,14 @@
+# Build stage
+FROM node:21 as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN yarn install
+COPY . .
+RUN yarn build
+
+
+# Production stage
+FROM nginx:stable-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -77,7 +77,20 @@ Once the environment variables are in, you will have to navigate to your Netlify
 
 ---
 
-Alternatively, you can clone the repo, compile the code offline, and upload to your own webserver (more advanced users only). If you're considering doing this, I'll assume that you somewhat know you're way around build tools.
+For advanced users, you can run Nowify locally using Docker. First, clone the repo and set your Spotify credentials in `.env` or `docker-compose.yml`. Then, build and run with Docker:
+
+```bash
+docker-compose up --build
+```
+
+Alternatively, to run with Docker directly:
+
+```bash
+docker build -t nowify .
+docker run -p 8008:80 -e VUE_APP_SP_CLIENT_ID=[id] -e VUE_APP_SP_CLIENT_SECRET=[secret] nowify
+```
+
+Visit `http://localhost:8080` to access Nowify. For detailed Docker instructions, refer to the official documentation.
 
 ---
 

docker-compose.yml

@@ -0,0 +1,6 @@
+services:
+  nowify:
+    build: .
+    container_name: nowify
+    ports:
+      - "8008:80"

package.json

@@ -14,25 +14,25 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.19.2",
-    "core-js": "^3.6.5",
-    "dotenv": "^8.2.0",
-    "node-sass": "4.14.1",
-    "node-vibrant": "^3.1.4",
-    "spotify-web-api-js": "^1.5.1",
-    "vue": "^2.6.11"
+    "axios": "^1.6.8",
+    "core-js": "^3.36.1",
+    "dotenv": "^16.4.5",
+    "sass": "1.72.0",
+    "node-vibrant": "^3.1.6",
+    "spotify-web-api-js": "^1.5.2",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^1.19.1",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "@babel/eslint-parser": "^7.24.1",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.23.0",
+    "prettier": "^3.2.5",
+    "sass-loader": "^14.1.1",
+    "vue-template-compiler": "^2.7.16"
   }
 }

src/App.vue

@@ -7,6 +7,7 @@
       :player="player"
       @spotifyTrackUpdated="updateCurrentTrack"
       @requestRefreshToken="requestRefreshTokens"
+      @update-auth="updateAuth"
     ></Component>
   </div>
 </template>
@@ -96,7 +97,13 @@ export default {
      */
     updateCurrentTrack(value) {
       this.player = value
+    },
+
+    updateAuth(updatedAuth) {
+    this.auth = { ...updatedAuth };
+    setStoredAuth(this.auth);
     }
+
   },
 
   watch: {