Relative paths for assets, playground requests and fonts (#9850)

Co-authored-by: Daniel Costa <[email protected]>
Co-authored-by: Andrey Yamanov <[email protected]>

Author: 3 people

packages/cubejs-playground/src/App.tsx

@@ -63,7 +63,7 @@ class App extends Component<PropsWithChildren<RouteComponentProps>, AppState> {
       });
     });
 
-    const res = await fetch('/playground/context');
+    const res = await fetch('playground/context');
     const context = await res.json();
 
     setTelemetry(context.telemetry);
@@ -112,7 +112,7 @@ class App extends Component<PropsWithChildren<RouteComponentProps>, AppState> {
       <LivePreviewContextProvider
         disabled={!context?.livePreview}
       >
-        <Root styles={ROOT_STYLES}>
+        <Root publicUrl="." styles={ROOT_STYLES}>
           <GlobalStyles />
 
           <Header selectedKeys={[location.pathname]} />

packages/cubejs-playground/src/components/LivePreviewContext/LivePreviewContextProvider.tsx

@@ -70,7 +70,7 @@ const useLivePreview = (disabled = false) => {
   // }, [status]);
 
   const fetchStatus = () => {
-    return fetch('/playground/live-preview/status')
+    return fetch('playground/live-preview/status')
       .then((res) => res.json())
       .then((status) => {
         setStatus({
@@ -81,7 +81,7 @@ const useLivePreview = (disabled = false) => {
   };
 
   const createTokenWithPayload = async (payload): Promise<any> => {
-    const res = await fetch('/playground/live-preview/token', {
+    const res = await fetch('playground/live-preview/token', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -108,7 +108,7 @@ const useLivePreview = (disabled = false) => {
     statusLivePreview: status,
     createTokenWithPayload,
     stopLivePreview: async (): Promise<Boolean> => {
-      await fetch('/playground/live-preview/stop');
+      await fetch('playground/live-preview/stop');
       await fetchStatus();
       return true;
     },

packages/cubejs-playground/src/index.tsx

@@ -26,7 +26,7 @@ async function onTokenPayloadChange(payload: Record<string, any>, token) {
     return token;
   }
 
-  const response = await fetch('/playground/token', {
+  const response = await fetch('playground/token', {
     method: 'post',
     headers: {
       'Content-Type': 'application/json',

packages/cubejs-playground/src/pages/ConnectionWizard/ConnectionWizardPage.tsx

@@ -63,7 +63,7 @@ async function testConnection(variables: Record<string, string>) {
 }
 
 async function saveConnection(variables: Record<string, string>) {
-  await fetch('/playground/env', {
+  await fetch('playground/env', {
     method: 'post',
     headers: {
       'Content-Type': 'application/json',
@@ -174,7 +174,7 @@ export function ConnectionWizardPage({ history }) {
       }
 
       {
-        const response = await fetch('/playground/driver', {
+        const response = await fetch('playground/driver', {
           method: 'post',
           headers: {
             'Content-Type': 'application/json',

packages/cubejs-playground/src/pages/Index/IndexPage.tsx

@@ -12,7 +12,7 @@ export function IndexPage() {
 
   useEffect(() => {
     async function loadFiles() {
-      const res = await fetch('/playground/files');
+      const res = await fetch('playground/files');
       const result = await res.json();
 
       if (result.error?.includes('Model files not found')) {

packages/cubejs-playground/src/pages/Schema/SchemaPage.tsx

@@ -78,7 +78,7 @@ export class SchemaPage extends Component<SchemaPageProps, any> {
   async loadDBSchema() {
     this.setState({ schemaLoading: true });
     try {
-      const res = await playgroundFetch('/playground/db-schema');
+      const res = await playgroundFetch('playground/db-schema');
       const result = await res.json();
       this.setState({
         tablesSchema: result.tablesSchema,
@@ -91,7 +91,7 @@ export class SchemaPage extends Component<SchemaPageProps, any> {
   }
 
   async loadFiles() {
-    const res = await playgroundFetch('/playground/files');
+    const res = await playgroundFetch('playground/files');
     const result = await res.json();
     this.setState({
       files: result.files,
@@ -106,7 +106,7 @@ export class SchemaPage extends Component<SchemaPageProps, any> {
     const options = { format };
 
     playgroundAction('Generate Schema', options);
-    const res = await playgroundFetch('/playground/generate-schema', {
+    const res = await playgroundFetch('playground/generate-schema', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

packages/cubejs-playground/vite.config.ts

@@ -4,6 +4,7 @@ import react from '@vitejs/plugin-react';
 import environmentPlugin from 'vite-plugin-environment';
 
 export default defineConfig(({ mode }) => ({
+  base: './',
   build: {
     outDir: 'build',
     target: 'es2018',