feat: dev token loading, basic setup for musickit

backend/eslint.config.mjs

@@ -1,15 +1,15 @@
-import vue from 'eslint-plugin-vue';
 import eslint from '@eslint/js';
 import globals from 'globals';
-import typescript from '@typescript-eslint/eslint-plugin';
 import stylistic from '@stylistic/eslint-plugin';
 import tseslint from 'typescript-eslint';
+import typescript from '@typescript-eslint/eslint-plugin';
+import vue from 'eslint-plugin-vue';
 
 const style = {
     'plugins': {
         '@stylistic': stylistic,
         '@stylistic/js': stylistic,
-        '@stylistic/ts': stylistic,
+        '@stylistic/ts': stylistic
     },
     'files': [
         '**/*.ts',
@@ -20,11 +20,26 @@ const style = {
         '**/*.jsx'
     ],
     'rules': {
+        'sort-imports': [
+            'warn',
+            {
+                'ignoreCase': false,
+                'ignoreDeclarationSort': false,
+                'ignoreMemberSort': false,
+                'memberSyntaxSortOrder': [
+                    'none',
+                    'all',
+                    'multiple',
+                    'single'
+                ],
+                'allowSeparatedGroups': false
+            }
+        ],
         // Formatting
         '@stylistic/array-bracket-newline': [
             'error',
             {
-                'multiline': true,
+                'multiline': false,
                 'minItems': 2
             }
         ],
@@ -35,7 +50,8 @@ const style = {
         '@stylistic/array-element-newline': [
             'error',
             {
-                'multiline': true,
+                'consistent': false,
+                'multiline': false,
                 'minItems': 2
             }
         ],
@@ -56,7 +72,14 @@ const style = {
         ],
         '@stylistic/brace-style': [
             'error',
-            '1tbs'
+            '1tbs',
+            {
+                'allowSingleLine': false
+            }
+        ],
+        '@stylistic/comma-dangle': [
+            'error',
+            'never'
         ],
         '@stylistic/comma-spacing': [
             'error',
@@ -73,9 +96,9 @@ const style = {
             'error',
             'property'
         ],
-        '@stylistic/eol-last': [
+        '@stylistic/function-call-argument-newline': [
             'error',
-            'always'
+            'consistent'
         ],
         '@stylistic/function-call-spacing': [
             'error',
@@ -83,11 +106,7 @@ const style = {
         ],
         '@stylistic/function-paren-newline': [
             'error',
-            'multiline'
+            'multiline-arguments'
-        ],
-        '@stylistic/function-call-argument-newline': [
-            'error',
-            'consistent'
         ],
         '@stylistic/implicit-arrow-linebreak': [
             'error',
@@ -97,6 +116,10 @@ const style = {
             'error',
             4
         ],
+        '@stylistic/indent-binary-ops': [
+            'error',
+            4
+        ],
         '@stylistic/key-spacing': [
             'error',
             {
@@ -118,18 +141,31 @@ const style = {
         '@stylistic/max-len': [
             'warn',
             {
-                'code': 90,
+                'code': 140,
-                'comments': 100,
+                'comments': 160,
                 'ignoreComments': false,
                 'ignoreUrls': true,
-                'ignoreStrings': false
+                'ignoreStrings': true,
+                'ignoreTemplateLiterals': true,
+                'ignoreRegExpLiterals': true
             }
         ],
+        '@stylistic/max-statements-per-line': [
+            'error',
+            {
+                'max': 1
+            }
+        ],
+        '@stylistic/multiline-ternary': [
+            'error',
+            'always-multiline'
+        ],
         '@stylistic/new-parens': [
             'error',
             'always'
         ],
-        '@stylistic/newline-per-chained-call': [ 'error' ],
+        '@stylistic/newline-per-chained-call': 'error',
+        '@stylistic/no-confusing-arrow': 'error',
         '@stylistic/no-extra-parens': [
             'error',
             'all',
@@ -167,17 +203,17 @@ const style = {
             'always'
         ],
         '@stylistic/object-property-newline': 'error',
+        '@stylistic/one-var-declaration-per-line': 'error',
         '@stylistic/operator-linebreak': [
             'error',
             'before'
         ],
-        '@stylistic/one-var-declaration-per-line': 'error',
         '@stylistic/padded-blocks': [
             'error',
             {
                 'blocks': 'never',
                 'classes': 'always',
-                'switches': 'never',
+                'switches': 'never'
             }
         ],
 
@@ -561,7 +597,7 @@ const style = {
                 'blankLine': 'always',
                 'prev': 'class',
                 'next': '*'
-            },
+            }
         ],
         '@stylistic/quote-props': [
             'error',
@@ -613,17 +649,23 @@ const style = {
             'error',
             'always'
         ],
+        '@stylistic/switch-colon-spacing': 'error',
         '@stylistic/template-curly-spacing': [
             'error',
             'always'
         ],
-        '@stylistic/switch-colon-spacing': 'error',
+        '@stylistic/template-tag-spacing': [
+            'error',
+            'always'
+        ],
+        '@stylistic/type-generic-spacing': 'error',
+        '@stylistic/type-named-tuple-spacing': 'error',
         '@stylistic/wrap-iife': [
             'error',
             'inside'
         ],
         '@stylistic/wrap-regex': 'error',
-        '@stylistic/ts/type-annotation-spacing': 'error',
+        '@stylistic/ts/type-annotation-spacing': 'error'
     }
 };
 
@@ -642,15 +684,15 @@ export default tseslint.config(
             'ecmaVersion': 'latest',
             'globals': globals.browser,
             'parserOptions': {
-                'parser': tseslint.parser,
+                'parser': tseslint.parser
-            },
+            }
         },
         'plugins': {
             'vue': vue,
             '@stylistic': stylistic,
             '@stylistic/js': stylistic,
             '@stylistic/ts': stylistic,
-            '@typescript-eslint': typescript,
+            '@typescript-eslint': typescript
         },
         'extends': [
             eslint.configs.recommended,
@@ -694,9 +736,9 @@ export default tseslint.config(
                 'error',
                 {
                     'singleline': 3,
-                    'multiline': 1,
+                    'multiline': 1
+                }
+            ]
+        }
     }
-            ],
-        },
-    },
 );

backend/package.json

@@ -0,0 +1,19 @@
+{
+  "dependencies": {
+    "express": "^5.2.1",
+    "express-session": "^1.19.0",
+    "jsonwebtoken": "^9.0.3"
+  },
+  "devDependencies": {
+    "eslint": "^10.9.0",
+    "@types/express": "^5.0.6",
+    "@types/express-session": "^1.19.0",
+    "@types/node": "^26.2.0",
+    "@eslint/js": "^10.0.1",
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "@types/jsonwebtoken": "^9.0.10",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.11.0",
+    "typescript-eslint": "^8.67.0"
+  }
+}

backend/src/app.ts

@@ -0,0 +1,54 @@
+import express from 'express';
+import expressSession from 'express-session';
+import fs from 'fs';
+import jwt from 'jsonwebtoken';
+import path from 'path';
+
+const app = express();
+
+app.use( expressSession( {
+    'secret': '',
+    'resave': true,
+    'saveUninitialized': false
+} ) );
+
+
+app.get( '/', ( request: express.Request, response: express.Response ) => {
+    response.send( 'HELLO WORLD' );
+} );
+
+
+
+const privateKey = fs.readFileSync( path.join(
+    __dirname,
+    '/config/apple_private_key.p8'
+) ).toString();
+const musicApiConfig = JSON.parse( fs.readFileSync( path.join(
+    __dirname,
+    '/config/apple-music-api.config.secret.json'
+) ).toString() );
+
+app.get( '/dev-token', ( request: express.Request, response: express.Response ) => {
+    // sign dev token
+    const now = new Date().getTime();
+    const tomorrow = now + ( 24 * 3600 * 1000 );
+    const jwtToken = jwt.sign( {
+        'iss': musicApiConfig.teamID,
+        'iat': Math.floor( now / 1000 ),
+        'exp': Math.floor( tomorrow / 1000 )
+    }, privateKey, {
+        'algorithm': 'ES256',
+        'keyid': musicApiConfig.keyID
+    } );
+
+    response.send( jwtToken );
+} );
+
+app.use( ( _request: express.Request, response: express.Response ) => {
+    response.sendFile( path.join( __dirname, '' ) );
+} );
+
+
+const PORT = process.env.PORT || 8080;
+
+app.listen( PORT );

web/.env

@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://localhost:8080

web/package.json

@@ -25,6 +25,7 @@
     "eslint-plugin-vue": "^10.10.0",
     "globals": "^17.11.0",
     "npm-run-all2": "^9.0.2",
+    "sass-embedded": "^1.103.1",
     "typescript": "~6.0.0",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.1.5",

web/src/ts/player/musickit/index.ts

@@ -1,5 +1,23 @@
-export const useMusicKit = () => {
+export const useMusicKit = ( storefront: string = 'ch' ) => {
-    const init = () => {
+    const init = async () => {
+        const res = await fetch( import.meta.env.VITE_BACKEND_URL + '/', {
+            'credentials': 'include'
+        } );
+
+        if ( res.status === 200 ) {
+            const token = await res.text();
+
+            window.MusicKit.configure( {
+                'developerToken': token,
+                'app': {
+                    'name': 'MusicPlayer',
+                    'build': '4',
+                    'icon': 'https://music.janishutz.com/logo.jpg'
+                },
+                'storefront': storefront.toUpperCase()
+            } );
+        }
+
         isInit = true;
     };
 

web/src/views/404View.vue

@@ -2,22 +2,24 @@
     <div class="not-found-view">
         <h1>404</h1>
         <p>Page not found</p>
-        <RouterLink to="/" class="button primary">
+        <RouterLink to="/" class="fancy-button">
             Home
         </RouterLink>
     </div>
 </template>
 
-<script setup lang="ts">
+<style scoped lang="scss">
-
-</script>
-
-<style scoped>
     .not-found-view {
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
+
+        h1 {
+            font-size: 20vh;
+            line-height: 100%;
+            margin: 10px;
+        }
     }
 </style>