Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SQLMesh UI: Make UI working with VS Code Server #3955

Open
gianmarcomennecozzi opened this issue Mar 7, 2025 · 1 comment
Open

SQLMesh UI: Make UI working with VS Code Server #3955

gianmarcomennecozzi opened this issue Mar 7, 2025 · 1 comment
Labels
Feature Adds new functionality

Comments

@gianmarcomennecozzi
Copy link

gianmarcomennecozzi commented Mar 7, 2025 •
edited
Loading

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
@izeigerman izeigerman added the Feature Adds new functionality label Mar 11, 2025
@mattseddon
Copy link
Contributor

I think this answer should fix this issue: microsoft/vscode-remote-release#9285 (comment)

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Feature Adds new functionality
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@izeigerman @mattseddon @gianmarcomennecozzi