Fix: Configure webpack and update image target assets to make example work

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 tmp
-.DS_Store
+.DS_Store
+*.pem

README.md

@@ -11,9 +11,39 @@ This example uses image targets to display information about jellyfish on a flye
 1. On this repository, click Code > Download zip
 2. Unzip the folder to the location you'd like to work in
 3. `npm install`
-4. `npm run serve`
-5. To connect to a mobile device, follow [these instructions](https://8th.io/test-on-mobile)
-6. Recommended: Track your files using [git](https://git-scm.com/about) to avoid losing progress
+4. Create `key.pem` and `cert.pem` in the project root so the dev server can use HTTPS (required for camera access in the browser). See [HTTPS certificates](#https-certificates) below.
+5. `npm run serve` and open the URL shown in the terminal (for example `https://localhost:8080`).
+6. **To test on a phone** on the same Wi‑Fi: in the phone’s browser, open `https://<your-computer’s-LAN-IP>:<port>` using the same port as in the terminal. You will get a warning for the self‑signed certificate; proceed or install/trust the cert as needed for your OS/browser.  
+   For access from outside your LAN (or if you prefer a tunnel), [Test on Mobile](https://8th.io/test-on-mobile) describes using **ngrok** with webpack; you may need to add ngrok hosts to `devServer.allowedHosts` in `config/webpack.config.js` as that page explains.
+7. Recommended: Track your files using [git](https://git-scm.com/about) to avoid losing progress
+
+## HTTPS certificates
+
+Browsers require a secure context (HTTPS) to access the camera. The development server (`npm run serve`) reads `key.pem` and `cert.pem` from the project root.
+
+First, make sure [OpenSSL](https://github.com/openssl/openssl) is installed. You can generate a key and certificate with:
+
+```
+openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
+```
+
+You will be prompted with a few questions after entering the command. Use `127.0.0.1` as the value for **Common name** if you want to install the certificate in your OS or browser trust store so that it is treated as trusted.
+
+This generates a cert–key pair valid for 3650 days (about 10 years).
+
+### Optional: serve a static build over HTTPS with http-server
+
+If you prefer to preview the **built** output without webpack-dev-server, you can use [http-server](https://github.com/http-party/http-server#readme) with the same `key.pem` / `cert.pem`:
+
+```
+npx http-server . -S -C cert.pem
+```
+
+**NOTE**: The first address listed is often **127.0.0.1** (localhost only); other devices cannot use that. Use your machine’s LAN IP and the correct port, or use a tunnel as in the mobile section above.
+
+**WINDOWS USERS**: Run the http-server command from a standard Command Prompt (cmd.exe). The script may show errors if run from PowerShell.
+
+Learn more in the [http-server documentation](https://github.com/http-party/http-server#tlsssl).
 
 ## Questions?
 
@@ -25,4 +55,3 @@ Please raise any questions on [Github Discussions](https://github.com/orgs/8thwa
 
 1. `npx @8thwall/image-target-cli@latest`
 
-

config/webpack.config.js

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -41,7 +42,8 @@ const makeSassLoader = () => ({
 
 const makeAssetLoader = () => ({
   test: /\..*$/,
-  include: [path.join(srcPath, 'assets')],
+  include: [path.join(srcPath, 'assets'), path.join(srcPath, 'targets')],
+  exclude: /\.(js|ts|json)$/,
   loader: path.join(__dirname, 'asset-loader.js'),
 })
 
@@ -101,10 +103,18 @@ const config = {
           to: path.join(distPath, 'image-targets'),
           noErrorOnMissing: true,
         },
+        {
+          from: path.join(srcPath, 'targets'),
+          to: path.join(distPath, 'targets'),
+          noErrorOnMissing: true,
+        },
       ],
     }),
   ],
-  resolve: {extensions: ['.ts', '.js']},
+  resolve: {
+    extensions: ['.ts', '.js'],
+    modules: [path.join(srcPath, 'targets'), 'node_modules'],
+  },
   module: {
     rules: [
       makeJsLoader(),
@@ -122,6 +132,31 @@ const config = {
     compress: true,
     hot: true,
     liveReload: false,
+    static: [
+      {
+        directory: path.join(srcPath, 'targets'),
+        publicPath: '/targets',
+      },
+      {
+        directory: path.join(srcPath, 'targets'),
+        publicPath: '/image-targets',
+      },
+      {
+        directory: path.join(srcPath, 'targets'),
+        publicPath: '/',
+      },
+      {
+        directory: path.join(srcPath, 'assets'),
+        publicPath: '/assets',
+      },
+    ],
+    server: {
+      type: 'https',
+      options: {
+        key: fs.readFileSync(path.join(rootPath, 'key.pem')),
+        cert: fs.readFileSync(path.join(rootPath, 'cert.pem')),
+      },
+    },
     headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',

src/app.js

@@ -0,0 +1,9 @@
+const onxrloaded = () => {
+    XR8.XrController.configure({
+        imageTargetData: [
+        require('model-target.json'),
+        require('video-target.json'),
+        ],
+    })
+}
+window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

src/index.html

@@ -10,18 +10,8 @@
   <script crossorigin="anonymous" src="../external/xrextras/xrextras.js"></script>
   <script crossorigin="anonymous" src="../external/landing-page/landing-page.js"></script>
   <script crossorigin="anonymous" src="../external/xr/xr.js" async="true" data-preload-chunks="slam"></script>
+  <script src="bundle.js"></script>
 
-  <script>
-    const onxrloaded = () => {
-      XR8.XrController.configure({
-        imageTargetData: [
-          require('targets/model-target.json'),
-          require('targets/video-target.json'),
-        ],
-      })
-    }
-    window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)
-  </script>
 
   <!-- Use "8thwall:" meta tags to hook into 8th Wall's build process and developer tools. -->
   <meta name="8thwall:renderer" content="aframe:1.5.0" />

src/targets/model-target.json

@@ -0,0 +1,23 @@
+{
+  "imagePath": "image-targets/model-target_luminance.jpg",
+  "metadata": null,
+  "name": "model-target",
+  "type": "PLANAR",
+  "properties": {
+    "left": 0,
+    "top": 0,
+    "width": 480,
+    "height": 640,
+    "isRotated": false,
+    "originalWidth": 480,
+    "originalHeight": 640
+  },
+  "resources": {
+    "originalImage": "model-target_original.jpg",
+    "croppedImage": "model-target_cropped.jpg",
+    "thumbnailImage": "model-target_thumbnail.jpg",
+    "luminanceImage": "model-target_luminance.jpg"
+  },
+  "created": 1775116487722,
+  "updated": 1775116487723
+}

src/targets/video-target.json

@@ -0,0 +1,23 @@
+{
+  "imagePath": "image-targets/video-target_luminance.jpg",
+  "metadata": null,
+  "name": "video-target",
+  "type": "PLANAR",
+  "properties": {
+    "left": 0,
+    "top": 0,
+    "width": 480,
+    "height": 640,
+    "isRotated": false,
+    "originalWidth": 480,
+    "originalHeight": 640
+  },
+  "resources": {
+    "originalImage": "video-target_original.jpg",
+    "croppedImage": "video-target_cropped.jpg",
+    "thumbnailImage": "video-target_thumbnail.jpg",
+    "luminanceImage": "video-target_luminance.jpg"
+  },
+  "created": 1775116530004,
+  "updated": 1775116530004
+}