Skip to main content
Version: next

clientApiUrl

Resolve a Front-Commerce API route path against the current store's base URL, for browser calls that don't go through the Remix router.

clientApiUrl

Builds the URL of a Front-Commerce API route (/api/* or /__front-commerce/*) for the current store, by prefixing the path with the store's base URL read from the public config. Use it for browser-side calls that can't go through the Remix router — for instance a raw fetch or navigator.sendBeacon in your own components.

On a store served under a base URL suffix (e.g. https://www.example.com/fr-fr), a bare fetch("/api/…") hits the bare origin, gets redirected, and the payload is lost. clientApiUrl prefixes the path so the request reaches the store's own route on the first hop.

import { clientApiUrl } from "@front-commerce/core/client-api";

// empty base URL store (default): "/api/client-logs"
// store served under "/fr-fr": "/fr-fr/api/client-logs"
fetch(clientApiUrl("/api/client-logs"), {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ logs }),
});

The path is typed (`/api/${string}` or `/__front-commerce/${string}`) and validated at runtime: any other prefix throws immediately, so a mistyped endpoint fails loudly at the first call rather than sending a request to a wrong route.

import { clientApiUrl } from "@front-commerce/core/client-api";

clientApiUrl("/logs"); // throws: Invalid FrontCommerce API path

When the store's base URL is empty (the default), clientApiUrl returns the path unchanged — existing integrations keep the exact same behaviour.

ClientApiPath

The template-literal union type accepted by clientApiUrl: `/api/${string}` or `/__front-commerce/${string}`. Import it to type the endpoints your component passes around.