Environment Variables

Configuration guide for all frameworks and deployment platforms.

Required Variables

Variable	Description	Example
ZENDBX_URL	Your ZendBX backend URL	https://api.zendbx.in
ZENDBX_PROJECT_ID	Your project UUID	550e8400-e29b-41d4-a716...
ZENDBX_PROJECT_SLUG	Human-readable project identifier	my-app
ZENDBX_ANON_KEY	Public API key (client-safe)	eyJhbGciOiJIUzI1NiIs...
ZENDBX_SERVICE_KEY	Private API key (server-only)	eyJhbGciOiJIUzI1NiIs...

⚠️Security: Never commit .env files to version control. Add them to .gitignore. Never expose the service key in client-side code.

Framework-Specific Setup

React + Vite

Vite exposes variables prefixed with VITE_ to the client.

bash

# .env.local
VITE_ZENDBX_URL=https://api.zendbx.in
VITE_ZENDBX_PROJECT_ID=your-project-id-uuid
VITE_ZENDBX_PROJECT_SLUG=your-project-slug
VITE_ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

typescript

import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: import.meta.env.VITE_ZENDBX_URL,
  projectId: import.meta.env.VITE_ZENDBX_PROJECT_ID,
  anonKey: import.meta.env.VITE_ZENDBX_ANON_KEY,
})

Next.js

Use NEXT_PUBLIC_ prefix for client-side variables. Server-side variables don't need the prefix.

bash

# .env.local
NEXT_PUBLIC_ZENDBX_URL=https://api.zendbx.in
NEXT_PUBLIC_ZENDBX_PROJECT_ID=your-project-id-uuid
NEXT_PUBLIC_ZENDBX_PROJECT_SLUG=your-project-slug
NEXT_PUBLIC_ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Server-side only (NO NEXT_PUBLIC_ prefix)
ZENDBX_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

typescript

// Client component
export const zendbx = createClient({
  apiUrl: process.env.NEXT_PUBLIC_ZENDBX_URL!,
  projectId: process.env.NEXT_PUBLIC_ZENDBX_PROJECT_ID!,
  anonKey: process.env.NEXT_PUBLIC_ZENDBX_ANON_KEY!,
})

// Server action
const serverClient = createClient({
  apiUrl: process.env.NEXT_PUBLIC_ZENDBX_URL!,
  projectId: process.env.NEXT_PUBLIC_ZENDBX_PROJECT_ID!,
  anonKey: process.env.ZENDBX_SERVICE_KEY!, // Server-side key
})

Vue 3 + Vite

bash

# .env.local
VITE_ZENDBX_URL=https://api.zendbx.in
VITE_ZENDBX_PROJECT_ID=your-project-id-uuid
VITE_ZENDBX_PROJECT_SLUG=your-project-slug
VITE_ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

SvelteKit

Use PUBLIC_ prefix for client-exposed variables.

bash

# .env
PUBLIC_ZENDBX_URL=https://api.zendbx.in
PUBLIC_ZENDBX_PROJECT_ID=your-project-id-uuid
PUBLIC_ZENDBX_PROJECT_SLUG=your-project-slug
PUBLIC_ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Server-side only (NO PUBLIC_ prefix)
ZENDBX_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Node.js / Express

bash

# .env
ZENDBX_URL=https://api.zendbx.in
ZENDBX_PROJECT_ID=your-project-id-uuid
ZENDBX_PROJECT_SLUG=your-project-slug
ZENDBX_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Install dotenv and load at app start:

javascript

import 'dotenv/config'
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: process.env.ZENDBX_URL,
  projectId: process.env.ZENDBX_PROJECT_ID,
  anonKey: process.env.ZENDBX_SERVICE_KEY,
})

Angular

typescript

// environment.ts
export const environment = {
  production: false,
  zendbx: {
    url: 'https://api.zendbx.in',
    projectId: 'your-project-id-uuid',
    projectSlug: 'your-project-slug',
    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
  }
};

Deployment Platforms

Vercel

Add environment variables in the Vercel Dashboard → Settings → Environment Variables.

bash

# Add these in Vercel Dashboard → Settings → Environment Variables
NEXT_PUBLIC_ZENDBX_URL=https://api.zendbx.in
NEXT_PUBLIC_ZENDBX_PROJECT_ID=your-project-id
NEXT_PUBLIC_ZENDBX_ANON_KEY=your-anon-key
ZENDBX_SERVICE_KEY=your-service-key

Netlify

Add to netlify.toml or set in Netlify Dashboard → Site settings → Environment variables.

toml

# netlify.toml
[build.environment]
  VITE_ZENDBX_URL = "https://api.zendbx.in"
  VITE_ZENDBX_PROJECT_ID = "your-project-id"
  VITE_ZENDBX_ANON_KEY = "your-anon-key"

Docker

yaml

# docker-compose.yml
services:
  app:
    environment:
      - ZENDBX_URL=https://api.zendbx.in
      - ZENDBX_PROJECT_ID=${ZENDBX_PROJECT_ID}
      - ZENDBX_SERVICE_KEY=${ZENDBX_SERVICE_KEY}
    env_file:
      - .env

Best Practices

Never commit secrets — Add .env* to .gitignore
Use different keys per environment — Separate development, staging, and production
Rotate keys regularly — Generate new keys every 90 days from the dashboard
Service keys are server-only — Never expose them in client bundles
Use environment-specific URLs — Point to staging backend during development

Validate Configuration

Check that all required variables are set:

typescript

const config = {
  url: process.env.ZENDBX_URL,
  projectId: process.env.ZENDBX_PROJECT_ID,
  anonKey: process.env.ZENDBX_ANON_KEY,
}

for (const [key, value] of Object.entries(config)) {
  if (!value) {
    throw new Error(`Missing required env var: ${key}`)
  }
}

console.log('✓ All environment variables configured')

Where to find your credentials

Environment Variables

Configuration guide for all frameworks and deployment platforms.

Required Variables

Variable	Description	Example
ZENDBX_URL	Your ZendBX backend URL	https://api.zendbx.in
ZENDBX_PROJECT_ID	Your project UUID	550e8400-e29b-41d4-a716...
ZENDBX_PROJECT_SLUG	Human-readable project identifier	my-app
ZENDBX_ANON_KEY	Public API key (client-safe)	eyJhbGciOiJIUzI1NiIs...
ZENDBX_SERVICE_KEY	Private API key (server-only)	eyJhbGciOiJIUzI1NiIs...

⚠️Security: Never commit .env files to version control. Add them to .gitignore. Never expose the service key in client-side code.

Framework-Specific Setup

React + Vite

Vite exposes variables prefixed with VITE_ to the client.

bash

# .env.local
VITE_ZENDBX_URL=https://api.zendbx.in
VITE_ZENDBX_PROJECT_ID=your-project-id-uuid
VITE_ZENDBX_PROJECT_SLUG=your-project-slug
VITE_ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

typescript

import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: import.meta.env.VITE_ZENDBX_URL,
  projectId: import.meta.env.VITE_ZENDBX_PROJECT_ID,
  anonKey: import.meta.env.VITE_ZENDBX_ANON_KEY,
})

Next.js

Use NEXT_PUBLIC_ prefix for client-side variables. Server-side variables don't need the prefix.

bash

# .env.local
NEXT_PUBLIC_ZENDBX_URL=https://api.zendbx.in
NEXT_PUBLIC_ZENDBX_PROJECT_ID=your-project-id-uuid
NEXT_PUBLIC_ZENDBX_PROJECT_SLUG=your-project-slug
NEXT_PUBLIC_ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Server-side only (NO NEXT_PUBLIC_ prefix)
ZENDBX_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

typescript

// Client component
export const zendbx = createClient({
  apiUrl: process.env.NEXT_PUBLIC_ZENDBX_URL!,
  projectId: process.env.NEXT_PUBLIC_ZENDBX_PROJECT_ID!,
  anonKey: process.env.NEXT_PUBLIC_ZENDBX_ANON_KEY!,
})

// Server action
const serverClient = createClient({
  apiUrl: process.env.NEXT_PUBLIC_ZENDBX_URL!,
  projectId: process.env.NEXT_PUBLIC_ZENDBX_PROJECT_ID!,
  anonKey: process.env.ZENDBX_SERVICE_KEY!, // Server-side key
})

Vue 3 + Vite

bash

# .env.local
VITE_ZENDBX_URL=https://api.zendbx.in
VITE_ZENDBX_PROJECT_ID=your-project-id-uuid
VITE_ZENDBX_PROJECT_SLUG=your-project-slug
VITE_ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

SvelteKit

Use PUBLIC_ prefix for client-exposed variables.

bash

# .env
PUBLIC_ZENDBX_URL=https://api.zendbx.in
PUBLIC_ZENDBX_PROJECT_ID=your-project-id-uuid
PUBLIC_ZENDBX_PROJECT_SLUG=your-project-slug
PUBLIC_ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Server-side only (NO PUBLIC_ prefix)
ZENDBX_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Node.js / Express

bash

# .env
ZENDBX_URL=https://api.zendbx.in
ZENDBX_PROJECT_ID=your-project-id-uuid
ZENDBX_PROJECT_SLUG=your-project-slug
ZENDBX_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
ZENDBX_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Install dotenv and load at app start:

javascript

import 'dotenv/config'
import { createClient } from '@zendbx/sdk'

export const zendbx = createClient({
  apiUrl: process.env.ZENDBX_URL,
  projectId: process.env.ZENDBX_PROJECT_ID,
  anonKey: process.env.ZENDBX_SERVICE_KEY,
})

Angular

typescript

// environment.ts
export const environment = {
  production: false,
  zendbx: {
    url: 'https://api.zendbx.in',
    projectId: 'your-project-id-uuid',
    projectSlug: 'your-project-slug',
    anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
  }
};

Deployment Platforms

Vercel

Add environment variables in the Vercel Dashboard → Settings → Environment Variables.

bash

# Add these in Vercel Dashboard → Settings → Environment Variables
NEXT_PUBLIC_ZENDBX_URL=https://api.zendbx.in
NEXT_PUBLIC_ZENDBX_PROJECT_ID=your-project-id
NEXT_PUBLIC_ZENDBX_ANON_KEY=your-anon-key
ZENDBX_SERVICE_KEY=your-service-key

Netlify

Add to netlify.toml or set in Netlify Dashboard → Site settings → Environment variables.

toml

# netlify.toml
[build.environment]
  VITE_ZENDBX_URL = "https://api.zendbx.in"
  VITE_ZENDBX_PROJECT_ID = "your-project-id"
  VITE_ZENDBX_ANON_KEY = "your-anon-key"

Docker

yaml

# docker-compose.yml
services:
  app:
    environment:
      - ZENDBX_URL=https://api.zendbx.in
      - ZENDBX_PROJECT_ID=${ZENDBX_PROJECT_ID}
      - ZENDBX_SERVICE_KEY=${ZENDBX_SERVICE_KEY}
    env_file:
      - .env

Best Practices

Never commit secrets — Add .env* to .gitignore
Use different keys per environment — Separate development, staging, and production
Rotate keys regularly — Generate new keys every 90 days from the dashboard
Service keys are server-only — Never expose them in client bundles
Use environment-specific URLs — Point to staging backend during development

Validate Configuration

Check that all required variables are set:

typescript

const config = {
  url: process.env.ZENDBX_URL,
  projectId: process.env.ZENDBX_PROJECT_ID,
  anonKey: process.env.ZENDBX_ANON_KEY,
}

for (const [key, value] of Object.entries(config)) {
  if (!value) {
    throw new Error(`Missing required env var: ${key}`)
  }
}

console.log('✓ All environment variables configured')

Where to find your credentials