diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 00000000..ad4f6f6b --- /dev/null +++ b/.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 diff --git a/.eslintrc.js b/.eslintrc.js index 5592b183..0d76a350 100644 --- a/.eslintrc.js +++ b/.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", diff --git a/.gitignore b/.gitignore index d308162e..39a7441d 100644 --- a/.gitignore +++ b/.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? \ No newline at end of file diff --git a/.node-version b/.node-version index da2d3988..b5045cc4 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -14 \ No newline at end of file +21 \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..d601b020 --- /dev/null +++ b/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;"] diff --git a/README.md b/README.md index dc9ff360..373cf6bd 100644 --- a/README.md +++ b/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. --- diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 00000000..f7c3dd9e --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,6 @@ +services: + nowify: + build: . + container_name: nowify + ports: + - "8008:80" \ No newline at end of file diff --git a/package.json b/package.json index 4404cfcb..6afe4251 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.vue b/src/App.vue index f9e01914..4d64d853 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,6 +7,7 @@ :player="player" @spotifyTrackUpdated="updateCurrentTrack" @requestRefreshToken="requestRefreshTokens" + @update-auth="updateAuth" > @@ -96,7 +97,13 @@ export default { */ updateCurrentTrack(value) { this.player = value + }, + + updateAuth(updatedAuth) { + this.auth = { ...updatedAuth }; + setStoredAuth(this.auth); } + }, watch: { diff --git a/src/components/Authorise.vue b/src/components/Authorise.vue index 3b9428d7..9e671369 100644 --- a/src/components/Authorise.vue +++ b/src/components/Authorise.vue @@ -19,91 +19,56 @@
-