From f440eb9a19c437d2118ec2e6421e1ba4ebc4f56c Mon Sep 17 00:00:00 2001 From: Mike Bender Date: Wed, 3 May 2023 17:10:12 -0400 Subject: [PATCH] feat: Relative links (#1204) - Notebooks work - Links between notebooks work - Deeplinking notebooks works in dev mode with proxy - Does not work in production - would need server to correctly proxy URLs and write the correct document base - Embed-grid works - Embed-chart works - Plugins work - Fixes #1070 - Unit tests and e2e tests pass - Tested in both a dev build, and production build - Tested following steps in #1070 - Tested in DnD, ensured the correct paths were being loaded --- package-lock.json | 25 +++++++++++ packages/app-utils/package.json | 1 + .../src/components/AppBootstrap.test.tsx | 6 +-- .../app-utils/src/components/AppBootstrap.tsx | 9 ++-- .../src/components/AuthBootstrap.tsx | 5 ++- packages/app-utils/tsconfig.json | 3 +- packages/auth-plugins/package.json | 2 +- packages/auth-plugins/src/Login.tsx | 4 +- packages/babel-preset/index.js | 14 ++++-- packages/babel-preset/package.json | 1 + packages/code-studio/.env | 44 ++++++++++++------- packages/code-studio/.env.development | 4 +- packages/code-studio/.env.test | 2 - packages/code-studio/README.md | 8 ---- packages/code-studio/index.html | 1 + packages/code-studio/src/index.tsx | 22 +++++----- packages/code-studio/src/main/AppInit.tsx | 4 +- .../code-studio/src/main/AppMainContainer.tsx | 14 ++++-- packages/code-studio/src/main/AppRouter.tsx | 8 +++- .../code-studio/src/styleguide/index.html | 1 + packages/code-studio/src/styleguide/index.tsx | 12 ++--- packages/code-studio/vite.config.ts | 29 +++++++----- packages/embed-chart/.env | 10 +++-- packages/embed-chart/.env.development | 2 + packages/embed-chart/.env.test | 2 - packages/embed-chart/index.html | 1 + packages/embed-chart/src/index.tsx | 22 +++++----- packages/embed-chart/vite.config.ts | 5 ++- packages/embed-grid/.env | 10 +++-- packages/embed-grid/.env.development | 2 + packages/embed-grid/.env.test | 2 - packages/embed-grid/index.html | 1 + packages/embed-grid/src/index.tsx | 22 +++++----- packages/embed-grid/vite.config.ts | 5 ++- playwright.config.ts | 2 +- 35 files changed, 190 insertions(+), 115 deletions(-) delete mode 100644 packages/code-studio/.env.test delete mode 100644 packages/embed-chart/.env.test delete mode 100644 packages/embed-grid/.env.test diff --git a/package-lock.json b/package-lock.json index 39eedf1763..7f86b2cb37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8054,6 +8054,18 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-transform-import-meta": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-import-meta/-/babel-plugin-transform-import-meta-2.2.0.tgz", + "integrity": "sha512-+DNF2SJAj2Pd0b1sObz+hyzNgUlI9DccPtMcF7ulMM0BxPrMF83ERjvPQwcQ9FRFSddWcC7DOw0FuyWgkQRoqg==", + "dependencies": { + "@babel/template": "^7.4.4", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@babel/core": "^7.10.0" + } + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -25713,6 +25725,7 @@ "@deephaven/jsapi-utils": "file:../jsapi-utils", "@deephaven/log": "file:../log", "@deephaven/react-hooks": "file:../react-hooks", + "@deephaven/utils": "file:../utils", "@paciolan/remote-component": "2.13.0", "@paciolan/remote-module-loader": "^3.0.2", "fira": "mozilla/fira#4.202" @@ -25816,6 +25829,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" } }, @@ -28115,6 +28129,7 @@ "@deephaven/jsapi-utils": "file:../jsapi-utils", "@deephaven/log": "file:../log", "@deephaven/react-hooks": "file:../react-hooks", + "@deephaven/utils": "file:../utils", "@paciolan/remote-component": "2.13.0", "@paciolan/remote-module-loader": "^3.0.2", "fira": "mozilla/fira#4.202", @@ -28151,6 +28166,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" } }, @@ -33203,6 +33219,15 @@ "@babel/helper-define-polyfill-provider": "^0.3.3" } }, + "babel-plugin-transform-import-meta": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/babel-plugin-transform-import-meta/-/babel-plugin-transform-import-meta-2.2.0.tgz", + "integrity": "sha512-+DNF2SJAj2Pd0b1sObz+hyzNgUlI9DccPtMcF7ulMM0BxPrMF83ERjvPQwcQ9FRFSddWcC7DOw0FuyWgkQRoqg==", + "requires": { + "@babel/template": "^7.4.4", + "tslib": "^2.4.0" + } + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", diff --git a/packages/app-utils/package.json b/packages/app-utils/package.json index c67093a05d..018a2d0b18 100644 --- a/packages/app-utils/package.json +++ b/packages/app-utils/package.json @@ -36,6 +36,7 @@ "@deephaven/jsapi-utils": "file:../jsapi-utils", "@deephaven/log": "file:../log", "@deephaven/react-hooks": "file:../react-hooks", + "@deephaven/utils": "file:../utils", "@paciolan/remote-component": "2.13.0", "@paciolan/remote-module-loader": "^3.0.2", "fira": "mozilla/fira#4.202" diff --git a/packages/app-utils/src/components/AppBootstrap.test.tsx b/packages/app-utils/src/components/AppBootstrap.test.tsx index bba6845ca6..af2a460176 100644 --- a/packages/app-utils/src/components/AppBootstrap.test.tsx +++ b/packages/app-utils/src/components/AppBootstrap.test.tsx @@ -45,7 +45,7 @@ function renderComponent(client: CoreClient) { }); return render( - + {mockChild} @@ -59,7 +59,7 @@ beforeEach(() => { it('should throw if api has not been bootstrapped', () => { expect(() => render( - + {mockChild} ) @@ -91,7 +91,7 @@ it('should display an error if no login plugin matches the provided auth handler expect(mockLogin).not.toHaveBeenCalled(); expect( screen.queryByText( - 'Error: No login plugins found, please register a login plugin for auth handlers: MockAuthHandler' + 'No login plugins found, please register a login plugin for auth handlers: MockAuthHandler' ) ).not.toBeNull(); }); diff --git a/packages/app-utils/src/components/AppBootstrap.tsx b/packages/app-utils/src/components/AppBootstrap.tsx index cf8e018ba5..01e4e581ca 100644 --- a/packages/app-utils/src/components/AppBootstrap.tsx +++ b/packages/app-utils/src/components/AppBootstrap.tsx @@ -9,12 +9,12 @@ import FontBootstrap from './FontBootstrap'; import PluginsBootstrap from './PluginsBootstrap'; import AuthBootstrap from './AuthBootstrap'; import ConnectionBootstrap from './ConnectionBootstrap'; -import { getBaseUrl, getConnectOptions } from '../utils'; +import { getConnectOptions } from '../utils'; import FontsLoaded from './FontsLoaded'; export type AppBootstrapProps = { - /** URL of the API to load. */ - apiUrl: string; + /** URL of the server. */ + serverUrl: string; /** URL of the plugins to load. */ pluginsUrl: string; @@ -33,12 +33,11 @@ export type AppBootstrapProps = { * Will display the children when everything is loaded and authenticated. */ export function AppBootstrap({ - apiUrl, fontClassNames, pluginsUrl, + serverUrl, children, }: AppBootstrapProps) { - const serverUrl = getBaseUrl(apiUrl).origin; const clientOptions = useMemo(() => getConnectOptions(), []); // On logout, we reset the client and have user login again diff --git a/packages/app-utils/src/components/AuthBootstrap.tsx b/packages/app-utils/src/components/AuthBootstrap.tsx index 13326bb646..d8558c5961 100644 --- a/packages/app-utils/src/components/AuthBootstrap.tsx +++ b/packages/app-utils/src/components/AuthBootstrap.tsx @@ -7,6 +7,7 @@ import { } from '@deephaven/auth-plugins'; import { LoadingOverlay } from '@deephaven/components'; import { useClient } from '@deephaven/jsapi-bootstrap'; +import { getErrorMessage } from '@deephaven/utils'; import { PluginsContext } from './PluginsBootstrap'; import { getAuthPluginComponent } from '../plugins'; import LoginNotifier from './LoginNotifier'; @@ -76,8 +77,8 @@ export function AuthBootstrap({ children }: AuthBootstrapProps) { if (isLoading || error != null) { return ( ); } diff --git a/packages/app-utils/tsconfig.json b/packages/app-utils/tsconfig.json index e1961c09f0..fe6ee16bb4 100644 --- a/packages/app-utils/tsconfig.json +++ b/packages/app-utils/tsconfig.json @@ -14,6 +14,7 @@ { "path": "../jsapi-types" }, { "path": "../jsapi-utils" }, { "path": "../log" }, - { "path": "../react-hooks" } + { "path": "../react-hooks" }, + { "path": "../utils" } ] } diff --git a/packages/auth-plugins/package.json b/packages/auth-plugins/package.json index 0c16087089..03198c8e7b 100644 --- a/packages/auth-plugins/package.json +++ b/packages/auth-plugins/package.json @@ -39,8 +39,8 @@ "@deephaven/jsapi-types": "file:../jsapi-types", "@deephaven/jsapi-utils": "file:../jsapi-utils", "@deephaven/log": "file:../log", - "@deephaven/utils": "file:../utils", "@deephaven/redux": "file:../redux", + "@deephaven/utils": "file:../utils", "classnames": "^2.3.1", "react-transition-group": "^4.4.2", "js-cookie": "^3.0.5" diff --git a/packages/auth-plugins/src/Login.tsx b/packages/auth-plugins/src/Login.tsx index e1844d46ff..8e5782ae8b 100644 --- a/packages/auth-plugins/src/Login.tsx +++ b/packages/auth-plugins/src/Login.tsx @@ -6,11 +6,11 @@ interface LoginProps { /** What to show in the login input part of the login form. */ children: React.ReactNode; - /** Path to the logo. Defaults to `/logo.png` */ + /** Path to the custom logo, relative to document base */ logoPath?: string; } -export function Login({ children, logoPath = '/logo.png' }: LoginProps) { +export function Login({ children, logoPath = './logo.png' }: LoginProps) { return (
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,