Release/1.8.0

.github/workflows/nightly.yml

@@ -5,8 +5,8 @@ on:
   push:
     paths:
       - .github/workflows/nightly.yml
-      - client/**
-      - server/**
+      - apps/client/**
+      - apps/server/**
     branches:
       - master
 
@@ -34,8 +34,8 @@ jobs:
       - name: Build and push client nightly
         uses: docker/build-push-action@v4
         with:
-          context: ./client
-          file: ./client/Dockerfile.production
+          context: .
+          file: ./Dockerfile.client.production
           platforms: linux/amd64,linux/arm64
           push: true
           tags: |
@@ -45,8 +45,8 @@ jobs:
       - name: Build and push server nightly
         uses: docker/build-push-action@v4
         with:
-          context: ./server
-          file: ./server/Dockerfile.production
+          context: .
+          file: ./Dockerfile.server.production
           platforms: linux/amd64,linux/arm64
           push: true
           tags: |

.github/workflows/release.yml

@@ -35,8 +35,8 @@ jobs:
       - name: Build and push client release
         uses: docker/build-push-action@v4
         with:
-          context: ./client
-          file: ./client/Dockerfile.production
+          context: .
+          file: ./Dockerfile.client.production
           platforms: linux/amd64,linux/arm64
           push: true
           tags: |
@@ -46,8 +46,8 @@ jobs:
       - name: Build and push server release
         uses: docker/build-push-action@v4
         with:
-          context: ./server
-          file: ./server/Dockerfile.production
+          context: .
+          file: ./Dockerfile.server.production
           platforms: linux/amd64,linux/arm64
           push: true
           tags: |

Dockerfile.client

@@ -0,0 +1,25 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+ENV MONGO_ENDPOINT=mongodb://mongo:27017/your_spotify
+
+RUN apk add python3 gcc g++ make cmake
+RUN npm install -g nodemon
+
+COPY yarn.lock yarn.lock
+COPY package.json package.json
+
+COPY apps/dev/package.json apps/dev/package.json
+COPY apps/dev/tsconfig.json apps/dev/tsconfig.json
+
+COPY apps/client/package.json apps/client/package.json
+COPY apps/client/tsconfig.json apps/client/tsconfig.json
+
+RUN yarn --frozen-lockfile
+
+COPY apps/client/public apps/client/public
+COPY apps/client/scripts apps/client/scripts
+COPY apps/client/src apps/client/src
+
+ENTRYPOINT [ "sh", "/app/apps/client/scripts/run/run_dev.sh" ]

Dockerfile.client.production

@@ -0,0 +1,44 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+ENV MONGO_ENDPOINT=mongodb://mongo:27017/your_spotify
+
+RUN apk add python3 gcc g++ make cmake
+
+COPY yarn.lock yarn.lock
+COPY package.json package.json
+
+COPY apps/dev/package.json apps/dev/package.json
+COPY apps/dev/tsconfig.json apps/dev/tsconfig.json
+
+COPY apps/client/package.json apps/client/package.json
+COPY apps/client/tsconfig.json apps/client/tsconfig.json
+
+RUN yarn --frozen-lockfile
+
+COPY apps/client/public apps/client/public
+COPY apps/client/src apps/client/src
+COPY apps/client/scripts apps/client/scripts
+WORKDIR /app/apps/client
+RUN yarn build
+
+ARG NODE_ENV
+ENV NODE_ENV ${NODE_ENV:-production}
+
+FROM node:20-alpine
+
+WORKDIR /app
+
+RUN apk add python3 gcc g++ make cmake
+
+RUN npm install -g serve
+
+COPY --from=builder /app/node_modules node_modules
+COPY --from=builder /app/package.json package.json
+COPY --from=builder /app/apps/client/package.json apps/client/package.json
+COPY --from=builder /app/apps/client/scripts/ apps/client/scripts/
+COPY --from=builder /app/apps/client/package.json apps/client/package.json
+COPY --from=builder /app/apps/client/build/ apps/client/build/
+
+ENTRYPOINT [ "sh", "/app/apps/client/scripts/run/run.sh" ]

Dockerfile.server

@@ -0,0 +1,24 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+ENV MONGO_ENDPOINT=mongodb://mongo:27017/your_spotify
+
+RUN apk add python3 gcc g++ make cmake
+RUN npm install -g nodemon
+
+COPY yarn.lock yarn.lock
+COPY package.json package.json
+
+COPY apps/dev/package.json apps/dev/package.json
+COPY apps/dev/tsconfig.json apps/dev/tsconfig.json
+
+COPY apps/server/package.json apps/server/package.json
+COPY apps/server/tsconfig.json apps/server/tsconfig.json
+
+RUN yarn --frozen-lockfile
+
+COPY apps/server/src apps/server/src
+COPY apps/server/scripts apps/server/scripts
+
+ENTRYPOINT [ "sh", "/app/apps/server/scripts/run/run_dev.sh" ]

Dockerfile.server.production

@@ -0,0 +1,47 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+ENV MONGO_ENDPOINT=mongodb://mongo:27017/your_spotify
+
+RUN apk add python3 gcc g++ make cmake
+
+COPY yarn.lock yarn.lock
+COPY package.json package.json
+
+COPY apps/dev/package.json apps/dev/package.json
+COPY apps/dev/tsconfig.json apps/dev/tsconfig.json
+
+COPY apps/server/package.json apps/server/package.json
+COPY apps/server/tsconfig.json apps/server/tsconfig.json
+
+RUN yarn --frozen-lockfile
+
+COPY apps/server/src apps/server/src
+COPY apps/server/scripts apps/server/scripts
+WORKDIR /app/apps/server
+RUN yarn build
+
+ARG NODE_ENV
+ENV NODE_ENV ${NODE_ENV:-production}
+
+RUN rm -r node_modules
+RUN yarn --production --frozen-lockfile
+
+FROM node:20-alpine
+
+ARG NODE_ENV
+ENV NODE_ENV ${NODE_ENV:-production}
+
+WORKDIR /app
+
+RUN apk add python3 gcc g++ make cmake
+
+COPY --from=builder /app/node_modules node_modules
+COPY --from=builder /app/package.json package.json
+COPY --from=builder /app/apps/server/package.json apps/server/package.json
+COPY --from=builder /app/apps/server/scripts/ apps/server/scripts/
+COPY --from=builder /app/apps/server/package.json apps/server/package.json
+COPY --from=builder /app/apps/server/lib/ apps/server/lib/
+
+ENTRYPOINT [ "sh", "/app/apps/server/scripts/run/run.sh" ]

README.md

@@ -112,20 +112,19 @@ You can edit the CORS for the server:
 For **YourSpotify** to work you need to provide a Spotify application **public** AND **secret** to the server environment.
 To do so, you need to create a **Spotify application** [here](https://developer.spotify.com/dashboard/applications).
 
-1. Click on **Create a client ID**.
-2. Fill out all the informations.
-3. Copy the **public** and the **secret** key into your `docker-compose` file under the name of `SPOTIFY_PUBLIC` and `SPOTIFY_SECRET`
+1. Click on **Create app**.
+2. Fill out all the information.
+3. Set the redirect URI, corresponding to your **server** location on the internet (or your local network) adding the suffix **/oauth/spotify/callback** (**/api/oauth/spotify/callback** if using the [linuxserver](https://github.com/linuxserver/docker-your_spotify) image).
+- i.e: `http://localhost:8080/oauth/spotify/callback` or `http://home.mydomain.com/your_spotify_backend/oauth/spotify/callback`
+4. Check **Web API**
+5. Check **I understand and agree**
+6. Hit **Settings** at the top right corner
+7. Copy the **public** and the **secret** key into your `docker-compose` file under the name of `SPOTIFY_PUBLIC` and `SPOTIFY_SECRET`
    respectively.
-4. Add an authorized redirect URI corresponding to your **server** location on the internet adding the suffix **/oauth/spotify/callback**.
-   1. use the `EDIT SETTINGS` button on the top right corner of the page.
-   2. add your URI under the `Redirect URIs` section.
-   - i.e: `http://localhost:8080/oauth/spotify/callback` or `http://home.mydomain.com/your_spotify_backend/oauth/spotify/callback`
-   3. Do not forget to hit the save button at the bottom of the popup.
-5. Once you have created your application, Spotify wants you to register the users that will be able to access the application. (You don't need to do that for the account that created the application)
-   1. Click the **Users and access** button
-   2. Click the **Add new user** button
-   3. Enter the required information, a name and the email the user's spotify account has been created with.
-   4. (Optional) You can **Request extension** if you do not want to register the users by hand.
+8. Once you have created your application, Spotify wants you to register the users that will be able to access the application. (You don't need to do that for the account that created the application)
+   1. Click the **User Management** button
+   2. Enter the required information, a name and the email the user's Spotify account has been created with.
+   3. (Optional) You can **Request extension** if you do not want to register the users by hand.
 
 # Importing past history
 
@@ -145,7 +144,7 @@ The import process uses cache to limit requests to the Spotify API. By default,
 - Input your files starting with `StreamingHistoryX.json`.
 - Start your import.
 
-### Full privacy data
+### Full privacy data (recommended)
 
 > Takes a maximum of 30 days.
 > Gets you the whole history since the creation of your account.

apps/client/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: [
+    "plugin:react-hooks/recommended",
+    require.resolve("@your_spotify/dev/.eslintrc.js"),
+  ],
+  rules: {
+    "react/react-in-jsx-scope": "off",
+  },
+};

server/.prettierrc → apps/client/.prettierrc

@@ -5,5 +5,6 @@
   "arrowParens": "avoid",
   "printWidth": 80,
   "bracketSpacing": true,
-  "jsxBracketSameLine": true
+  "jsxBracketSameLine": true,
+  "endOfLine": "auto"
 }

apps/client/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@your_spotify/client",
+  "version": "1.8.0",
+  "private": true,
+  "scripts": {
+    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
+    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint src/ --ext .tsx,.ts"
+  },
+  "dependencies": {
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.0",
+    "@mui/icons-material": "5.15.11",
+    "@mui/material": "5.15.11",
+    "@mui/system": "5.15.11",
+    "@mui/x-date-pickers": "6.19.5",
+    "@reduxjs/toolkit": "2.2.1",
+    "axios": "1.6.7",
+    "clsx": "2.1.0",
+    "date-fns": "3.3.1",
+    "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-dom": "^18.2.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-redux": "9.1.0",
+    "react-router-dom": "6.22.2",
+    "react-scripts": "^5.0.1",
+    "recharts": "2.12.1",
+    "redux": "5.0.1",
+    "web-vitals": "3.5.2"
+  },
+  "devDependencies": {
+    "@types/node": "20.11.22",
+    "@types/react-copy-to-clipboard": "5.0.7",
+    "@types/react-date-range": "1.4.9",
+    "@types/react-dom": "18.2.19",
+    "@your_spotify/dev": "*"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

apps/client/public/variables.js

@@ -0,0 +1 @@
+window.API_ENDPOINT = 'http://localhost:8080';

apps/client/scripts/run/run.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# Setup API variable
+source /app/apps/client/scripts/run/variables.sh
+
+# Host the static website
+source /app/apps/client/scripts/run/serve.sh

apps/client/scripts/run/run_dev.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+source /app/apps/client/scripts/run/variables.sh
+
+cd /app/apps/client && yarn start

client/scripts/run/serve.sh → apps/client/scripts/run/serve.sh

@@ -4,4 +4,4 @@
 # -l 0.0.0.0 means that it's hosted on all the interfaces
 # build/ is the output of the package built at build-time
 
-serve -s -l tcp://0.0.0.0:3000 build/
+serve -s -l tcp://0.0.0.0:3000 /app/apps/client/build/

client/scripts/run/variables.sh → apps/client/scripts/run/variables.sh

@@ -3,10 +3,10 @@
 if [[ "$NODE_ENV" == "development" ]]
 then
     # Modify the dev file
-    VAR_PATH="/app/public"
+    VAR_PATH="/app/apps/client/public"
 else
     # Modify the built file
-    VAR_PATH="/app/build"
+    VAR_PATH="/app/apps/client/build"
 fi
 
 cp "$VAR_PATH/variables-template.js" "$VAR_PATH/variables.js"