Skip to content

Conversation

benswinburne
Copy link

@benswinburne benswinburne commented Feb 26, 2024

When attempting to run Cube behind a reverse proxy, it is only possible to set the base path for the API endpoints of Cube. This renders the playground unusable inside a non root base path.

For example when using /cube as a base path behind a reverse proxy, I can get the index.html to load, from /cube/index.html but then requests for assets are made to /some-asset.js instead of /cube/some-asset.js

Check List

  • Tests has been run in packages where changes made if available
  • Linter has been run for changed code
  • Tests for the changes have been added if not covered yet
  • Docs have been added / updated if required

Description of Changes Made (if issue reference is not provided)

Changes the path of bundled assets from absolute to relative.

For example

<script type="module" crossorigin src="/assets/index-4bed1a0c.js"></script>

Becomes

<script type="module" crossorigin src="./assets/index-4bed1a0c.js"></script>

This allows Cube playground to be run inside a subdirectory (behind a reverse proxy, for example).

Adding base: './' to the Vite config is the only change required for this.

https://vitejs.dev/config/shared-options.html#base

As you can see in the docs, it's suggested for "embedded" applications, which I suppose encompasses those bundled in containers such as Cube's playground.

In terms of backwards compatibility, it should be fine as currently you must run it on the root path, so applications running on the root path will go from /asset... to ./asset... which resolves to /asset....

Running yarn build in the packages/cubejs-playground directory yields the following

diff --git a/build/index.html b/index-built.html
index 3b100ab4e..07b9dd75b 100644
--- a/build/index.html
+++ b/relative-build/index.html
@@ -2,17 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
+    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
+    <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16">
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-    <link rel="stylesheet" href="/antd.min.css">
+    <link rel="stylesheet" href="./antd.min.css">
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="./manifest.json" />
     <style>
       #playground-root {
         height: 100%;
@@ -23,8 +23,8 @@
       }
     </style>
     <title>Cube Playground</title>
-    <script type="module" crossorigin src="/assets/index-1693b579.js"></script>
-    <link rel="stylesheet" href="/assets/index-af3b87a2.css">
+    <script type="module" crossorigin src="./assets/index-29693369.js"></script>
+    <link rel="stylesheet" href="./assets/index-af3b87a2.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

@benswinburne benswinburne requested a review from a team as a code owner February 26, 2024 19:13
Copy link

vercel bot commented Feb 26, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
examples-angular-dashboard 🔄 Building (Inspect) Visit Preview 💬 Add feedback Feb 26, 2024 7:14pm
7 Ignored Deployments
Name Status Preview Comments Updated (UTC)
examples-react-d3 ⬜️ Ignored (Inspect) Visit Preview Feb 26, 2024 7:14pm
examples-react-dashboard ⬜️ Ignored (Inspect) Visit Preview Feb 26, 2024 7:14pm
examples-react-data-table ⬜️ Ignored (Inspect) Visit Preview Feb 26, 2024 7:14pm
examples-react-highcharts ⬜️ Ignored (Inspect) Feb 26, 2024 7:14pm
examples-react-material-ui ⬜️ Ignored (Inspect) Visit Preview Feb 26, 2024 7:14pm
examples-react-pivot-table ⬜️ Ignored (Inspect) Visit Preview Feb 26, 2024 7:14pm
examples-vue-query-builder ⬜️ Ignored (Inspect) Visit Preview Feb 26, 2024 7:14pm

@github-actions github-actions bot added the pr:community Contribution from Cube.js community members. label Feb 26, 2024
@jpsfs
Copy link

jpsfs commented Jul 29, 2025

@vasilev-alex are you open to merge this PR or receive a PR that achieves a similar outcome?
Hosting cube-js in a sub-directory would be great!

@jpsfs
Copy link

jpsfs commented Jul 29, 2025

This would close #3028 and #7969
cc: @igorlukanin

@dacosta444
Copy link
Contributor

The work done on this pull request is a great step but there are still things missing for full reverse proxy support.
Right now, requests to the Playground and Cube.js fonts still use absolute paths, so they won't work properly when playground is served behind a proxy with a base path.

I ran into the same issue and put together a fix in #9850 — it updates the paths to resolve relative to the base URL so everything works behind a proxy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr:community Contribution from Cube.js community members.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants