# Configurable API Base Url

> Configurable API Base URL (Frontend)

- Skill: `pmarashian/configurable-api-base-url` (Agent Skill)
- Install (CLI): `npx skillmds@latest add pmarashian/configurable-api-base-url`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pmarashian/configurable-api-base-url/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: pmarashian (https://skillmd.com/u/pmarashian)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/pmarashian/configurable-api-base-url

---


# Configurable API Base URL (Frontend)

Use a **single source of truth** for the API base URL in the frontend so port/host changes don't require editing many files.

## Steps

1. **Add** `VITE_API_URL` (or equivalent) to **`.env.example`** with a placeholder (e.g. `http://localhost:3000`).
2. **Create a shared client** (e.g. `src/utils/api.ts` or `api.ts`) that uses `import.meta.env.VITE_API_URL` for the base URL.
3. **Replace** direct `fetch`/axios calls with this client so all requests go through one place.
4. **Do not create or modify `.env`** in the repo. Document that users should copy `.env.example` to `.env` for local use.

## Do Not

- Hardcode the host/port in multiple files.
- Create or commit `.env` (only `.env.example` and docs).

## Integration

- Works with `environment-files` skill (no `.env` in repo, only `.env.example`).