sqlmesh icon indicating copy to clipboard operation
sqlmesh copied to clipboard
verified publisher icon TobikoData

SQLMesh UI: Make UI working with VS Code Server

Open gianmarcomennecozzi opened this issue 9 months ago • 4 comments

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

Image

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>

Image

gianmarcomennecozzi avatar Mar 07 '25 15:03 gianmarcomennecozzi

I think this answer should fix this issue: https://github.com/microsoft/vscode-remote-release/issues/9285#issuecomment-1845480377

I built the image in the OP, started it using docker run -d -p 8443:8443 --name sqlmesh-code-server sqlmesh-code-server --host 0.0.0.0, connected to it using Dev Containers: Attach to running container... and could open the UI using Open in Browser button displayed in the OP.

mattseddon avatar Mar 24 '25 02:03 mattseddon

Thanks for the reply @mattseddon, I tried what you suggested, but it still does not work. The UI from Open in Browser button is literally blank with a bunch of import errors.

FYI @mattseddon, those are the steps to reproduce the error.

  1. Access the codeserver on the browser (in your case will be http://localhost:8443/)
  2. Open the terminal and run the code below
mkdir test
cd test
sqlmesh init duckdb
sqlmesh ui --host 0.0.0.0
  1. Open the UI using Open in Browser button displayed in the OP.

gianmarcomennecozzi avatar Apr 19 '25 09:04 gianmarcomennecozzi

I think that you misunderstood what I wrote (I will confirm later). From memory: You need to start the codeserver container with the --host 0.0.0.0 option. Not the sqlmesh ui.

mattseddon avatar Apr 19 '25 23:04 mattseddon

Sorry for not being clear, but i did start the container as you suggested (docker run -d -p 8443:8443 --name sqlmesh-code-server sqlmesh-code-server --host 0.0.0.0). Unfortunatelly, It did not work.

gianmarcomennecozzi avatar Apr 21 '25 08:04 gianmarcomennecozzi