⬆️ upgrade dependencies

Author: yuudi

.devcontainer/devcontainer.json

@@ -1,6 +1,15 @@
 {
 	"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": {},
+		"ghcr.io/devcontainers-extra/features/rclone:1": {}
+	},
+	"postCreateCommand": "npm ci",
+	"forwardPorts": [
+		4200,
+		5572
+	],
 	"customizations": {
 		"vscode": {
 			"extensions": [
@@ -12,4 +21,4 @@
 			]
 		}
 	}
-}
+}

README.md

@@ -49,8 +49,21 @@ 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.  create some backend for test purpose
 
-Api calling will be proxied to backed [config](./src/proxy.conf.mjs)
+    ```sh
+    mkdir -p ./pseudo-backend/{backend-a/{folder-1,folder-2},backend-b}
+    touch ./pseudo-backend/backend-a/{folder-1/{file-1.txt,file-2.jpg},file.txt}
+    echo '*' >./pseudo-backend/.gitignore
+    rclone config create pseudo-backend-a alias remote=$(pwd)/pseudo-backend/backend-a
+    rclone config create pseudo-backend-b alias remote=$(pwd)/pseudo-backend/backend-b
+    ```
+
+1.  start project
+
+    ```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"]
   }
 }