SQLMesh UI: Make UI working with VS Code Server #3955
Description
Background
In our team, we use SQLMesh with VS Code Server (please find below the Dockerfile to run the VS Code Server locally in case you want to re-produce the issue)
Dockerfile
FROM codercom/code-server:4.97.2-ubuntu
WORKDIR /app
USER root
SHELL ["/bin/bash", "-c"]
# Install dependencies
RUN apt-get update \
&& ln -fs /usr/share/zoneinfo/UTC /etc/localtime \
&& DEBIAN_FRONTEND=noninteractive apt-get install -y -qq software-properties-common
RUN apt-get install -y --no-install-recommends \
openssl \
libssl-dev \
build-essential \
git \
curl \
wget \
unixodbc-dev \
unixodbc \
g++ \
gnupg2 \
postgresql-client \
&& sudo rm -rf /var/lib/apt/lists/*
# Add the deadsnakes PPA for Python 3.10
RUN add-apt-repository ppa:deadsnakes/ppa -y \
&& apt-get update \
&& apt-get install -y --no-install-recommends \
python3.10 python3.10-dev python3.10-venv \
&& rm -rf /var/lib/apt/lists/*
RUN python3.10 -m ensurepip --upgrade \
&& python3.10 -m pip install --no-cache-dir --upgrade pip setuptools wheel
RUN rm -f /usr/bin/python3 \
&& ln -sf /usr/bin/python3.10 /usr/bin/python \
&& ln -sf /usr/bin/python3.10 /usr/bin/python3
# Upgrade pip from PyPI to avoid conflicts
RUN python3 -m pip install --upgrade pip setuptools wheel
# Install SQLMesh
RUN python3 -m pip install sqlmesh sqlmesh[trino] sqlmesh[web]
USER coder
# Install code-server extensions
RUN code-server --install-extension ms-python.python \
&& code-server --install-extension mtxr.sqltools \
&& code-server --install-extension mtxr.sqltools-driver-pg \
&& code-server --install-extension charliermarsh.ruff
EXPOSE 8443
ENTRYPOINT ["code-server", "--bind-addr", "0.0.0.0:8443"]UI experience
When running the SQLMesh UI with the following command sqlmesh ui, the VS Code Server allows you to open the UI in a new browser tab (see https://code.visualstudio.com/docs/editor/port-forwarding) at the /proxy/8000/. See image below
Problem statement
When opening the UI in the browser at the https://my-url/proxy/8000/ endpoint, it appears to be blank and the browser console contains a bunch of errors due to not being able to import the assets (favicon, css, js, and fonts)
Failed to load resource: the server responded with a status of 404 (Not Found)
/fonts/Inter/static/Inter-Light.ttf:1
Failed to load resource: the server responded with a status of 404 (Not Found)
/fonts/Inter/static/Inter-Regular.ttf:1
...
Failing workaround
I tried to manually edit the index.html file located in /home/coder/.local/lib/python3.10/site-packages/web/client/dist (collapse the Modified index.html) to make the assets (favicon, css, js, and fonts) point to /proxy/8000 prefix, however, the UI still does not work. The UI page now shows "Empty" (as in the image below) and I fear the Python server is not receiving requests.
Modified index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>SQLMesh by Tobiko</title>
<link
rel="icon"
type="image/png"
href="/proxy/8000/favicons/favicon.svg"
/>
<link
rel="stylesheet"
href="/proxy/8000/css/design.css"
/>
<link
rel="stylesheet"
href="/proxy/8000/css/base.css"
/>
<!-- Inter Fonts -->
<link
rel="prefetch"
href="/proxy/8000/fonts/Inter/static/Inter-Thin.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Inter/static/Inter-ExtraLight.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Inter/static/Inter-Light.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Inter/static/Inter-Regular.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Inter/static/Inter-Medium.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Inter/static/Inter-SemiBold.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Inter/static/Inter-Bold.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Inter/static/Inter-ExtraBold.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Inter/static/Inter-Black.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<!-- JetBrains Mono Fonts -->
<link
rel="prefetch"
href="/proxy/8000/fonts/JetBrains_Mono/static/JetBrainsMono-Thin.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraLight.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/JetBrains_Mono/static/JetBrainsMono-Light.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/JetBrains_Mono/static/JetBrainsMono-Regular.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/JetBrains_Mono/static/JetBrainsMono-Medium.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/JetBrains_Mono/static/JetBrainsMono-SemiBold.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/JetBrains_Mono/static/JetBrainsMono-Bold.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraBold.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
<!-- Martina Plantijn Fonts -->
<link
rel="prefetch"
href="/proxy/8000/fonts/Martina_Plantijn/martina-plantijn-regular.otf"
as="font"
type="font/otf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Martina_Plantijn/martina-plantijn-regular.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<!-- Sohne Fonts -->
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-buch.otf"
as="font"
type="font/otf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-buch.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-kraftig.otf"
as="font"
type="font/otf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-kraftig.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-buch-kursiv.otf"
as="font"
type="font/otf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-buch-kursiv.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-mono-buch.otf"
as="font"
type="font/otf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-mono-buch.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-mono-kraftig.otf"
as="font"
type="font/otf"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="/proxy/8000/fonts/Sohne/sohne-mono-kraftig.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<script type="module" crossorigin src="/proxy/8000/assets/index-176b79a9.js"></script>
</head>
<body class="h-full w-full">
<div
id="root"
class="h-full w-full flex flex-col justify-start"
></div>
</body>
</html>