-
Notifications
You must be signed in to change notification settings - Fork 5
Description
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.jsto read the backend API URL from an environment variable, e.g.,REACT_APP_BACKEND_URL. - Ensure the environment variable can be injected through
.envfiles or Docker build arguments as per React conventions. - Update the
fetchcall inApp.jsto use the environment variable fallback to a sensible default if not set. - Add or update frontend
.envsample file (e.g.,.env.example) documenting the variable usage. - Update
frontend/Dockerfileto 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.