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

@@ -15,6 +15,34 @@ This example uses image targets to display information about jellyfish on a flye
 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
 
+## Serve projects over HTTPS
+
+Browsers require HTTPS certificates to access the camera. Use [http-server](https://github.com/http-party/http-server#readme) to serve project directories with HTTPS.
+
+First, you need to make sure that [openssl](https://github.com/openssl/openssl) is installed, and you have key.pem and cert.pem files. You can generate them using this command:
+
+```
+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 value for Common name if you want to be able to install the certificate in your OS's root certificate store or browser so that it is trusted.
+
+This generates a cert-key pair and it will be valid for 3650 days (about 10 years).
+
+Then you can run `http-server` with `-S` for enabling SSL and `-C` for your certificate file:
+
+```
+npx http-server . -S -C cert.pem
+```
+
+**NOTE**: The first IP address listed is **127.0.0.1:8080** (which is the loopback
+device aka "localhost") and your mobile phone won't be able to connect to that IP address directly.
+Please use one of the other IP addresses.
+
+**WINDOWS USERS**: Run the http-server command using a standard Command Prompt window (cmd.exe). The script may generate errors if run from PowerShell.
+
+Learn more in the [http-server documentation](https://github.com/http-party/http-server#tlsssl).
+
 ## Questions?
 
 Please raise any questions on [Github Discussions](https://github.com/orgs/8thwall/discussions) or join the [Discord](https://8th.io/discord) to connect with the community.

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
+}