Environment Variables in JSandy

JSandy supports multiple deployment targets such as Cloudflare Workers, Vercel, Netlify, and more. This guide will help you set up environment variables correctly based on your deployment platform.

JSandy supports full environment variable type-safety:

import { jsandy } from "@jsandy/rpc"

interface Env {
  Bindings: { DATABASE_URL: string }
}

export const j = jsandy.init<Env>()

/**
 * Public (unauthenticated) procedures
 * This is the base part you use to create new procedures.
 */
export const publicProcedure = j.procedure

Node.js (Vercel, Netlify, etc.)

If you deploy JSandy in a Node.js environment (e.g., Vercel, Netlify), both the frontend and the backend will run on Node.js. You can access environment variables anywhere using process.env.

1. Local development

   DATABASE_URL=your-database-url

2. Accessing variables

   // Works everywhere (frontend & backend)
   const DATABASE_URL = process.env.DATABASE_URL

Cloudflare Workers

When using Cloudflare Workers (either locally with wrangler dev or in production), you'll need to use Cloudflare's environment variable system:

1. Local development

   DATABASE_URL=your-database-url

2. Accessing variables

   // Frontend (client & server components)
   const DATABASE_URL = process.env.DATABASE_URL

   // Backend (API)
   import { env } from "hono/adapter"
   import { j } from "@jsandy/rpc"
   
   export const postRouter = j.router({
     recent: j.procedure.get(({ c }) => {
       const { DATABASE_URL } = env(c)
     }),
   })