From 4395e44dbf0e0984567cc7aa0cac825fd03c0721 Mon Sep 17 00:00:00 2001 From: Twirre Meulenbelt <43213592+TwirreM@users.noreply.github.com> Date: Thu, 29 Jan 2026 17:40:49 +0100 Subject: [PATCH] feat: introduce backend url environment variable ref: N25B-352 --- .env.example | 2 ++ README.md | 8 ++++++++ src/components/Logging/useLogs.ts | 3 ++- src/config/api.ts | 11 +++++++++++ src/pages/ConnectedRobots/ConnectedRobots.tsx | 3 ++- src/pages/MonitoringPage/MonitoringPageAPI.ts | 12 +++++------- .../MonitoringPage/MonitoringPageComponents.tsx | 5 +++-- .../MonitoringPage/components/ExperimentLogs.tsx | 7 ++++--- src/pages/Robot/Robot.tsx | 5 +++-- src/pages/VisProgPage/VisProgLogic.ts | 5 +++-- src/vite-env.d.ts | 11 +++++++++++ test/components/Logging/useLogs.test.tsx | 3 ++- test/pages/monitoringPage/MonitoringPageAPI.test.ts | 5 +++-- test/pages/robot/Robot.test.tsx | 5 +++-- vite.config.ts | 3 +++ 15 files changed, 65 insertions(+), 23 deletions(-) create mode 100644 .env.example create mode 100644 src/config/api.ts create mode 100644 src/vite-env.d.ts diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..dc6ef5b --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +# The location of the backend +VITE_API_BASE_URL=http://localhost:8000 diff --git a/README.md b/README.md index 47e2054..75becbe 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,14 @@ npm run dev It should automatically reload when you save changes. +## Environment + +Copy `.env.example` to `.env.local` and adjust values as needed: + +```shell +cp .env.example .env.local +``` + ## Git Hooks To activate automatic linting, branch name checks and commit message checks, run: diff --git a/src/components/Logging/useLogs.ts b/src/components/Logging/useLogs.ts index 73016db..14de177 100644 --- a/src/components/Logging/useLogs.ts +++ b/src/components/Logging/useLogs.ts @@ -5,6 +5,7 @@ import {useCallback, useEffect, useRef, useState} from "react"; import {applyPriorityPredicates, type PriorityFilterPredicate} from "../../utils/priorityFiltering.ts"; import {cell, type Cell} from "../../utils/cellStore.ts"; +import { API_BASE_URL } from "../../config/api.ts"; type ExtraLevelName = 'LLM' | 'OBSERVATION' | 'ACTION' | 'CHAT'; @@ -210,7 +211,7 @@ export function useLogs(filterPredicates: Map) { // Only create one SSE connection for the lifetime of the hook. if (sseRef.current) return; - const es = new EventSource("http://localhost:8000/logs/stream"); + const es = new EventSource(`${API_BASE_URL}/logs/stream`); sseRef.current = es; es.onmessage = (event) => { diff --git a/src/config/api.ts b/src/config/api.ts new file mode 100644 index 0000000..44776d1 --- /dev/null +++ b/src/config/api.ts @@ -0,0 +1,11 @@ +declare const __VITE_API_BASE_URL__: string | undefined; + +const DEFAULT_API_BASE_URL = "http://localhost:8000"; + +const rawApiBaseUrl = + (typeof __VITE_API_BASE_URL__ !== "undefined" ? __VITE_API_BASE_URL__ : undefined) ?? + DEFAULT_API_BASE_URL; + +export const API_BASE_URL = rawApiBaseUrl.endsWith("/") + ? rawApiBaseUrl.slice(0, -1) + : rawApiBaseUrl; diff --git a/src/pages/ConnectedRobots/ConnectedRobots.tsx b/src/pages/ConnectedRobots/ConnectedRobots.tsx index bddfbd4..0f97e27 100644 --- a/src/pages/ConnectedRobots/ConnectedRobots.tsx +++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx @@ -2,6 +2,7 @@ // University within the Software Project course. // © Copyright Utrecht University (Department of Information and Computing Sciences) import { useEffect, useState } from 'react' +import { API_BASE_URL } from '../../config/api.ts'; /** * Displays the current connection status of a robot in real time. @@ -25,7 +26,7 @@ export default function ConnectedRobots() { useEffect(() => { // Open a Server-Sent Events (SSE) connection to receive live ping updates. // We're expecting a stream of data like that looks like this: `data = False` or `data = True` - const eventSource = new EventSource("http://localhost:8000/robot/ping_stream"); + const eventSource = new EventSource(`${API_BASE_URL}/robot/ping_stream`); eventSource.onmessage = (event) => { // Expecting messages in JSON format: `true` or `false` diff --git a/src/pages/MonitoringPage/MonitoringPageAPI.ts b/src/pages/MonitoringPage/MonitoringPageAPI.ts index 1a9838c..cfad841 100644 --- a/src/pages/MonitoringPage/MonitoringPageAPI.ts +++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts @@ -2,16 +2,14 @@ // University within the Software Project course. // © Copyright Utrecht University (Department of Information and Computing Sciences) import React, { useEffect } from 'react'; - -const API_BASE = "http://localhost:8000"; -const API_BASE_BP = API_BASE + "/button_pressed"; //UserInterruptAgent endpoint +import { API_BASE_URL } from '../../config/api.ts'; /** * HELPER: Unified sender function */ export const sendAPICall = async (type: string, context: string, endpoint?: string) => { try { - const response = await fetch(`${API_BASE_BP}${endpoint ?? ""}`, { + const response = await fetch(`${API_BASE_URL}/button_pressed${endpoint ?? ""}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type, context }), @@ -76,7 +74,7 @@ export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => v useEffect(() => { console.log("Connecting to Experiment Stream..."); - const eventSource = new EventSource(`${API_BASE}/experiment_stream`); + const eventSource = new EventSource(`${API_BASE_URL}/experiment_stream`); eventSource.onmessage = (event) => { try { @@ -112,7 +110,7 @@ export function useStatusLogger(onUpdate?: (data: ExperimentStreamData) => void }, [onUpdate]); useEffect(() => { - const eventSource = new EventSource(`${API_BASE}/status_stream`); + const eventSource = new EventSource(`${API_BASE_URL}/status_stream`); eventSource.onmessage = (event) => { try { const parsedData = JSON.parse(event.data); @@ -121,4 +119,4 @@ export function useStatusLogger(onUpdate?: (data: ExperimentStreamData) => void }; return () => eventSource.close(); }, []); -} \ No newline at end of file +} diff --git a/src/pages/MonitoringPage/MonitoringPageComponents.tsx b/src/pages/MonitoringPage/MonitoringPageComponents.tsx index ef4f561..42d5bee 100644 --- a/src/pages/MonitoringPage/MonitoringPageComponents.tsx +++ b/src/pages/MonitoringPage/MonitoringPageComponents.tsx @@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'; import styles from './MonitoringPage.module.css'; import { sendAPICall } from './MonitoringPageAPI'; +import { API_BASE_URL } from '../../config/api.ts'; // --- GESTURE COMPONENT --- export const GestureControls: React.FC = () => { @@ -201,7 +202,7 @@ export const RobotConnected = () => { useEffect(() => { // Open a Server-Sent Events (SSE) connection to receive live ping updates. // We're expecting a stream of data like that looks like this: `data = False` or `data = True` - const eventSource = new EventSource("http://localhost:8000/robot/ping_stream"); + const eventSource = new EventSource(`${API_BASE_URL}/robot/ping_stream`); eventSource.onmessage = (event) => { // Expecting messages in JSON format: `true` or `false` @@ -232,4 +233,4 @@ export const RobotConnected = () => {

{connected ? "● Robot is connected" : "● Robot is disconnected"}

) -} \ No newline at end of file +} diff --git a/src/pages/MonitoringPage/components/ExperimentLogs.tsx b/src/pages/MonitoringPage/components/ExperimentLogs.tsx index ff0d118..99f3a26 100644 --- a/src/pages/MonitoringPage/components/ExperimentLogs.tsx +++ b/src/pages/MonitoringPage/components/ExperimentLogs.tsx @@ -14,6 +14,7 @@ import formatDuration from "../../../utils/formatDuration.ts"; import {create} from "zustand"; import Dialog from "../../../components/Dialog.tsx"; import delayedResolve from "../../../utils/delayedResolve.ts"; +import { API_BASE_URL } from "../../../config/api.ts"; /** * Local Zustand store for logging UI preferences. @@ -107,7 +108,7 @@ function DownloadScreen({filenames, refresh}: {filenames: string[] | null, refre return
    {filenames!.map((filename) => ( -
  1. {filename}
    2. +
  2. {filename}
    3. ))}
; })(); @@ -127,7 +128,7 @@ function DownloadButton() { const [filenames, setFilenames] = useState(null); async function getFiles(): Promise { - const response = await fetch("http://localhost:8000/api/logs/files"); + const response = await fetch(`${API_BASE_URL}/api/logs/files`); const files = await response.json(); files.sort(); return files; @@ -183,4 +184,4 @@ export default function ExperimentLogs() { ; -} \ No newline at end of file +} diff --git a/src/pages/Robot/Robot.tsx b/src/pages/Robot/Robot.tsx index 49dc120..80f4109 100644 --- a/src/pages/Robot/Robot.tsx +++ b/src/pages/Robot/Robot.tsx @@ -2,6 +2,7 @@ // University within the Software Project course. // © Copyright Utrecht University (Department of Information and Computing Sciences) import { useState, useEffect, useRef } from 'react' +import { API_BASE_URL } from '../../config/api.ts'; /** * Displays a live robot interaction panel with user input, conversation history, @@ -34,7 +35,7 @@ export default function Robot() { */ const sendMessage = async () => { try { - const response = await fetch("http://localhost:8000/message", { + const response = await fetch(`${API_BASE_URL}/message`, { method: "POST", headers: { "Content-Type": "application/json", @@ -60,7 +61,7 @@ export default function Robot() { * The connection resets whenever `conversationIndex` changes. */ useEffect(() => { - const eventSource = new EventSource("http://localhost:8000/sse"); + const eventSource = new EventSource(`${API_BASE_URL}/sse`); eventSource.onmessage = (event) => { try { diff --git a/src/pages/VisProgPage/VisProgLogic.ts b/src/pages/VisProgPage/VisProgLogic.ts index 696a8a7..b926f76 100644 --- a/src/pages/VisProgPage/VisProgLogic.ts +++ b/src/pages/VisProgPage/VisProgLogic.ts @@ -6,6 +6,7 @@ import orderPhaseNodeArray from "../../utils/orderPhaseNodes"; import useFlowStore from './visualProgrammingUI/VisProgStores'; import { NodeReduces } from './visualProgrammingUI/NodeRegistry'; import type { PhaseNode } from "./visualProgrammingUI/nodes/PhaseNode"; +import { API_BASE_URL } from "../../config/api.ts"; /** * Reduces the graph into its phases' information and recursively calls their reducing function @@ -28,7 +29,7 @@ export function runProgram() { const program = {phases} console.log(JSON.stringify(program, null, 2)); fetch( - "http://localhost:8000/program", + `${API_BASE_URL}/program`, { method: "POST", headers: {"Content-Type": "application/json"}, @@ -43,4 +44,4 @@ export function runProgram() { useProgramStore.getState().setProgramState(structuredClone(program)); }).catch(() => console.log("Failed to send program to the backend.")); console.log(program); -} \ No newline at end of file +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..5efb5ec --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,11 @@ +/// + +interface ImportMetaEnv { + readonly VITE_API_BASE_URL?: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} + +declare const __VITE_API_BASE_URL__: string | undefined; diff --git a/test/components/Logging/useLogs.test.tsx b/test/components/Logging/useLogs.test.tsx index d2272b8..de93019 100644 --- a/test/components/Logging/useLogs.test.tsx +++ b/test/components/Logging/useLogs.test.tsx @@ -6,6 +6,7 @@ import "@testing-library/jest-dom"; import {type LogRecord, useLogs} from "../../../src/components/Logging/useLogs.ts"; import {type cell, useCell} from "../../../src/utils/cellStore.ts"; import { StrictMode } from "react"; +import { API_BASE_URL } from "../../../src/config/api.ts"; jest.mock("../../../src/utils/priorityFiltering.ts", () => ({ applyPriorityPredicates: jest.fn((_log, preds: any[]) => @@ -83,7 +84,7 @@ describe("useLogs (unit)", () => { ); const es = (globalThis as any).__es as MockEventSource; expect(es).toBeTruthy(); - expect(es.url).toBe("http://localhost:8000/logs/stream"); + expect(es.url).toBe(`${API_BASE_URL}/logs/stream`); unmount(); expect(es.close).toHaveBeenCalledTimes(1); diff --git a/test/pages/monitoringPage/MonitoringPageAPI.test.ts b/test/pages/monitoringPage/MonitoringPageAPI.test.ts index 19afbdc..35377c6 100644 --- a/test/pages/monitoringPage/MonitoringPageAPI.test.ts +++ b/test/pages/monitoringPage/MonitoringPageAPI.test.ts @@ -10,6 +10,7 @@ import { useExperimentLogger, useStatusLogger } from '../../../src/pages/MonitoringPage/MonitoringPageAPI'; +import { API_BASE_URL } from '../../../src/config/api.ts'; // --- MOCK EVENT SOURCE SETUP --- // This mocks the browser's EventSource so we can manually 'push' messages to our hooks @@ -72,7 +73,7 @@ describe('MonitoringPageAPI', () => { await sendAPICall('test_type', 'test_ctx'); expect(globalThis.fetch).toHaveBeenCalledWith( - 'http://localhost:8000/button_pressed', + `${API_BASE_URL}/button_pressed`, expect.objectContaining({ method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -220,4 +221,4 @@ describe('MonitoringPageAPI', () => { expect(consoleSpy).toHaveBeenCalledWith('Status stream error:', expect.any(Error)); }); }); -}); \ No newline at end of file +}); diff --git a/test/pages/robot/Robot.test.tsx b/test/pages/robot/Robot.test.tsx index 2e872c7..d2bd07a 100644 --- a/test/pages/robot/Robot.test.tsx +++ b/test/pages/robot/Robot.test.tsx @@ -3,6 +3,7 @@ // © Copyright Utrecht University (Department of Information and Computing Sciences) import { render, screen, act, cleanup, fireEvent } from '@testing-library/react'; import Robot from '../../../src/pages/Robot/Robot'; +import { API_BASE_URL } from '../../../src/config/api.ts'; // Mock EventSource const mockInstances: MockEventSource[] = []; @@ -64,7 +65,7 @@ describe('Robot', () => { await act(async () => fireEvent.click(button)); expect(globalThis.fetch).toHaveBeenCalledWith( - 'http://localhost:8000/message', + `${API_BASE_URL}/message`, expect.objectContaining({ method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -83,7 +84,7 @@ describe('Robot', () => { ); expect(globalThis.fetch).toHaveBeenCalledWith( - 'http://localhost:8000/message', + `${API_BASE_URL}/message`, expect.objectContaining({ method: 'POST', headers: { 'Content-Type': 'application/json' }, diff --git a/vite.config.ts b/vite.config.ts index aa7de4f..b21d76a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,6 +4,9 @@ import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], + define: { + __VITE_API_BASE_URL__: "import.meta.env.VITE_API_BASE_URL", + }, css: { modules: { localsConvention: "camelCase", -- 2.49.1