⬆️ upgrade dependencies

Author: yuudi

.devcontainer/devcontainer.json

@@ -1,6 +1,17 @@
 {
 	"name": "rclone-webui-angular",
-	"image": "mcr.microsoft.com/devcontainers/javascript-node:20",
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:22",
+	"features": {
+		"ghcr.io/devcontainers-extra/features/angular-cli:2": {
+			"version": "16"
+		},
+		"ghcr.io/devcontainers-extra/features/rclone:1": {}
+	},
+	"postCreateCommand": "npm ci && ng analytics disable && echo 'source <(ng completion script)' >> ~/.bashrc",
+	"forwardPorts": [
+		4200,
+		5572
+	],
 	"customizations": {
 		"vscode": {
 			"extensions": [
@@ -12,4 +23,4 @@
 			]
 		}
 	}
-}
+}

.github/workflows/CI.yml

@@ -14,14 +14,14 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Cache npm
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: RcloneWebuiAngular-${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.github/workflows/release-embed.yml

@@ -12,14 +12,14 @@ jobs:
       contents: write
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Cache npm
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: RcloneWebuiAngular-${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.github/workflows/release-native.yml

@@ -12,14 +12,14 @@ jobs:
       contents: write
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Cache npm
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: RcloneWebuiAngular-${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.github/workflows/release-standalone.yml

@@ -14,14 +14,14 @@ jobs:
       id-token: write
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Cache npm
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: RcloneWebuiAngular-${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

README.md

@@ -49,8 +49,11 @@ If you feel like coding, translating or just want to help, please check [CONTRIB
 
 ### Development
 
-Run backend: `rclone rcd --rc-user="<your username>" --rc-pass="<your password>" --rc-addr=127.0.0.1:5572`
+> Optional: This project ready for Dev-Container, try it out at [GitHub Codespace](https://codespaces.new/yuudi/rclone-webui-angular)
 
-Run frontend: `ng serve`
+1.  install rclone if you didn't
+1.  start project
 
-Api calling will be proxied to backed [config](./src/proxy.conf.mjs)
+    ```sh
+    npm start # it will start rclone and angular at same time, API calling will be properly proxied to backed
+    ```

angular.json

@@ -19,7 +19,7 @@
           "baseHref": "en-US/"
         },
         "locales": {
-          "de-DE":{
+          "de-DE": {
             "translation": "src/locale/messages.de-DE.xlf",
             "baseHref": "de-DE/"
           },
@@ -41,19 +41,16 @@
             "outputPath": "dist/build",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
               "src/assets",
               "src/manifest.webmanifest"
             ],
-            "styles": [
-              "src/styles.scss"
-            ],
+
+            "styles": ["src/styles.scss"],
             "scripts": [],
             "serviceWorker": true,
             "ngswConfigPath": "ngsw-config.json"
@@ -144,28 +141,20 @@
           "builder": "@angular-devkit/build-angular:jest",
           "options": {
             "tsConfig": "tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
+            "polyfills": ["zone.js", "zone.js/testing"]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
   },
   "cli": {
     "analytics": false,
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }

docs/CONTRIBUTING.md

@@ -12,11 +12,25 @@ For new feature or big changes, please open an [issue](https://github.com/yuudi/
 
 ### Development environment
 
-Run backend: `rclone rcd --rc-user="<your username>" --rc-pass="<your password>" --rc-addr=127.0.0.1:5572`
+> Optional: This project ready for Dev-Container, try it out at [GitHub Codespace](https://codespaces.new/yuudi/rclone-webui-angular)
 
-Run frontend: `ng serve`
+1.  install rclone if you didn't
+1.  create some backend for test purpose
 
-Api calling will be proxied to backed [config](../src/proxy.conf.mjs)
+    ```sh
+    TMP_DIR=$(mktemp -d)
+    mkdir -p $TMP_DIR/pseudo-backend/{backend-a/{folder-1,folder-2},backend-b}
+    touch $TMP_DIR/pseudo-backend/backend-a/{folder-1/{file-1.txt,file-2.jpg},file.txt}
+    rclone config create pseudo-backend-a alias remote=$TMP_DIR/pseudo-backend/backend-a
+    rclone config create pseudo-backend-b alias remote=$TMP_DIR/pseudo-backend/backend-b
+    # rm -r $TMP_DIR # when you want to delete them
+    ```
+
+1.  start project
+
+    ```sh
+    npm start # it will start rclone and angular at same time, API calling will be properly proxied to backed
+    ```
 
 ## Translation