diff --git a/README.md b/README.md index 9319988..817dd8a 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,22 @@ To run this application, you need to have the following installed: - **Frontend**: Open your web browser and navigate to `http://localhost:3000`. - **Backend API**: The backend API is available at `http://localhost:3001/api/services`. +## Configuration + +The application can be configured using environment variables. + +### Frontend + +- `REACT_APP_BACKEND_URL`: The URL of the backend API. This is passed to the React application during the build process. If not set, the frontend will default to `http://localhost:3001`. + + To set this variable when running with Docker Compose, you can create a `.env` file in the root of the project with the following content: + + ``` + REACT_APP_BACKEND_URL=http://your-backend-url:3001 + ``` + + Then run `docker compose up --build`. + ## Accessing Services - The frontend will display cards for each discovered Docker service. diff --git a/docker-compose.yml b/docker-compose.yml index acb3f9e..fe54521 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -8,7 +8,13 @@ services: volumes: - /var/run/docker.sock:/var/run/docker.sock frontend: - build: ./frontend + build: + context: ./frontend + args: + # The URL of the backend API. + # This is passed to the React application during the build process. + # If not set, the frontend will default to http://localhost:3001 in the frontend code. + - REACT_APP_BACKEND_URL ports: - "3000:3000" depends_on: diff --git a/frontend/Dockerfile b/frontend/Dockerfile index dc6223b..6ea5051 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -4,6 +4,11 @@ FROM node:18-alpine as builder # Set the working directory in the container WORKDIR /usr/src/app +# Define the build-time argument +ARG REACT_APP_BACKEND_URL +# Set the environment variable for the build process +ENV REACT_APP_BACKEND_URL=$REACT_APP_BACKEND_URL + # Copy package.json and package-lock.json to the working directory COPY package*.json ./ diff --git a/frontend/src/api.js b/frontend/src/api.js index 6526e7b..55f864e 100644 --- a/frontend/src/api.js +++ b/frontend/src/api.js @@ -1,6 +1,7 @@ import axios from 'axios'; -const API_URL = 'http://localhost:3001/api'; +const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://localhost:3001'; +const API_URL = `${BACKEND_URL}/api`; export async function getServices() { const response = await axios.get(`${API_URL}/services`); diff --git a/openspec/changes/integrate-shadcn-library/.openspec.yaml b/openspec/changes/archive/2026-03-28-integrate-shadcn-library/.openspec.yaml similarity index 100% rename from openspec/changes/integrate-shadcn-library/.openspec.yaml rename to openspec/changes/archive/2026-03-28-integrate-shadcn-library/.openspec.yaml diff --git a/openspec/changes/integrate-shadcn-library/design.md b/openspec/changes/archive/2026-03-28-integrate-shadcn-library/design.md similarity index 100% rename from openspec/changes/integrate-shadcn-library/design.md rename to openspec/changes/archive/2026-03-28-integrate-shadcn-library/design.md diff --git a/openspec/changes/integrate-shadcn-library/proposal.md b/openspec/changes/archive/2026-03-28-integrate-shadcn-library/proposal.md similarity index 100% rename from openspec/changes/integrate-shadcn-library/proposal.md rename to openspec/changes/archive/2026-03-28-integrate-shadcn-library/proposal.md diff --git a/openspec/changes/integrate-shadcn-library/specs/shadcn-integration/spec.md b/openspec/changes/archive/2026-03-28-integrate-shadcn-library/specs/shadcn-integration/spec.md similarity index 100% rename from openspec/changes/integrate-shadcn-library/specs/shadcn-integration/spec.md rename to openspec/changes/archive/2026-03-28-integrate-shadcn-library/specs/shadcn-integration/spec.md diff --git a/openspec/changes/integrate-shadcn-library/tasks.md b/openspec/changes/archive/2026-03-28-integrate-shadcn-library/tasks.md similarity index 100% rename from openspec/changes/integrate-shadcn-library/tasks.md rename to openspec/changes/archive/2026-03-28-integrate-shadcn-library/tasks.md diff --git a/openspec/changes/archive/2026-03-31-backend-url-env-var/.openspec.yaml b/openspec/changes/archive/2026-03-31-backend-url-env-var/.openspec.yaml new file mode 100644 index 0000000..8fb8631 --- /dev/null +++ b/openspec/changes/archive/2026-03-31-backend-url-env-var/.openspec.yaml @@ -0,0 +1,2 @@ +schema: spec-driven +created: 2026-03-31 diff --git a/openspec/changes/archive/2026-03-31-backend-url-env-var/design.md b/openspec/changes/archive/2026-03-31-backend-url-env-var/design.md new file mode 100644 index 0000000..3eed17a --- /dev/null +++ b/openspec/changes/archive/2026-03-31-backend-url-env-var/design.md @@ -0,0 +1,25 @@ +## Context + +As outlined in the proposal, the frontend application's backend URL is hardcoded. This design details the technical approach to make this configurable, improving deployment flexibility across different environments. + +## Goals / Non-Goals + +**Goals:** +- To allow the backend URL for the frontend application to be set via an environment variable named `REACT_APP_BACKEND_URL`. +- To update the Docker configuration to support passing this environment variable at runtime. +- To ensure the application remains runnable locally with a sensible default, requiring no extra setup for local development. + +**Non-Goals:** +- This change will not address dynamic configuration updates at runtime. A restart of the frontend application will be needed for a new URL to take effect. +- This will not involve any changes to the backend service itself. + +## Decisions + +- **Environment Variable Name**: We will use `REACT_APP_BACKEND_URL`. Create React App's build process automatically embeds environment variables prefixed with `REACT_APP_` into the application, making them accessible via `process.env.REACT_APP_BACKEND_URL`. This is the standard and simplest method for this stack. +- **Default Value**: In the frontend JavaScript code, we will implement a fallback to `http://localhost:3001` if the `REACT_APP_BACKEND_URL` environment variable is not set. This ensures that running `npm start` locally continues to work out-of-the-box. +- **Docker Configuration**: The `docker-compose.yml` file will be modified to accept the `REACT_APP_BACKEND_URL` environment variable and pass it to the `frontend` service. This allows operators to configure the backend URL when running `docker-compose up`. + +## Risks / Trade-offs + +- **Risk**: If the `REACT_APP_BACKEND_URL` is not set in a production environment, the frontend will default to `http://localhost:3001`, which will fail. + - **Mitigation**: Deployment documentation and CI/CD scripts must be updated to explicitly require and validate the presence of the `REACT_APP_BACKEND_URL` variable for all non-local environments. diff --git a/openspec/changes/archive/2026-03-31-backend-url-env-var/proposal.md b/openspec/changes/archive/2026-03-31-backend-url-env-var/proposal.md new file mode 100644 index 0000000..fae28ee --- /dev/null +++ b/openspec/changes/archive/2026-03-31-backend-url-env-var/proposal.md @@ -0,0 +1,22 @@ +## Why + +The backend URL is currently hardcoded in the frontend application, which makes it inflexible for different environments. Configuring it via environment variables will allow for seamless switching between development, staging, and production endpoints without code changes. + +## What Changes + +- The frontend application will be modified to read the backend API URL from an environment variable. +- A sensible default will be provided for local development. +- The Docker setup will be updated to allow passing the environment variable during container startup. + +## Capabilities + +### New Capabilities +- `configurable-backend-url`: Enables the backend URL to be set dynamically via an environment variable. + +### Modified Capabilities +- None + +## Impact + +- Frontend application code (where API calls are made). +- Frontend Dockerfile and docker-compose.yml to manage the new environment variable. diff --git a/openspec/changes/archive/2026-03-31-backend-url-env-var/specs/configurable-backend-url/spec.md b/openspec/changes/archive/2026-03-31-backend-url-env-var/specs/configurable-backend-url/spec.md new file mode 100644 index 0000000..763ba91 --- /dev/null +++ b/openspec/changes/archive/2026-03-31-backend-url-env-var/specs/configurable-backend-url/spec.md @@ -0,0 +1,12 @@ +## ADDED Requirements + +### Requirement: Backend URL is configured via environment variable +The frontend application SHALL use the URL defined in the `REACT_APP_BACKEND_URL` environment variable to make API calls to the backend. + +#### Scenario: Environment variable is set +- **WHEN** the `REACT_APP_BACKEND_URL` environment variable is set to "http://api.example.com" +- **THEN** the application SHALL make API calls to "http://api.example.com". + +#### Scenario: Environment variable is not set +- **WHEN** the `REACT_APP_BACKEND_URL` environment variable is not set +- **THEN** the application SHALL make API calls to "http://localhost:3001". diff --git a/openspec/changes/archive/2026-03-31-backend-url-env-var/tasks.md b/openspec/changes/archive/2026-03-31-backend-url-env-var/tasks.md new file mode 100644 index 0000000..8d66bd7 --- /dev/null +++ b/openspec/changes/archive/2026-03-31-backend-url-env-var/tasks.md @@ -0,0 +1,14 @@ +## 1. Frontend Application Changes + +- [x] 1.1 In `frontend/src/api.js`, modify the logic to use `process.env.REACT_APP_BACKEND_URL` for the API base URL. +- [x] 1.2 Implement a fallback to `http://localhost:3001` in the same file for when the environment variable is not set. + +## 2. Docker Configuration + +- [x] 2.1 In `docker-compose.yml`, update the `frontend` service definition to pass the `REACT_APP_BACKEND_URL` environment variable. +- [x] 2.2 Add comments to `docker-compose.yml` to clarify the purpose and usage of the new environment variable. +- [x] 2.3 In `frontend/Dockerfile`, add `ARG` and `ENV` to pass the `REACT_APP_BACKEND_URL` to the build process. + +## 3. Documentation + +- [x] 3.1 Update the main `README.md` to document the new `REACT_APP_BACKEND_URL` environment variable, explaining its purpose and how to use it. diff --git a/openspec/specs/shadcn-integration/spec.md b/openspec/specs/shadcn-integration/spec.md new file mode 100644 index 0000000..05ad4b3 --- /dev/null +++ b/openspec/specs/shadcn-integration/spec.md @@ -0,0 +1,20 @@ +# shadcn-integration Specification + +## Purpose +TBD - created by archiving change integrate-shadcn-library. Update Purpose after archive. +## Requirements +### Requirement: Shadcn/ui Integration +The system SHALL be integrated with the `shadcn/ui` component library. + +#### Scenario: Component Replacement +- **WHEN** the application is rendered +- **THEN** the `Dropdown` and `FilterBox` components SHALL be replaced with their `shadcn/ui` equivalents. +- **THEN** the visual appearance of the components SHALL be consistent with the `shadcn/ui` design system. + +### Requirement: Consistent UI +All new frontend components SHALL be built using `shadcn/ui`. + +#### Scenario: New Component Development +- **WHEN** a new component is developed +- **THEN** it SHALL be built using components from the `shadcn/ui` library. +