Demonstrate loading DeepAR resources locally

Author: zakkempson

package.json

@@ -4,7 +4,7 @@
   "description": "Quickstart project for DeepAR Web.",
   "main": "index.js",
   "scripts": {
-    "build": "rm -rf dist && webpack --config webpack.config.js --mode production && cp -r public/* dist && cp -r node_modules/deepar",
+    "build": "rm -rf dist && webpack --config webpack.config.js --mode production && cp -r public/* dist && cp -r node_modules/deepar dist/deepar-resources",
     "dev": "webpack serve --mode development --open --port 8888"
   },
   "author": "",

src/index.js

@@ -45,6 +45,10 @@ console.log("Deepar version: " + deepar.version);
       licenseKey: "your_license_key_goes_here",
       canvas,
       effect: effectList[0],
+      // Removing the rootPath option will make DeepAR load the resources from the JSdelivr CDN,
+      // which is fine for development but is not recommended for production since it's not optimized for performance and can be unstable.
+      // More info here: https://docs.deepar.ai/deepar-sdk/deep-ar-sdk-for-web/download-optimizations#custom-deployment-of-deepar-web-resources
+      rootPath: "./deepar-resources",
     });
   } catch (error) {
     console.error(error);

webpack.config.js

@@ -8,6 +8,28 @@ module.exports = {
     clean: true,
   },
   target: "web",
+  module: {
+    rules: [
+      {
+        test: /\.(wasm)|(bin)|(obj)$/i,
+        include: [
+          path.resolve(__dirname, 'node_modules/deepar/'),
+        ],
+        type: 'asset/resource',
+      },
+      {
+        include: [
+          path.resolve(__dirname, 'effects/'),
+        ],
+        type: 'asset/resource',
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      '@effects': path.resolve(__dirname, 'effects/'),
+    },
+  },
   performance: {
     maxEntrypointSize: 1000000,
     maxAssetSize: 10000000,