Use hostname-based routing instead of ports for different services

components/interface/api/src/config.js

@@ -0,0 +1,3 @@
+export const config = {
+  vscodeEndpoint: process.env.VSCODE_ENDPOINT || "http://vscode.localhost:3030",
+};

components/interface/api/src/routes/config.js

@@ -0,0 +1,10 @@
+import express from "express";
+import { config } from "../config.js";
+
+const router = express.Router();
+
+router.get("/", (req, res) => {
+  res.json(config);
+});
+
+export default router;

components/interface/api/src/routes/index.js

@@ -1,9 +1,11 @@
 import express from "express";
+import configRouter from "./config.js";
 import labspaceRouter from "./labspace.js";
 import variableRouter from "./variables.js";
 
 const router = express.Router();
 
+router.use("/config", configRouter);
 router.use("/labspace", labspaceRouter);
 router.use("/variables", variableRouter);
 

components/interface/client/src/App.jsx

@@ -1,14 +1,17 @@
 import "./App.scss";
 import { BrowserRouter, Route, Routes } from "react-router";
 import AppRoute from "./AppRoute";
+import { ConfigProvider } from "./ConfigContext";
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path=":sectionId?" element={<AppRoute />} />
-      </Routes>
-    </BrowserRouter>
+    <ConfigProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path=":sectionId?" element={<AppRoute />} />
+        </Routes>
+      </BrowserRouter>
+    </ConfigProvider>
   );
 }
 

components/interface/client/src/ConfigContext.jsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { useContext } from "react";
+import { useEffect } from "react";
+import { createContext } from "react";
+
+const ConfigContext = createContext(null);
+
+export function ConfigProvider({ children }) {
+  const [config, setConfig] = useState(null);
+
+  useEffect(() => {
+    fetch("/api/config")
+      .then((res) => res.json())
+      .then((data) => setConfig(data));
+  }, []);
+
+  if (!config) {
+    return null;
+  }
+
+  return (
+    <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
+  );
+}
+
+export const useConfig = () => useContext(ConfigContext);

components/interface/client/src/components/ExternalContentPanel/ExternalContentPanel.jsx

@@ -3,8 +3,10 @@ import { useTabs } from "../../TabContext";
 import "./ExternalContentPanel.scss";
 import { ExternalTabs } from "./ExternalTabs";
 import { useRef } from "react";
+import { useConfig } from "../../ConfigContext";
 
 export function ExternalContentPanel() {
+  const config = useConfig();
   const { tabs, setActiveTab, activeTab, addTab, removeTab } = useTabs();
   const iframeRef = useRef();
 
@@ -37,7 +39,8 @@ export function ExternalContentPanel() {
         </>
       ) : (
         <IdePlaceholder
-          onLaunch={() => addTab("http://localhost:8085", "Workspace")}
+          onLaunch={() => addTab(config.vscodeEndpoint, "Workspace")}
+          vscodeUrl={config.vscodeEndpoint}
         />
       )}
     </div>

components/interface/client/src/components/ExternalContentPanel/IdePlaceholder.jsx

@@ -1,7 +1,7 @@
 import Button from "react-bootstrap/Button";
 import "./IdePlaceholder.scss";
 
-export function IdePlaceholder({ onLaunch }) {
+export function IdePlaceholder({ onLaunch, vscodeUrl }) {
   return (
     <div className="vscode-placeholder" id="vscode-placeholder">
       <svg viewBox="0 0 24 24" fill="currentColor">
@@ -22,12 +22,7 @@ export function IdePlaceholder({ onLaunch }) {
           Load VS Code here
         </Button>
 
-        <Button
-          as="a"
-          href="http://localhost:8085"
-          target="_blank"
-          variant="secondary"
-        >
+        <Button as="a" href={vscodeUrl} target="_blank" variant="secondary">
           Open VS Code in New Tab
         </Button>
       </div>

compose.content-dev.yaml

@@ -5,6 +5,22 @@
 ##################################################################################################
 
 services:
+  traefik:
+    image: traefik:3.6.7
+    command:
+      - --api.insecure=true
+      - --providers.docker=true
+      - --providers.docker.exposedbydefault=false
+      - --entrypoints.web.address=:80
+    ports:
+      - 3030:80
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    labels:
+      traefik.enable: true
+      traefik.http.routers.traefik.rule: Host(`traefik.localhost`)
+      traefik.http.services.traefik.loadbalancer.server.port: 8080
+
   configurator:
     image: dockersamples/labspace-configurator:latest
     use_api_socket: true
@@ -17,8 +33,6 @@ services:
 
   interface:
     image: dockersamples/labspace-interface:latest
-    ports:
-      - "3030:3030"
     volumes:
       - ${CONTENT_PATH}:/project
       - type: volume
@@ -38,6 +52,10 @@ services:
           subpath: metadata
     environment:
       CONTENT_DEV_MODE: true
+    labels:
+      traefik.enable: true
+      traefik.http.routers.interface.rule: Host(`localhost`)
+      traefik.http.services.interface.loadbalancer.server.port: 3030
     depends_on:
       workspace:
         condition: service_started
@@ -53,7 +71,6 @@ services:
       socket-proxy:
         condition: service_started
     ports:
-      - 8085:8085 # For the IDE itself
       - 3000:3000 # For the Node application running in the IDE
     volumes:
       - socket-proxy:/var/run
@@ -74,6 +91,10 @@ services:
         target: /home/coder/.local/share/code-server/User/settings.json
         uid: "1000"
         gid: "1000"
+    labels:
+      traefik.enable: true
+      traefik.http.routers.vscode.rule: Host(`vscode.localhost`)
+      traefik.http.services.vscode.loadbalancer.server.port: 8085
 
   host-republisher:
     image: dockersamples/labspace-host-port-republisher:latest

compose.run.yaml

@@ -5,6 +5,20 @@
 ##################################################################################################
 
 services:
+  traefik:
+    image: traefik:3.6.7
+    command:
+      - --api.insecure=true
+      - --providers.docker=true
+      - --providers.docker.exposedbydefault=false
+      - --entrypoints.web.address=:80
+    ports:
+      - 3030:80
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    labels:
+      traefik.enable: true
+
   configurator:
     image: dockersamples/labspace-configurator:latest
     use_api_socket: true
@@ -36,6 +50,10 @@ services:
         target: /etc/labspace-support/metadata
         volume:
           subpath: metadata
+    labels:
+      traefik.enable: true
+      traefik.http.routers.interface.rule: Host(`localhost`)
+      traefik.http.services.interface.loadbalancer.server.port: 3030
     depends_on:
       workspace:
         condition: service_started
@@ -51,7 +69,6 @@ services:
       socket-proxy:
         condition: service_started
     ports:
-      - 8085:8085 # For the IDE itself
       - 3000:3000 # For the Node application running in the IDE
     volumes:
       - socket-proxy:/var/run
@@ -67,6 +84,10 @@ services:
         target: /etc/labspace-support/socket
         volume:
           subpath: socket
+    labels:
+      traefik.enable: true
+      traefik.http.routers.vscode.rule: Host(`vscode.localhost`)
+      traefik.http.services.vscode.loadbalancer.server.port: 8085
 
 
   host-republisher:

compose.yaml

@@ -5,6 +5,22 @@
 # If you are trying to develop a Labspace, use the `compose.content-dev.yaml` file.
 ##################################################################################################
 services:
+  traefik:
+    image: traefik:3.6.7
+    command:
+      - --api.insecure=true
+      - --providers.docker=true
+      - --providers.docker.exposedbydefault=false
+      - --entrypoints.web.address=:80
+    ports:
+      - 3030:80
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    labels:
+      traefik.enable: true
+      traefik.http.routers.traefik.rule: Host(`traefik.localhost`)
+      traefik.http.services.traefik.loadbalancer.server.port: 8080
+
   configurator:
     build: ./components/configurator
     use_api_socket: true
@@ -63,15 +79,17 @@ services:
     build:
       context: ./components/interface
       target: client-dev
-    ports:
-      - 5173:5173
     develop:
       watch:
         - path: ./components/interface/client/src
           action: sync
           target: /usr/local/app/src
         - path: ./components/interface/client/package-lock.json
           action: rebuild
+    labels:
+      traefik.enable: true
+      traefik.http.routers.interface.rule: Host(`localhost`)
+      traefik.http.services.interface.loadbalancer.server.port: 5173
 
   # This service is not running anything, but simply building the extension
   # and allowing it to be an additional build context for the workspace service
@@ -89,7 +107,6 @@ services:
       socket-proxy:
         condition: service_started
     ports:
-      - 8085:8085 # For the IDE itself
       - 3000:3000 # For the Node application running in the IDE
     volumes:
       - socket-proxy:/var/run
@@ -105,6 +122,10 @@ services:
         target: /etc/labspace-support/socket
         volume:
           subpath: socket
+    labels:
+      traefik.enable: true
+      traefik.http.routers.vscode.rule: Host(`vscode.localhost`)
+      traefik.http.services.vscode.loadbalancer.server.port: 8085
     develop:
       watch:
         - path: ./components/workspace
@@ -191,10 +212,12 @@ services:
 
   marlin-mock:
     build: ./components/marlin-mock
-    ports:
-      - 3030:3000
     environment:
       MARLIN_API_KEY: dev-marlin-api-key
+    labels:
+      traefik.enable: true
+      traefik.http.routers.marlin-mock.rule: Host(`marlin.localhost`)
+      traefik.http.services.marlin-mock.loadbalancer.server.port: 3000
     develop:
       watch:
         - path: ./components/marlin-mock/src