Fix/add-zipped-version-of-packages-to-asset-deployment (imgly#127)

packages/web/README.md

@@ -117,12 +117,11 @@ The performance is largely dependent on the feature set available. Most prominen
 
 ### Custom Asset Serving
 
-The wasm and onnx neural networks are hosted by IMG.LY by default. For production use, we advise you to host them yourself. Therefore, copy all .wasm and .onnx files to your public path `$PUBLIC_PATH` and reconfigure the library.
+The wasm and onnx neural networks are hosted by IMG.LY by default. For production use, we advise you to host them yourself:
 
-```shell
-npm i @imgly/background-removal-data
-cp node_modules/@imgly/background-removal-data/dist/* $PUBLIC_PATH
-```
+- Download the following package with the package version that matches your `@imgly/background-removal` version from the IMG.LY CDN and decompress it. Note that you need to replace `YOUR_PACKAGE_VERSION` with the actual version of the package you are using. The URL is
+  `https://staticimgly.com/@imgly/background-removal-data/YOUR_PACKAGE_VERSION/package.tgz`.
+- Move the content of the `package/dist` folder to be served by your web server. This often is the `/public` folder.
 
 ```typescript
 import imglyRemoveBackground, {Config} from "@imgly/background-removal"

scripts/deploy-assets.mjs

@@ -1,10 +1,18 @@
-import { readFile } from 'node:fs/promises';
+import chalk from 'chalk';
 import { exec } from 'child_process';
+import { readFile } from 'node:fs/promises';
 import { promisify } from 'util';
-import chalk from 'chalk';
 
 const execAsync = promisify(exec);
 
+const execAsyncWithErrors = async (command, options) => {
+  try {
+    const { stdout, stderr } = await execAsync(command, options);
+  } catch (error) {
+    throw error;
+  }
+};
+
 async function syncToS3() {
   try {
     // Load package.json
@@ -38,10 +46,27 @@ async function syncToS3() {
             `NOTE: Syncing might fail when aws client ist not installed nor configured in silence!`
           )}`
         );
+        // cwd based on package name:
+        const cwd = path;
+        // npm packing:
+        await execAsyncWithErrors(
+          `rm -rf ./${path}/tmp && mkdir -p ./${path}/tmp`
+        );
+        // we pack the package to also publish the package.tgz to s3
+        const packCommand = `npm pack . --pack-destination ./tmp`;
+        console.log(`Packing ${packageName} using ${packCommand}...`);
+        await execAsyncWithErrors(packCommand, { cwd });
+        // rename the .tgz from e.g imgly-background-removal-data-1.5.3.tgz to package.tgz to have a stable name
+        await execAsyncWithErrors('mv ./tmp/*.tgz ./tmp/package.tgz', { cwd });
+        // npm extract:
+        const extractCommand = `tar -xvzf ./tmp/* -C ./tmp --strip-components=1`;
+        console.log(`Extracting ${packageName} using ${extractCommand}...`);
+        await execAsyncWithErrors(extractCommand, { cwd });
+        // sync to s3:
         console.log(`Syncing ${packageName} to S3...`);
-        const command = `aws s3 sync --endpoint-url ${endpointUrl} ./${path}/dist s3://${bucketName}/${packageName}/${version}/dist`;
+        const command = `aws s3 sync --endpoint-url ${endpointUrl} ./${path}/tmp s3://${bucketName}/${packageName}/${version}`;
         console.log(`Command: ${command}`);
-        return await execAsync(command);
+        return await execAsyncWithErrors(command);
       })
     );