Environment Variables in JStack

JStack 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.

JStack supports full environment variable type-safety:

import { jstack } from "jstack"
 
interface Env {
  Bindings: { DATABASE_URL: string }
}
 
export const j = jstack.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 JStack 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

   .env

   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

   .dev.vars

   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 "jstack"
    
   export const postRouter = j.router({
     recent: j.procedure.get(({ c }) => {
       const { DATABASE_URL } = env(c)
     }),
   })