Merge pull request #14 from ml5js/serve-examples

Serve example directory via webpack devServer
ml5js · Jun 26, 2023 · 9365cd9 · 9365cd9
2 parents b35f452 + e9d71bf
commit 9365cd9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -25,9 +25,9 @@ You should see something similar to this in the terminal:
 webpack 5.76.1 compiled successfully in 8360 ms
 ```
 
-A local server have been started and hosts a built version of the ml5 library at http://localhost:8080/ml5.js. While the server is running, Webpack will automatically rebuild the library if you change and save any file in the `/src` folder.
+A local server have been started and hosts a built version of the ml5 library at http://localhost:8080/dist/ml5.js. While the server is running, Webpack will automatically rebuild the library if you change and save any file in the `/src` folder.
 
-Open `examples/NeuralNetwork/index.html` in the browser to see the live build of `ml5.js` working in some example code.
+A webpage at http://localhost:8080/examples/ should automatically open with the directory listing of the example directory. Select one of the directories to test run `ml5.js` in some example code.
 
 ## Code Formatting
 

diff --git a/README.md b/README.md
@@ -29,6 +29,6 @@ You should see something similar to this in the terminal:
 webpack 5.76.1 compiled successfully in 8360 ms
 ```
 
-A local server have been started and hosts a built version of the ml5 library at http://localhost:8080/ml5.js. While the server is running, Webpack will automatically rebuild the library if you change and save any file in the `/src` folder.
+A local server have been started and hosts a built version of the ml5 library at http://localhost:8080/dist/ml5.js. While the server is running, Webpack will automatically rebuild the library if you change and save any file in the `/src` folder.
 
-Open `examples/NeuralNetwork/index.html` in the browser to see the live build of `ml5.js` working in some example code.
+A webpage at http://localhost:8080/examples/ should automatically open with the directory listing of the example directory. Select one of the directories to test run `ml5.js` in some example code.
diff --git a/examples/NeuralNetwork/index.html b/examples/NeuralNetwork/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <script src="http://localhost:8080/ml5.js"></script>
+    <script src="../../dist/ml5.js"></script>
   </head>
   <body>
     <script src="script.js"></script>

diff --git a/webpack.config.js b/webpack.config.js
@@ -11,7 +11,7 @@ module.exports = function (env, argv) {
     output: {
       filename: "ml5.js",
       path: resolve(__dirname, "dist"),
-      publicPath: "/",
+      publicPath: "/dist/",
       library: {
         name: "ml5",
         type: "umd",
@@ -21,10 +21,19 @@ module.exports = function (env, argv) {
     devServer: {
       port: 8080,
       allowedHosts: "all",
-      static: {
-        directory: resolve(__dirname, "dist"),
-        watch: true,
-      },
+      static: [
+        {
+          directory: resolve(__dirname, "dist"),
+          publicPath: "/dist",
+          watch: true,
+        },
+        {
+          directory: resolve(__dirname, "examples"),
+          publicPath: "/examples",
+          watch: true,
+        },
+      ],
+      open: "/examples",
     },
     plugins: [
       new HtmlWebpackPlugin({