From 147c2345966926e9222e34322834522045dbfda8 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Feb 2026 19:23:07 +0000 Subject: [PATCH 1/4] Initial plan From 08a5ea601e57e566382ee0826142852fb4b282b2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Feb 2026 19:31:48 +0000 Subject: [PATCH 2/4] feat: Add centralized API configuration with localhost fallback - Create config/api.js with getApiUrl utility - Update all components to use centralized API config - Add REACT_APP_API_BASE_URL env var support - Maintain backward compatibility with REACT_APP_CODESPACE_NAME - Update .env and .env.example with new configuration docs Co-authored-by: pmca31 <6774003+pmca31@users.noreply.github.com> --- octofit-tracker/frontend/.env | 13 +++++ octofit-tracker/frontend/.env.example | 11 +++- octofit-tracker/frontend/package-lock.json | 24 +++++++++ .../frontend/src/components/Activities.js | 3 +- .../frontend/src/components/Leaderboard.js | 3 +- .../frontend/src/components/Teams.js | 3 +- .../frontend/src/components/Users.js | 7 +-- .../frontend/src/components/Workouts.js | 3 +- octofit-tracker/frontend/src/config/api.js | 52 +++++++++++++++++++ 9 files changed, 111 insertions(+), 8 deletions(-) create mode 100644 octofit-tracker/frontend/src/config/api.js diff --git a/octofit-tracker/frontend/.env b/octofit-tracker/frontend/.env index d5bda7f..0b723d1 100644 --- a/octofit-tracker/frontend/.env +++ b/octofit-tracker/frontend/.env @@ -1 +1,14 @@ +# API Configuration +# Priority: +# 1. REACT_APP_API_BASE_URL - Use this for explicit API URL (recommended) +# 2. REACT_APP_CODESPACE_NAME - Used for GitHub Codespaces (auto-populated) +# 3. If neither is set, defaults to http://localhost:8000 + +# For local development (recommended): +REACT_APP_API_BASE_URL=http://localhost:8000 + +# For GitHub Codespaces (optional - auto-detected): +# REACT_APP_CODESPACE_NAME=your-codespace-name + +# Legacy support: You can still use REACT_APP_CODESPACE_NAME if needed REACT_APP_CODESPACE_NAME=bug-free-goldfish-pqgxwp57wvc6q9q diff --git a/octofit-tracker/frontend/.env.example b/octofit-tracker/frontend/.env.example index af84255..f32b24f 100644 --- a/octofit-tracker/frontend/.env.example +++ b/octofit-tracker/frontend/.env.example @@ -1,4 +1,13 @@ -# Set your Codespace name here +# API Configuration +# Priority: +# 1. REACT_APP_API_BASE_URL - Use this for explicit API URL (recommended) +# 2. REACT_APP_CODESPACE_NAME - Used for GitHub Codespaces (auto-populated) +# 3. If neither is set, defaults to http://localhost:8000 + +# For local development: +REACT_APP_API_BASE_URL=http://localhost:8000 + +# For GitHub Codespaces (optional - usually auto-detected): # You can get this from the CODESPACE_NAME environment variable in your terminal # Example: REACT_APP_CODESPACE_NAME=your-codespace-name REACT_APP_CODESPACE_NAME= diff --git a/octofit-tracker/frontend/package-lock.json b/octofit-tracker/frontend/package-lock.json index 5671bf5..5f06c7a 100644 --- a/octofit-tracker/frontend/package-lock.json +++ b/octofit-tracker/frontend/package-lock.json @@ -66,6 +66,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz", "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -715,6 +716,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.28.6.tgz", "integrity": "sha512-D+OrJumc9McXNEBI/JmFnc/0uCM2/Y3PEBG3gfV3QIYkKv5pvnpzFrl1kYCrcHJP8nOeFB/SHi1IHz29pNGuew==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, @@ -1598,6 +1600,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.28.6.tgz", "integrity": "sha512-61bxqhiRfAACulXSLd/GxqmAedUSrRZIu/cbaT18T1CetkTmtDN15it7i80ru4DVqRK1WMxQhXs+Lf9kajm5Ow==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-module-imports": "^7.28.6", @@ -3360,6 +3363,7 @@ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -3846,6 +3850,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", "@typescript-eslint/scope-manager": "5.62.0", @@ -3899,6 +3904,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", @@ -4268,6 +4274,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4366,6 +4373,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -5294,6 +5302,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -7127,6 +7136,7 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -9864,6 +9874,7 @@ "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz", "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==", "license": "MIT", + "peer": true, "dependencies": { "@jest/core": "^27.5.1", "import-local": "^3.0.2", @@ -10761,6 +10772,7 @@ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", "license": "MIT", + "peer": true, "bin": { "jiti": "bin/jiti.js" } @@ -12098,6 +12110,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -13232,6 +13245,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -13591,6 +13605,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -13722,6 +13737,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -13746,6 +13762,7 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -14224,6 +14241,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz", "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", "license": "MIT", + "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -14466,6 +14484,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -15831,6 +15850,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -15999,6 +16019,7 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "license": "(MIT OR CC0-1.0)", + "peer": true, "engines": { "node": ">=10" }, @@ -16428,6 +16449,7 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.1.tgz", "integrity": "sha512-Gdj3X74CLJJ8zy4URmK42W7wTZUJrqL+z8nyGEr4dTN0kb3nVs+ZvjbTOqRYPD7qX4tUmwyHL9Q9K6T1seW6Yw==", "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -16499,6 +16521,7 @@ "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz", "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==", "license": "MIT", + "peer": true, "dependencies": { "@types/bonjour": "^3.5.9", "@types/connect-history-api-fallback": "^1.3.5", @@ -16912,6 +16935,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", diff --git a/octofit-tracker/frontend/src/components/Activities.js b/octofit-tracker/frontend/src/components/Activities.js index 172fb62..bf03eaa 100644 --- a/octofit-tracker/frontend/src/components/Activities.js +++ b/octofit-tracker/frontend/src/components/Activities.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { getApiUrl } from '../config/api'; const Activities = () => { const [activities, setActivities] = useState([]); @@ -7,7 +8,7 @@ const Activities = () => { useEffect(() => { const fetchActivities = async () => { - const apiUrl = `https://${process.env.REACT_APP_CODESPACE_NAME}-8000.app.github.dev/api/activities/`; + const apiUrl = getApiUrl('/api/activities/'); console.log('Fetching from Activities API endpoint:', apiUrl); try { diff --git a/octofit-tracker/frontend/src/components/Leaderboard.js b/octofit-tracker/frontend/src/components/Leaderboard.js index eef4ec3..8197cf2 100644 --- a/octofit-tracker/frontend/src/components/Leaderboard.js +++ b/octofit-tracker/frontend/src/components/Leaderboard.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { getApiUrl } from '../config/api'; const Leaderboard = () => { const [leaderboard, setLeaderboard] = useState([]); @@ -7,7 +8,7 @@ const Leaderboard = () => { useEffect(() => { const fetchLeaderboard = async () => { - const apiUrl = `https://${process.env.REACT_APP_CODESPACE_NAME}-8000.app.github.dev/api/leaderboard/`; + const apiUrl = getApiUrl('/api/leaderboard/'); console.log('Fetching from Leaderboard API endpoint:', apiUrl); try { diff --git a/octofit-tracker/frontend/src/components/Teams.js b/octofit-tracker/frontend/src/components/Teams.js index 73cd37a..6ae6ebe 100644 --- a/octofit-tracker/frontend/src/components/Teams.js +++ b/octofit-tracker/frontend/src/components/Teams.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { getApiUrl } from '../config/api'; const Teams = () => { const [teams, setTeams] = useState([]); @@ -7,7 +8,7 @@ const Teams = () => { useEffect(() => { const fetchTeams = async () => { - const apiUrl = `https://${process.env.REACT_APP_CODESPACE_NAME}-8000.app.github.dev/api/teams/`; + const apiUrl = getApiUrl('/api/teams/'); console.log('Fetching from Teams API endpoint:', apiUrl); try { diff --git a/octofit-tracker/frontend/src/components/Users.js b/octofit-tracker/frontend/src/components/Users.js index e7bf009..a6f5ab6 100644 --- a/octofit-tracker/frontend/src/components/Users.js +++ b/octofit-tracker/frontend/src/components/Users.js @@ -1,4 +1,5 @@ import React, { useState, useEffect, useCallback } from 'react'; +import { getApiUrl } from '../config/api'; const Users = () => { const [users, setUsers] = useState([]); @@ -10,7 +11,7 @@ const Users = () => { const [saveMessage, setSaveMessage] = useState(''); const fetchUsers = useCallback(async () => { - const apiUrl = `https://${process.env.REACT_APP_CODESPACE_NAME}-8000.app.github.dev/api/users/`; + const apiUrl = getApiUrl('/api/users/'); console.log('Fetching from Users API endpoint:', apiUrl); try { @@ -33,7 +34,7 @@ const Users = () => { }, []); const fetchTeams = useCallback(async () => { - const apiUrl = `https://${process.env.REACT_APP_CODESPACE_NAME}-8000.app.github.dev/api/teams/`; + const apiUrl = getApiUrl('/api/teams/'); console.log('Fetching teams for dropdown:', apiUrl); try { @@ -81,7 +82,7 @@ const Users = () => { const handleSave = async () => { if (!editingUser) return; - const apiUrl = `https://${process.env.REACT_APP_CODESPACE_NAME}-8000.app.github.dev/api/users/${editingUser.id}/`; + const apiUrl = getApiUrl(`/api/users/${editingUser.id}/`); console.log('Updating user:', apiUrl, formData); try { diff --git a/octofit-tracker/frontend/src/components/Workouts.js b/octofit-tracker/frontend/src/components/Workouts.js index 18c2a5e..eb9647c 100644 --- a/octofit-tracker/frontend/src/components/Workouts.js +++ b/octofit-tracker/frontend/src/components/Workouts.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { getApiUrl } from '../config/api'; const Workouts = () => { const [workouts, setWorkouts] = useState([]); @@ -7,7 +8,7 @@ const Workouts = () => { useEffect(() => { const fetchWorkouts = async () => { - const apiUrl = `https://${process.env.REACT_APP_CODESPACE_NAME}-8000.app.github.dev/api/workouts/`; + const apiUrl = getApiUrl('/api/workouts/'); console.log('Fetching from Workouts API endpoint:', apiUrl); try { diff --git a/octofit-tracker/frontend/src/config/api.js b/octofit-tracker/frontend/src/config/api.js new file mode 100644 index 0000000..a6ba58f --- /dev/null +++ b/octofit-tracker/frontend/src/config/api.js @@ -0,0 +1,52 @@ +/** + * API Configuration + * + * Provides a centralized API base URL configuration that works in both + * local development and GitHub Codespaces environments. + */ + +/** + * Gets the API base URL based on environment configuration. + * + * Priority: + * 1. REACT_APP_API_BASE_URL - explicit API URL (e.g., "http://localhost:8000") + * 2. REACT_APP_CODESPACE_NAME - Codespaces environment (builds https://{name}-8000.app.github.dev) + * 3. Default - falls back to http://localhost:8000 + * + * @returns {string} The API base URL without trailing slash + */ +const getApiBaseUrl = () => { + // Check for explicit API base URL first + if (process.env.REACT_APP_API_BASE_URL) { + return process.env.REACT_APP_API_BASE_URL.replace(/\/$/, ''); // Remove trailing slash + } + + // Check if running in GitHub Codespaces + if (process.env.REACT_APP_CODESPACE_NAME) { + return `https://${process.env.REACT_APP_CODESPACE_NAME}-8000.app.github.dev`; + } + + // Default to localhost for local development + return 'http://localhost:8000'; +}; + +export const API_BASE_URL = getApiBaseUrl(); + +/** + * Constructs a full API endpoint URL. + * + * @param {string} path - The API endpoint path (e.g., "/api/users/") + * @returns {string} The complete API URL + */ +export const getApiUrl = (path) => { + // Ensure path starts with / + const normalizedPath = path.startsWith('/') ? path : `/${path}`; + return `${API_BASE_URL}${normalizedPath}`; +}; + +const apiConfig = { + API_BASE_URL, + getApiUrl, +}; + +export default apiConfig; From 14fb18865bf2ebb2688bcbb6e220fc447a0df4a7 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Feb 2026 19:32:14 +0000 Subject: [PATCH 3/4] docs: Update FRONTEND_README.md with new API configuration - Document REACT_APP_API_BASE_URL as recommended approach - Explain configuration priority and fallback behavior - Update setup instructions for local development - Add examples for different environments Co-authored-by: pmca31 <6774003+pmca31@users.noreply.github.com> --- octofit-tracker/frontend/FRONTEND_README.md | 62 +++++++++++++++++---- 1 file changed, 52 insertions(+), 10 deletions(-) diff --git a/octofit-tracker/frontend/FRONTEND_README.md b/octofit-tracker/frontend/FRONTEND_README.md index dc4ecd2..2da5ed2 100644 --- a/octofit-tracker/frontend/FRONTEND_README.md +++ b/octofit-tracker/frontend/FRONTEND_README.md @@ -26,12 +26,12 @@ React-based frontend application for the OctoFit Tracker fitness tracking system 2. Configure environment variables: ```bash - # Run the setup script to auto-configure + # Create .env file with recommended configuration + echo "REACT_APP_API_BASE_URL=http://localhost:8000" > .env + + # Or run the setup script to auto-configure for Codespaces chmod +x setup.sh ./setup.sh - - # Or manually create .env file - echo "REACT_APP_CODESPACE_NAME=${CODESPACE_NAME}" > .env ``` 3. Start the development server: @@ -43,15 +43,54 @@ The app will be available at `http://localhost:3000` or your Codespace's forward ## Environment Variables -- `REACT_APP_CODESPACE_NAME`: Your GitHub Codespace name (auto-populated in Codespaces) +The application uses a centralized API configuration that supports multiple environments: -## API Integration +### Configuration Priority + +1. **REACT_APP_API_BASE_URL** (Recommended): Explicit API base URL + - Example: `http://localhost:8000` + - Best for local development and production deployments + +2. **REACT_APP_CODESPACE_NAME**: GitHub Codespaces auto-detection + - Automatically builds: `https://{name}-8000.app.github.dev` + - Legacy support for existing setups + +3. **Default Fallback**: `http://localhost:8000` + - Used when no environment variables are set + - Ensures the app works out-of-the-box locally + +### Configuration Examples + +**Local Development:** +```bash +REACT_APP_API_BASE_URL=http://localhost:8000 +``` + +**GitHub Codespaces (legacy):** +```bash +REACT_APP_CODESPACE_NAME=your-codespace-name +``` -The frontend connects to the Django REST API backend at: +**Production:** +```bash +REACT_APP_API_BASE_URL=https://api.octofit.example.com ``` -https://${REACT_APP_CODESPACE_NAME}-8000.app.github.dev/api/ + +## API Integration + +The frontend uses a centralized API configuration located in `src/config/api.js`. This ensures consistent API URL handling across all components. + +### API Configuration + +```javascript +import { getApiUrl } from './config/api'; + +// Use the helper function to build API URLs +const apiUrl = getApiUrl('/api/users/'); ``` +The API base URL is automatically determined based on your environment configuration (see Environment Variables section above). + ### API Endpoints - `/api/users/` - User management @@ -92,8 +131,11 @@ If you see CORS errors or connection failures: 1. Ensure the Django backend is running on port 8000 2. Check that CORS is properly configured in Django settings -3. Verify the `REACT_APP_CODESPACE_NAME` environment variable is set correctly -4. Check browser console for detailed error messages +3. Verify your environment variables are set correctly: + - For local dev: `REACT_APP_API_BASE_URL=http://localhost:8000` + - For Codespaces: `REACT_APP_CODESPACE_NAME` should be set +4. Check the browser console for the actual API URL being used +5. Ensure the API base URL is accessible from your browser ### Component Data Not Loading From 3323e53c7a819d62493dfea3acd6dc58c91ef836 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 11 Feb 2026 19:33:43 +0000 Subject: [PATCH 4/4] fix: Comment out REACT_APP_CODESPACE_NAME in .env to avoid confusion When both REACT_APP_API_BASE_URL and REACT_APP_CODESPACE_NAME are set, only the first is used due to priority. Commenting out the Codespaces variable to make it clear that the localhost config is active. Co-authored-by: pmca31 <6774003+pmca31@users.noreply.github.com> --- octofit-tracker/frontend/.env | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/octofit-tracker/frontend/.env b/octofit-tracker/frontend/.env index 0b723d1..36ee7ba 100644 --- a/octofit-tracker/frontend/.env +++ b/octofit-tracker/frontend/.env @@ -7,8 +7,5 @@ # For local development (recommended): REACT_APP_API_BASE_URL=http://localhost:8000 -# For GitHub Codespaces (optional - auto-detected): -# REACT_APP_CODESPACE_NAME=your-codespace-name - -# Legacy support: You can still use REACT_APP_CODESPACE_NAME if needed -REACT_APP_CODESPACE_NAME=bug-free-goldfish-pqgxwp57wvc6q9q +# For GitHub Codespaces (uncomment and set when in Codespaces): +# REACT_APP_CODESPACE_NAME=bug-free-goldfish-pqgxwp57wvc6q9q