diff --git a/packages/babel-preset/index.js b/packages/babel-preset/index.js
index a00c3f461a..480b7fe2a3 100644
--- a/packages/babel-preset/index.js
+++ b/packages/babel-preset/index.js
@@ -22,13 +22,21 @@ module.exports = api => ({
plugins: [
api.env('test')
? [
- // This is needed to replace import.meta w/ process in Jest
+ // This is needed to replace import.meta.env w/ process in Jest
// Jest does not play nicely w/ ESM and Vite uses import.meta
// import.meta is only avaialable in ESM
path.resolve(__dirname, 'importMetaEnvPlugin'),
]
- : // The add-import-extension plugin causes Jest to error, but is needed for proper ESM builds
- ['babel-plugin-add-import-extension'],
+ : false,
+ api.env('test')
+ ? [
+ // Also need to handle import.meta.url
+ 'babel-plugin-transform-import-meta',
+ ]
+ : false,
+ api.env('test')
+ ? false // The add-import-extension plugin causes Jest to error, but is needed for proper ESM builds
+ : ['babel-plugin-add-import-extension'],
[
'transform-rename-import',
{
diff --git a/packages/babel-preset/package.json b/packages/babel-preset/package.json
index fcf529214c..d99ff1eda5 100644
--- a/packages/babel-preset/package.json
+++ b/packages/babel-preset/package.json
@@ -17,6 +17,7 @@
"@babel/preset-react": "^7.18.0",
"@babel/preset-typescript": "^7.18.0",
"babel-plugin-add-import-extension": "^1.6.0",
+ "babel-plugin-transform-import-meta": "^2.2.0",
"babel-plugin-transform-rename-import": "^2.3.0"
},
"publishConfig": {
diff --git a/packages/code-studio/.env b/packages/code-studio/.env
index abb75f3905..ec2f12c62c 100644
--- a/packages/code-studio/.env
+++ b/packages/code-studio/.env
@@ -1,24 +1,34 @@
-# Location of the iris script and API server
-# Set this value to __mocks__ to use mock server instead
-BASE_URL=/ide/
-VITE_CORE_API_URL=/jsapi
+# Path at which the app is served
+# https://vitejs.dev/guide/build.html#public-base-path
+BASE_URL=./
+
+# Location of the core JS API and API server
+# We assume that the jsapi is served up as a sibling of the code studio
+# I.e. Web UI served at http://www.example.com/ide/, then JS API served at http://www.example.com/jsapi/
+# This path is relative to the base URL, so we need to go up one level
+VITE_CORE_API_URL=../jsapi
VITE_CORE_API_NAME=dh-core.js
-VITE_PLUGIN_URL=/ide/plugins/
+
+# Path to plugins that load a module
+# See https://github.com/deephaven/deephaven-js-plugin-template/
+# Like the CORE_API_URL, we assume this is served up as a sibling of the code studio
+VITE_MODULE_PLUGINS_URL=../js-plugins
+
+# Path for notebooks and layouts storage on the gRPCStorageService
+# Note these are not URLs, these are file system paths on the server in the gRPCStorageService
+VITE_STORAGE_PATH_NOTEBOOKS=/notebooks
+VITE_STORAGE_PATH_LAYOUTS=/layouts
+
+# Any routes we define here
+VITE_ROUTE_NOTEBOOKS=notebooks/
+
+# Proxy used by Vite
VITE_PROXY_URL=http://localhost:10000
-VITE_NOTEBOOKS_URL=/notebooks
-VITE_LAYOUTS_URL=/layouts
-VITE_ENABLE_LOG_PROXY=true
VITE_SUPPORT_LINK=https://github.com/deephaven/web-client-ui/
VITE_DOCS_LINK=https://deephaven.io/core/docs/
VITE_FAVICON=/favicon-cc-app.svg
VITE_BUILD_PATH=./build
-VITE_LOG_LEVEL=2
-# Plugin URLs
-## Path to plugins that load/render as a component (e.g. Table plugins)
-## See https://github.com/deephaven/js-plugin-template/ for templates
-VITE_COMPONENT_PLUGINS_URL=/ide/plugins/
-
-## Path to plugins that load a module
-## See https://github.com/deephaven/deephaven-js-plugin-template/
-VITE_MODULE_PLUGINS_URL=/js-plugins
+# Proxy the log service to store logs to export easily for support
+VITE_ENABLE_LOG_PROXY=true
+VITE_LOG_LEVEL=2
\ No newline at end of file
diff --git a/packages/code-studio/.env.development b/packages/code-studio/.env.development
index 8d5dfd8fbc..93b082a474 100644
--- a/packages/code-studio/.env.development
+++ b/packages/code-studio/.env.development
@@ -1,6 +1,6 @@
+BASE_URL=/ide/
+VITE_LOG_LEVEL=4
VITE_ENABLE_LOG_PROXY=false
VITE_FAVICON=/favicon-cc-app-dev.svg
-BASE_URL=/
PORT=4000
-VITE_LOG_LEVEL=4
diff --git a/packages/code-studio/.env.test b/packages/code-studio/.env.test
deleted file mode 100644
index 30801e46ff..0000000000
--- a/packages/code-studio/.env.test
+++ /dev/null
@@ -1,2 +0,0 @@
-# For unit tests, need to use the mock server.
-VITE_CORE_API_URL=__mocks__
diff --git a/packages/code-studio/README.md b/packages/code-studio/README.md
index 9b898f19ed..b94b780796 100644
--- a/packages/code-studio/README.md
+++ b/packages/code-studio/README.md
@@ -22,14 +22,6 @@ One common setup is to override the API server URL to point to another server. F
VITE_CORE_API_URL=https://www.myserver.com/jsapi
```
-### VITE_NOTEBOOKS_URL
-
-One common setup is to override the API server URL to point to another server. For example, add the following block to `.env.development.local` to have `npm start` point to a remote server for the API:
-
-```shell
-VITE_CORE_API_URL=https://www.myserver.com/notebooks
-```
-
### VITE_LOG_LEVEL
Printing detailed logs when debugging can be handy. The highest level of logging is already set in your `.env.development` file. You can change it in `.env.development.local` if desired.
diff --git a/packages/code-studio/index.html b/packages/code-studio/index.html
index 8fb801d0da..f914ca7b3e 100644
--- a/packages/code-studio/index.html
+++ b/packages/code-studio/index.html
@@ -1,6 +1,7 @@
+
{
return { default: module.AppBootstrap };
});
+const apiURL = new URL(
+ `${import.meta.env.VITE_CORE_API_URL}/${import.meta.env.VITE_CORE_API_NAME}`,
+ document.baseURI
+);
+
+const pluginsURL = new URL(
+ import.meta.env.VITE_MODULE_PLUGINS_URL,
+ document.baseURI
+);
+
ReactDOM.render(
-
+
}>
-
+
diff --git a/packages/code-studio/src/main/AppInit.tsx b/packages/code-studio/src/main/AppInit.tsx
index 7453f2d97d..60f795d517 100644
--- a/packages/code-studio/src/main/AppInit.tsx
+++ b/packages/code-studio/src/main/AppInit.tsx
@@ -129,11 +129,11 @@ function AppInit(props: AppInitProps) {
const storageService = client.getStorageService();
const layoutStorage = new GrpcLayoutStorage(
storageService,
- import.meta.env.VITE_LAYOUTS_URL ?? ''
+ import.meta.env.VITE_STORAGE_PATH_LAYOUTS ?? ''
);
const fileStorage = new GrpcFileStorage(
storageService,
- import.meta.env.VITE_NOTEBOOKS_URL ?? ''
+ import.meta.env.VITE_STORAGE_PATH_NOTEBOOKS ?? ''
);
const workspaceStorage = new LocalWorkspaceStorage(layoutStorage);
diff --git a/packages/code-studio/src/main/AppMainContainer.tsx b/packages/code-studio/src/main/AppMainContainer.tsx
index 3fc89f9af3..3489173c11 100644
--- a/packages/code-studio/src/main/AppMainContainer.tsx
+++ b/packages/code-studio/src/main/AppMainContainer.tsx
@@ -76,7 +76,6 @@ import dh, {
} from '@deephaven/jsapi-shim';
import { SessionConfig } from '@deephaven/jsapi-utils';
import Log from '@deephaven/log';
-import { getBaseUrl, loadComponentPlugin } from '@deephaven/app-utils';
import {
getActiveTool,
getWorkspace,
@@ -653,8 +652,12 @@ export class AppMainContainer extends Component<
TablePlugin: ForwardRefExoticComponent>;
}).TablePlugin;
}
- const baseURL = getBaseUrl(import.meta.env.VITE_COMPONENT_PLUGINS_URL);
- return loadComponentPlugin(baseURL, pluginName);
+
+ const errorMessage = `Unable to find table plugin ${pluginName}.`;
+ log.error(errorMessage);
+ return ((
+ {`${errorMessage}`}
+ ) as unknown) as ForwardRefExoticComponent>;
}
startListeningForDisconnect() {
@@ -912,7 +915,10 @@ export class AppMainContainer extends Component<
diff --git a/packages/code-studio/src/main/AppRouter.tsx b/packages/code-studio/src/main/AppRouter.tsx
index 9d69fb38c3..7b513b319c 100644
--- a/packages/code-studio/src/main/AppRouter.tsx
+++ b/packages/code-studio/src/main/AppRouter.tsx
@@ -7,12 +7,16 @@ import {
} from 'react-router-dom';
import AppInit from './AppInit';
+const basename = document.location.pathname;
function AppRouter(): ReactElement {
return (
-
+
-
+
diff --git a/packages/code-studio/src/styleguide/index.html b/packages/code-studio/src/styleguide/index.html
index f61ffd5474..9d90ebccf5 100644
--- a/packages/code-studio/src/styleguide/index.html
+++ b/packages/code-studio/src/styleguide/index.html
@@ -1,6 +1,7 @@
+
{
return { default: module.FontBootstrap };
});
+const apiURL = new URL(
+ `${import.meta.env.VITE_CORE_API_URL}/${import.meta.env.VITE_CORE_API_NAME}`,
+ document.baseURI
+);
+
ReactDOM.render(
-
+
}>
diff --git a/packages/code-studio/vite.config.ts b/packages/code-studio/vite.config.ts
index 344e38fb60..b376c8996d 100644
--- a/packages/code-studio/vite.config.ts
+++ b/packages/code-studio/vite.config.ts
@@ -26,13 +26,14 @@ export default defineConfig(({ mode }) => {
port = 4000;
}
+ const baseURL = new URL(env.BASE_URL, `http://localhost:${port}/`);
// These are paths which should be proxied to the core server
// https://vitejs.dev/config/server-options.html#server-proxy
const proxy = {
// Proxy styleguide here instead of as a route in our app router
// That way, it is not included in the production build
'/styleguide': {
- target: `http://localhost:${port}/src/styleguide/index.html`,
+ target: new URL(`src/styleguide/index.html`, baseURL).toString(),
rewrite: () => '',
},
@@ -49,21 +50,27 @@ export default defineConfig(({ mode }) => {
},
};
- // Some paths need to proxy to the engine server
- // Vite does not have a "any unknown fallback to proxy" like CRA
- // It is possible to add one with a custom middleware though if this list grows
if (env.VITE_PROXY_URL) {
- [
- env.VITE_CORE_API_URL,
- env.VITE_NOTEBOOKS_URL,
- env.VITE_LAYOUTS_URL,
- env.VITE_MODULE_PLUGINS_URL,
- ].forEach(p => {
- proxy[p] = {
+ // Some paths need to proxy to the engine server
+ // Vite does not have a "any unknown fallback to proxy" like CRA
+ // It is possible to add one with a custom middleware though if this list grows
+ [env.VITE_CORE_API_URL, env.VITE_MODULE_PLUGINS_URL].forEach(p => {
+ const route = new URL(p, baseURL).pathname;
+ proxy[route] = {
target: env.VITE_PROXY_URL,
changeOrigin: true,
};
});
+
+ // Proxy deep-linking routes to the base itself
+ // Need to add for each deep-linking route
+ [env.VITE_ROUTE_NOTEBOOKS].forEach(p => {
+ const route = new URL(p, baseURL).pathname;
+ proxy[`^${route}`] = {
+ target: baseURL.toString(),
+ rewrite: () => '',
+ };
+ });
}
return {
diff --git a/packages/embed-chart/.env b/packages/embed-chart/.env
index a99529c1f9..9f830f9456 100644
--- a/packages/embed-chart/.env
+++ b/packages/embed-chart/.env
@@ -1,8 +1,10 @@
# See the values in [code sudio](../code-studio/.env) for more details
-VITE_CORE_API_URL=/jsapi
+BASE_URL=./
+# We assume embed-chart is served at a nested path, e.g. '/iframe/chart'
+VITE_CORE_API_URL=../../jsapi
+VITE_MODULE_PLUGINS_URL=/js-plugins
VITE_CORE_API_NAME=dh-core.js
VITE_BUILD_PATH=./build
VITE_LOG_LEVEL=2
-VITE_FAVICON=./favicon-cc-app.svg
-VITE_PROXY_URL=http://localhost:10000
-VITE_MODULE_PLUGINS_URL=/js-plugins
\ No newline at end of file
+VITE_FAVICON=/favicon-cc-app.svg
+VITE_PROXY_URL=http://localhost:10000
\ No newline at end of file
diff --git a/packages/embed-chart/.env.development b/packages/embed-chart/.env.development
index b9d0bee432..6d0b88397b 100644
--- a/packages/embed-chart/.env.development
+++ b/packages/embed-chart/.env.development
@@ -1,4 +1,6 @@
+BASE_URL=/iframe/chart/
VITE_LOG_LEVEL=4
+VITE_ENABLE_LOG_PROXY=false
VITE_FAVICON=./favicon-cc-app-dev.svg
# 4020 So not to conflict with code-studio
diff --git a/packages/embed-chart/.env.test b/packages/embed-chart/.env.test
deleted file mode 100644
index 30801e46ff..0000000000
--- a/packages/embed-chart/.env.test
+++ /dev/null
@@ -1,2 +0,0 @@
-# For unit tests, need to use the mock server.
-VITE_CORE_API_URL=__mocks__
diff --git a/packages/embed-chart/index.html b/packages/embed-chart/index.html
index 89714a3f99..e8d9874566 100644
--- a/packages/embed-chart/index.html
+++ b/packages/embed-chart/index.html
@@ -1,6 +1,7 @@
+
{
return { default: module.AppBootstrap };
});
+const apiURL = new URL(
+ `${import.meta.env.VITE_CORE_API_URL}/${import.meta.env.VITE_CORE_API_NAME}`,
+ document.baseURI
+);
+
+const pluginsURL = new URL(
+ import.meta.env.VITE_MODULE_PLUGINS_URL,
+ document.baseURI
+);
+
ReactDOM.render(
-
+
}>
-
+
diff --git a/packages/embed-chart/vite.config.ts b/packages/embed-chart/vite.config.ts
index b9d011faaf..302f930f19 100644
--- a/packages/embed-chart/vite.config.ts
+++ b/packages/embed-chart/vite.config.ts
@@ -42,7 +42,10 @@ export default defineConfig(({ mode }) => {
// Vite does not have a "any unknown fallback to proxy" like CRA
// It is possible to add one with a custom middleware though if this list grows
if (env.VITE_PROXY_URL) {
- [env.VITE_CORE_API_URL, env.VITE_MODULE_PLUGINS_URL].forEach(p => {
+ [
+ path.resolve(env.BASE_URL, env.VITE_CORE_API_URL),
+ path.resolve(env.BASE_URL, env.VITE_MODULE_PLUGINS_URL),
+ ].forEach(p => {
proxy[p] = {
target: env.VITE_PROXY_URL,
changeOrigin: true,
diff --git a/packages/embed-grid/.env b/packages/embed-grid/.env
index a99529c1f9..b4abd6178e 100644
--- a/packages/embed-grid/.env
+++ b/packages/embed-grid/.env
@@ -1,8 +1,12 @@
# See the values in [code sudio](../code-studio/.env) for more details
-VITE_CORE_API_URL=/jsapi
+BASE_URL=./
+
+# We assume embed-grid is served at nested path, e.g. '/iframe/grid'
+VITE_CORE_API_URL=../../jsapi
+VITE_MODULE_PLUGINS_URL=../../js-plugins
+
VITE_CORE_API_NAME=dh-core.js
VITE_BUILD_PATH=./build
VITE_LOG_LEVEL=2
VITE_FAVICON=./favicon-cc-app.svg
-VITE_PROXY_URL=http://localhost:10000
-VITE_MODULE_PLUGINS_URL=/js-plugins
\ No newline at end of file
+VITE_PROXY_URL=http://localhost:10000
\ No newline at end of file
diff --git a/packages/embed-grid/.env.development b/packages/embed-grid/.env.development
index d555e97cda..60ef620ee8 100644
--- a/packages/embed-grid/.env.development
+++ b/packages/embed-grid/.env.development
@@ -1,4 +1,6 @@
+BASE_URL=/iframe/table/
VITE_LOG_LEVEL=4
+VITE_ENABLE_LOG_PROXY=false
VITE_FAVICON=./favicon-cc-app-dev.svg
# 4010 So not to conflict with code-studio
diff --git a/packages/embed-grid/.env.test b/packages/embed-grid/.env.test
deleted file mode 100644
index 30801e46ff..0000000000
--- a/packages/embed-grid/.env.test
+++ /dev/null
@@ -1,2 +0,0 @@
-# For unit tests, need to use the mock server.
-VITE_CORE_API_URL=__mocks__
diff --git a/packages/embed-grid/index.html b/packages/embed-grid/index.html
index 63e32e4e15..e482d12c63 100644
--- a/packages/embed-grid/index.html
+++ b/packages/embed-grid/index.html
@@ -1,6 +1,7 @@
+
{
return { default: module.AppBootstrap };
});
+const apiURL = new URL(
+ `${import.meta.env.VITE_CORE_API_URL}/${import.meta.env.VITE_CORE_API_NAME}`,
+ document.baseURI
+);
+
+const pluginsURL = new URL(
+ import.meta.env.VITE_MODULE_PLUGINS_URL,
+ document.baseURI
+);
+
ReactDOM.render(
-
+
}>
-
+
diff --git a/packages/embed-grid/vite.config.ts b/packages/embed-grid/vite.config.ts
index 02ff2355da..6aa6e9b565 100644
--- a/packages/embed-grid/vite.config.ts
+++ b/packages/embed-grid/vite.config.ts
@@ -42,7 +42,10 @@ export default defineConfig(({ mode }) => {
// Vite does not have a "any unknown fallback to proxy" like CRA
// It is possible to add one with a custom middleware though if this list grows
if (env.VITE_PROXY_URL) {
- [env.VITE_CORE_API_URL, env.VITE_MODULE_PLUGINS_URL].forEach(p => {
+ [
+ path.resolve(env.BASE_URL, env.VITE_CORE_API_URL),
+ path.resolve(env.BASE_URL, env.VITE_MODULE_PLUGINS_URL),
+ ].forEach(p => {
proxy[p] = {
target: env.VITE_PROXY_URL,
changeOrigin: true,
diff --git a/playwright.config.ts b/playwright.config.ts
index 6fb52185e5..fe811cfd27 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -110,7 +110,7 @@ const config: PlaywrightTestConfig = {
webServer: {
// Only start the main code-studio server right now
// To test embed-grid and embed-chart, should have an array set for `webServer` and run them all separately as there's a port check
- command: 'npm run preview:app -- -- -- --no-open', // Passing flags through npm is fun
+ command: 'BASE_URL=/ide/ npm run preview:app -- -- -- --no-open', // Passing flags through npm is fun
port: 4000,
timeout: 60 * 1000,
reuseExistingServer: !process.env.CI,