Automatically set public path

{{cookiecutter.github_project_name}}/js/amd-public-path.js

@@ -0,0 +1,8 @@
+// In an AMD module, we set the public path using the magic requirejs 'module' dependency
+// See https://github.com/requirejs/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#module
+// Since 'module' is a requirejs magic module, we must include 'module' in the webpack externals configuration.
+var module = require('module');
+var url = new URL(module.uri, document.location)
+// Using lastIndexOf('/')+1 gives us the empty string if there is no '/', so pathname becomes '/'
+url.pathname = url.pathname.slice(0,url.pathname.lastIndexOf('/')+1);
+__webpack_public_path__ = `${url.origin}${url.pathname}`;

{{cookiecutter.github_project_name}}/js/lib/extension.js

@@ -1,12 +1,6 @@
 // This file contains the javascript that is run when the notebook is loaded.
 // It contains some requirejs configuration and the `load_ipython_extension`
 // which is required for any notebook extension.
-//
-// Some static assets may be required by the custom widget javascript. The base
-// url for the notebook is not known at build time and is therefore computed
-// dynamically.
-__webpack_public_path__ = document.querySelector('body').getAttribute('data-base-url') + 'nbextensions/{{ cookiecutter.npm_package_name }}';
-
 
 // Configure requirejs
 if (window.require) {

{{cookiecutter.github_project_name}}/js/webpack.config.js

@@ -18,13 +18,11 @@ module.exports = (env, argv) => {
         // some configuration for requirejs, and provides the legacy
         // "load_ipython_extension" function which is required for any notebook
         // extension.
-        //
             entry: './lib/extension.js',
             output: {
                 filename: 'extension.js',
                 path: path.resolve(__dirname, '..', '{{ cookiecutter.python_package_name }}', 'nbextension'),
                 libraryTarget: 'amd',
-                publicPath: '' // publicPath is set in extension.js
             },
             devtool
         },
@@ -33,46 +31,42 @@ module.exports = (env, argv) => {
         // This bundle contains the implementation for the custom widget views and
         // custom widget.
         // It must be an amd module
-        //
-            entry: './lib/index.js',
+            entry: ['./amd-public-path.js', './lib/index.js'],
             output: {
                 filename: 'index.js',
                 path: path.resolve(__dirname, '..', '{{ cookiecutter.python_package_name }}', 'nbextension'),
                 libraryTarget: 'amd',
-                publicPath: '',
+                publicPath: '', // Set in amd-public-path.js
             },
             devtool,
             module: {
                 rules: rules
             },
-            externals: ['@jupyter-widgets/base']
+            // 'module' is the magic requirejs dependency used to set the publicPath
+            externals: ['@jupyter-widgets/base', 'module']
         },
         {// Embeddable {{ cookiecutter.npm_package_name }} bundle
         //
-        // This bundle is generally almost identical to the notebook bundle
-        // containing the custom widget views and models.
-        //
-        // The only difference is in the configuration of the webpack public path
-        // for the static assets.
-        //
-        // It will be automatically distributed by unpkg to work with the static
-        // widget embedder.
-        //
-        // The target bundle is always `dist/index.js`, which is the path required
-        // by the custom widget embedder.
+        // This bundle is identical to the notebook bundle containing the custom
+        // widget views and models. The only difference is it is placed in the
+        // dist/ directory and shipped with the npm package for use from a CDN
+        // like jsdelivr.
         //
-            entry: './lib/embed.js',
+        // The target bundle is always `dist/index.js`, which is the path
+        // required by the custom widget embedder.
+            entry: ['./amd-public-path.js', './lib/index.js'],
             output: {
                 filename: 'index.js',
                 path: path.resolve(__dirname, 'dist'),
                 libraryTarget: 'amd',
-                publicPath: 'https://unpkg.com/{{ cookiecutter.npm_package_name }}@' + version + '/dist/'
+                publicPath: '', // Set in amd-public-path.js
             },
             devtool,
             module: {
                 rules: rules
             },
-            externals: ['@jupyter-widgets/base']
+            // 'module' is the magic requirejs dependency used to set the publicPath
+            externals: ['@jupyter-widgets/base', 'module']
         }
     ];
 }