Add support for devserver --back-end option.

collectionspace · Apr 19, 2024 · 2b0aef5 · 2b0aef5
1 parent c20971f
commit 2b0aef5
Show file tree

Hide file tree

Showing 4 changed files with 350 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -19,24 +19,23 @@ $ cd cspace-ui-plugin-profile-anthro.js
 $ npm install
 ```
 
-To run the cspace-ui application configured with this plugin:
+To run the cspace-ui application configured with this plugin in development, using a remote
+back-end CollectionSpace server:
 
 ```
-$ npm run devserver
+$ npm run devserver --back-end=https://anthro.dev.collectionspace.org
 ```
 
 Then open a browser to http://localhost:8080.
 
-By default, the application served from the dev server will use the CollectionSpace services API
-located at http://localhost:8180.
-
-To run the application against CollectionSpace services located on a different host, edit
-index.html, and change the `serverUrl` configuration property. For example, to use a server running
-on nightly.collectionspace.org, port 8180, use the settings:
+Alternatively, to run the cspace-ui application configured with this plugin in development, using
+the UI configuration in index.html:
 
 ```
-cspaceUI({
-  serverUrl: 'http://nightly.collectionspace.org:8180',
-  // ...
-});
+$ npm run devserver
 ```
+
+By default, the configuration in index.html uses the CollectionSpace services API located at
+http://localhost:8180. To run the application against CollectionSpace services located on a
+different host, edit index.html, and change the `serverUrl` configuration property. Note that the
+specified server must be configured to allow CORS requests from http://localhost:8080.
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
     This bundle is served from the URL /cspaceUIPluginProfileAnthro.js, but it does not exist in
     the filesystem.
   -->
-  <script src="/cspaceUIPluginProfileAnthro.js"></script>
+  <script src="/webpack-dev-assets/cspaceUIPluginProfileAnthro.js"></script>
 </head>
 <body>
   <div id="cspace"></div>

diff --git a/webpack.config.js b/webpack.config.js
@@ -4,6 +4,14 @@
 const { execSync } = require('child_process');
 const path = require('path');
 const webpack = require('webpack');
+const webpackDevServerConfig = require('./webpackDevServerConfig');
+
+/**
+ * The public path to local webpack assets. This is chosen to have low chance of collision with any
+ * path on a proxied back-end (e.g., "/cspace/core" or "/cspace-services"). This should start and
+ * end with slashes.
+ */
+const publicPath = '/webpack-dev-assets/';
 
 const library = 'cspaceUIPluginProfileAnthro';
 const isProduction = process.env.NODE_ENV === 'production';
@@ -24,7 +32,7 @@ try {
   console.log('Failed to get repository url from npm: %s', err.stderr.toString());
 }
 
-const config = {
+module.exports = async () => ({
   mode: isProduction ? 'production' : 'development',
   entry: './src/index.js',
   output: {
@@ -33,6 +41,7 @@ const config = {
     libraryTarget: 'umd',
     libraryExport: 'default',
     path: path.resolve(__dirname, 'dist'),
+    publicPath,
   },
   module: {
     rules: [
@@ -87,12 +96,10 @@ const config = {
   resolve: {
     extensions: ['.js', '.jsx'],
   },
-  devServer: {
-    historyApiFallback: true,
-    static: {
-      directory: __dirname,
-    },
-  },
-};
-
-module.exports = config;
+  devServer: await webpackDevServerConfig({
+    library,
+    localIndex: process.env.npm_config_local_index,
+    proxyTarget: process.env.npm_config_back_end,
+    publicPath,
+  }),
+});