Environment Variables
Environment variables let you configure your frontend without hardcoding values in your source code. Use them for API URLs, public keys (Stripe publishable, Google Maps, etc.), feature flags, and anything that changes between projects or environments.
The Variables page (Ship → Frontend → Variables, route /variables) has two tabs:
- Backend Secrets (default tab) — encrypted runtime secrets referenced by name in your endpoints and workflows. Never shipped to the browser. See Backend Secrets.
- Frontend (Build) — the public build-time env vars on this page, baked into your client bundle.
Frontend (Build) variables are public
Frontend (Build) env vars are bundled into your build and shipped to the browser. Never put secrets here — no private API keys, no database credentials, no JWT secrets. For runtime secrets use Backend Secrets; for typed third-party keys use Credentials.
Add variables
Open the Variables tab
In your project dashboard, go to Frontend → Variables and switch to the Frontend (Build) tab.
Add key-value pairs
Click Add variable. Enter the key (for example VITE_STRIPE_KEY) and the value. Most frameworks require a specific prefix — see the table below.
Redeploy
Env vars are baked in at build time. Click Redeploy (or trigger a new deploy from your IDE) to apply changes.
Required prefix by framework
Your framework only exposes env vars with a specific prefix to the browser. This prevents accidentally leaking backend variables.
| Parameter | Type | Description |
|---|---|---|
Vite / Vue / SvelteKit | VITE_* | Accessed as import.meta.env.VITE_MY_KEY in your code |
Create React App | REACT_APP_* | Accessed as process.env.REACT_APP_MY_KEY |
Next.js (client) | NEXT_PUBLIC_* | Accessed as process.env.NEXT_PUBLIC_MY_KEY |
Astro | PUBLIC_* | Accessed as import.meta.env.PUBLIC_MY_KEY |
Variables without the correct prefix are not included in the build — they'll be undefined in the browser.
Automatic variables
HeroMate sets a few variables for you automatically. You don't need to add these manually:
| Variable | Value |
|---|---|
VITE_DYPAI_URL | Your project's API base URL |
VITE_DYPAI_PROJECT_ID | Your project UUID |
The @dypai-ai/client-sdk reads these automatically when you call createClient().
Typical setup
# API endpoints and public keys
VITE_STRIPE_PUBLISHABLE_KEY=pk_live_...
VITE_GOOGLE_MAPS_KEY=AIza...
VITE_POSTHOG_KEY=phc_...
# Feature flags
VITE_ENABLE_BETA_DASHBOARD=true
# Third-party URLs
VITE_SUPPORT_URL=https://help.yourapp.com
Then in your code:
const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY
const mapsKey = import.meta.env.VITE_GOOGLE_MAPS_KEY
Edit or delete variables
- Edit: Click the pencil icon next to a variable, change the value, save. Redeploy to apply.
- Delete: Click the trash icon. The variable is removed on the next deploy.
Three places for configuration
HeroMate has three distinct stores. Pick the right one for each value:
| Store | Where | Visibility | Use it for |
|---|---|---|---|
| Frontend (Build) vars | Frontend → Variables → Frontend (Build) | Public — baked into the browser bundle | API base URL, public keys (pk_), feature flags |
| Backend Secrets | Frontend → Variables → Backend Secrets | Private — encrypted, never shipped to the browser | Runtime secrets by name, read in endpoints as ctx.secrets.X / ${ secrets.X } |
| Credentials | Build → Credentials | Private — encrypted, typed | Third-party provider keys (Stripe sk_, OpenAI, Slack…) used by integration nodes |
The Code node uses env_vars, not Credentials
The javascript_code workflow node reads its own plaintext env_vars via ctx.env — it cannot select typed Credentials. For sensitive runtime values, prefer Backend Secrets.
Limits
- Keys must be
UPPER_SNAKE_CASE - Frontend (Build) values are exposed in the client bundle at build time — never put secrets here
- Backend Secrets are encrypted with Fernet, write-only, and never shipped to the browser — use them for anything sensitive
Where NOT to use env vars
| Type of value | Put it in… |
|---|---|
| Public API key (Stripe pk_, Google Maps, PostHog) | ✅ Frontend (Build) var |
| API base URL | ✅ Frontend (Build) var |
| Feature flag | ✅ Frontend (Build) var |
| Stripe secret key (sk_) | ❌ Credentials |
| Generic runtime secret (webhook signing key, internal token) | ❌ Backend Secrets |
| Database password | ❌ Never needed — HeroMate handles this |
| OpenAI API key | ❌ Credentials (used by the Agent node) |
| JWT signing secret | ❌ Never needed — HeroMate handles this |