Skip to content

Configure backend API URL via environment variables in frontend #2

@chigwell

Description

@chigwell

User Story:
As a frontend developer,
I want to use environment variables to configure the backend API URL in frontend/src/App.js
so that the frontend can dynamically connect to different backend environments without code changes.

Background:
Currently, the backend URL in frontend/src/App.js is hardcoded as http://0.0.0.0:80/. This approach limits the flexibility of deploying the frontend in various environments (e.g., development, staging, production) because changing the backend server address requires manual code changes and redeployment of the frontend. Additionally, this hardcoded address can cause issues in containerized or cloud-based setups where networking parameters differ. Moving the backend URL configuration to environment variables will decouple the deployment environment from the codebase and improve maintainability.

Acceptance Criteria:

  • Modify frontend/src/App.js to read the backend API URL from an environment variable, e.g., REACT_APP_BACKEND_URL.
  • Ensure the environment variable can be injected through .env files or Docker build arguments as per React conventions.
  • Update the fetch call in App.js to use the environment variable fallback to a sensible default if not set.
  • Add or update frontend .env sample file (e.g., .env.example) documenting the variable usage.
  • Update frontend/Dockerfile to allow passing the backend URL environment variable during container build or runtime if necessary.
  • Validate by running the frontend with different environment variable values and confirming the React app successfully fetches from the configured backend URL.
  • Ensure no regression occurs: the React app still displays the "Hello World" message fetched from the backend.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions