Local Development
Themes are just frontend apps, but they still need two things to load real data:- which shop to load (
VITE_SHOP_SLUG) - which API base URL to call (
VITE_API_BASE_URL)
If you do not run a backend locally, set
VITE_API_BASE_URL=https://api.shoppex.io. Otherwise localhost will often fall back to http://localhost:3001.Environment Variables
| Variable | When to use | Example |
|---|---|---|
VITE_SHOP_SLUG | Always in local dev | acme |
VITE_API_BASE_URL | If you do not run the backend locally | https://api.shoppex.io |
VITE_USE_MSW | If you want mock data | true |
Recommended Presets
- Public API
- MSW Mocks
- Local Backend
Common Mistake: Localhost Calls http://localhost:3001
In the reference theme, the runtime logic is:
- if the theme runs on a production host, it uses
https://api.shoppex.io - if the theme runs on
localhost, it usesVITE_API_BASE_URLor falls back tohttp://localhost:3001
VITE_API_BASE_URL, it may try to call http://localhost:3001.
Fix:
How Shop Slug Is Resolved
The reference theme resolves the shop slug like this (simplified):- If
VITE_SHOP_SLUGis set (and you are onlocalhost), use that. - If the host is
{shop}.myshoppex.io, derive{shop}from the hostname. - If it is a custom domain, call the API to resolve the shop by domain.
VITE_SHOP_SLUG.
Source
Reference implementation:themes/default/src/main.tsx