feat: update and add MDS self hosting instructions

Author: dynamsoft-h

guide/angular.md

@@ -76,6 +76,43 @@ Open `http://localhost:4200/` to view the sample app.
 > [!NOTE]
 > Secure context requires HTTPS to provide camera access, but Angular CLI serves over HTTP by default. For mobile testing, you may need to configure HTTPS or use a reverse proxy.
 
+## Self-Host Resources
+
+You can self host the resources for the Hello World by following a few simple steps. Refer to the [plain JavaScript self-hosting guide]({{ site.guide }}index.html#quick-start) for details.
+
+### Set File Paths
+
+First we set MDS to look resource paths where we will place the resources later:
+
+```typescript
+const documentScanner = new Dynamsoft.DocumentScanner({
+  license: "YOUR_LICENSE_KEY_HERE",
+  scannerViewConfig: {
+    cameraEnhancerUIPath: "dist/libs/dynamsoft-document-scanner/dist/document-scanner.ui.html",
+  },
+  engineResourcePaths: {
+    rootDirectory: "dist/libs/"
+  },
+});
+```
+
+### Move Resources
+
+Now, add a script (`get-libs`) to automatically move the resources to their destination when building the project (`build`) in `samples/framework/angular/package.json`:
+
+```json
+"scripts": {
+  "ng": "ng",
+  "start": "ng serve --ssl",
+  "build": "ng build && npm run get-libs",
+  "get-libs": "npm install --no-save dynamsoft-capture-vision-data dynamsoft-capture-vision-bundle && npx mkdirp /dist/libs && npx cpx 'node_modules/dynamsoft-*/**/*' dist/libs/ --dereference",
+  "watch": "ng build --watch --configuration development",
+  "test": "ng test"
+},
+```
+
+When building, **swap the build script** from `ng build` to `npm run build`. Continue using `ng serve` to serve the application.
+
 ## Customization
 
 Please check the official [documentation]({{ site.guide }}index.html).

guide/index.md

@@ -192,7 +192,7 @@ The library uses [`engineResourcePaths`]({{ site.api }}index.html#engineresource
 const documentScanner = new Dynamsoft.DocumentScanner({
   license: "YOUR_LICENSE_KEY_HERE",
   scannerViewConfig: {
-    cameraEnhancerUIPath: "./dist/document-scanner.ui.html", // Use the local file
+    cameraEnhancerUIPath: "dist/document-scanner.ui.html", // Use the local file
   },
   engineResourcePaths: {
     rootDirectory: "dist/libs/"
@@ -216,7 +216,7 @@ Update the `scripts` section in `package.json` to automatically copy resources t
 "scripts": {
     "serve": "node dev-server/index.js",
     "build": "rollup -c && npm run get-libs",
-    "get-libs": "npm install --no-save dynamsoft-capture-vision-data && npx mkdirp dist/libs && npx cpx 'node_modules/dynamsoft-*/**/*' dist/libs/ --dereference",
+    "get-libs": "npm install --no-save dynamsoft-capture-vision-data dynamsoft-capture-vision-bundle && npx mkdirp /dist/libs && npx cpx 'node_modules/dynamsoft-*/**/*' dist/libs/ --dereference,
     "build:production": "rollup -c --environment BUILD:production"
 },
 ```

guide/react.md

@@ -66,6 +66,39 @@ npm start
 
 Then open https://localhost:3000/ to view the sample app.
 
+## Self-Host Resources
+
+You can self host the resources for the Hello World by following a few simple steps. Refer to the [plain JavaScript self-hosting guide]({{ site.guide }}index.html#quick-start) for details.
+
+### Set File Paths
+
+First we set MDS to look resource paths where we will place the resources later:
+
+```typescript
+const documentScanner = new Dynamsoft.DocumentScanner({
+  license: "YOUR_LICENSE_KEY_HERE",
+  scannerViewConfig: {
+    cameraEnhancerUIPath: "dist/libs/dynamsoft-document-scanner/dist/document-scanner.ui.html",
+  },
+  engineResourcePaths: {
+    rootDirectory: "dist/libs/"
+  },
+});
+```
+
+### Move Resources
+
+Now, add a script (`get-libs`) to automatically move the resources to their destination when building the project (`build`) in `samples/framework/react-hooks/package.json`:
+
+```json
+"scripts": {
+  "dev": "vite",
+  "build": "tsc && vite build && npm run get-libs",
+  "get-libs": "npm install --no-save dynamsoft-capture-vision-data dynamsoft-capture-vision-bundle && npx mkdirp /dist/libs && npx cpx 'node_modules/dynamsoft-*/**/*' dist/libs/ --dereference",
+  "preview": "vite preview"
+},
+```
+
 ## Customization
 
 Please check the official [documentation]({{ site.guide }}index.html).

guide/vue.md

@@ -66,6 +66,39 @@ npm run serve
 
 Then open http://localhost:8080/ to view the sample app.
 
+## Self-Host Resources
+
+You can self host the resources for the Hello World by following a few simple steps. Refer to the [plain JavaScript self-hosting guide]({{ site.guide }}index.html#quick-start) for details.
+
+### Set File Paths
+
+First we set MDS to look resource paths where we will place the resources later:
+
+```typescript
+const documentScanner = new Dynamsoft.DocumentScanner({
+  license: "YOUR_LICENSE_KEY_HERE",
+  scannerViewConfig: {
+    cameraEnhancerUIPath: "dist/libs/dynamsoft-document-scanner/dist/document-scanner.ui.html",
+  },
+  engineResourcePaths: {
+    rootDirectory: "dist/libs/"
+  },
+});
+```
+
+### Move Resources
+
+Now, add a script (`get-libs`) to automatically move the resources to their destination when building the project (`build`) in `samples/framework/vue/package.json`:
+
+```json
+"scripts": {
+  "dev": "vite",
+  "build": "tsc && vite build && npm run get-libs",
+  "get-libs": "npm install --no-save dynamsoft-capture-vision-data dynamsoft-capture-vision-bundle && npx mkdirp /dist/libs && npx cpx 'node_modules/dynamsoft-*/**/*' dist/libs/ --dereference",
+  "preview": "vite preview"
+},
+```
+
 ## Customization
 
 Please check the official [documentation]({{ site.guide }}index.html).