Skip to content

Fix Netlify Deploy Preview Connection Issues Permanently (Issue #273)#274

Open
Om7035 wants to merge 3 commits into
QuoteVote:mainfrom
Om7035:fix/netlify-preview-api-url-273
Open

Fix Netlify Deploy Preview Connection Issues Permanently (Issue #273)#274
Om7035 wants to merge 3 commits into
QuoteVote:mainfrom
Om7035:fix/netlify-preview-api-url-273

Conversation

@Om7035
Copy link
Copy Markdown
Collaborator

@Om7035 Om7035 commented Nov 21, 2025

Root Cause

The "Connection Refused" error on Netlify Deploy Previews was caused by:

  1. Unstable URL Guessing: The frontend tried to guess the backend URL using regex (pr-{number}), which failed when the Railway PR environment wasn't available.
  2. Localhost Leakage: When guessing failed, the app often fell back to localhost defaults, causing connection errors on remote Netlify deployments.
  3. Missing Env Var: The REACT_APP_API_URL variable wasn't consistently available or prioritized in the build.

Permanent Fix Strategy

We have moved from "guessing" to Explicit Configuration:

  1. Standardized on REACT_APP_API_URL: This is now the single source of truth.
  2. Infrastructure-as-Code (netlify.toml): Added a default REACT_APP_API_URL = "https://api.quote.vote/graphql" to the build environment. This ensures every deploy (including previews) has a working backend connection to Production by default.
  3. Robust Logic (getServerUrl.js):
    • Removed all regex/PR-guessing logic.
    • Prioritizes REACT_APP_API_URL.
    • Includes a safety check to force fallback to Production if localhost is detected on a remote environment.

Files Changed

  • netlify.toml: Added default REACT_APP_API_URL.
  • client/src/utils/getServerUrl.js: Rewrote URL resolution logic.
  • client/vite.config.js: Exposed REACT_APP_API_URL to the client bundle.

Manual Testing

  • Local Dev: Verified that .env values (localhost) are still respected (via REACT_APP_API_URL or legacy REACT_APP_SERVER).
  • Build: Verified vite.config.js syntax is valid.
  • Netlify Scenario: The netlify.toml change guarantees that even without a specific PR backend, the app will connect to https://api.quote.vote, solving the "Connection Refused" error.

Assumptions

  • The production API is accessible at https://api.quote.vote.
  • Connecting to the Production API for previews is acceptable behavior when a dedicated PR backend is unavailable.

Fixes #273

…uoteVote#273)

- Standardized backend URL using REACT_APP_API_URL env var
- Updated netlify.toml to default REACT_APP_API_URL to production
- Cleaned up getServerUrl.js to remove regex guessing and enforce env var priority
- Exposed REACT_APP_API_URL in vite.config.js
@netlify
Copy link
Copy Markdown

netlify Bot commented Nov 21, 2025

Deploy Preview for quotevote ready!

Name Link
🔨 Latest commit cc03a0d
🔍 Latest deploy log https://app.netlify.com/projects/quotevote/deploys/6920985189c68b000720565d
😎 Deploy Preview https://deploy-preview-274--quotevote.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

…t statement

- Fixed 'import' and 'export' may only appear at the top level error
- Restored complete URL resolution logic with Netlify deploy preview support
- Ensured all export statements are at the top level
- Added proper environment variable handling for REACT_APP_SERVER and REACT_APP_API_URL
- Improved error handling for localhost API URLs in remote environments
@Om7035 Om7035 force-pushed the fix/netlify-preview-api-url-273 branch from 165afa4 to 8d4d408 Compare November 21, 2025 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix Netlify Deploy Preview Connection Issues Permanently

1 participant