Environment Variables in Shapeless

Shapeless supports environment variables in both Node.js environments (like Vercel or Netlify) and Cloudflare Workers. This guide explains how to configure and access them correctly depending on your target.

We also provide full type-safety when working with environment bindings:

server/shapeless.ts

import { shapeless } from "@shapelesss/core"
 
interface Env {
  Bindings: { DATABASE_URL: string }
}
 
export const app = shapeless.init<Env>()

🔧 Node.js Environments (Vercel, Netlify, etc.)

If you’re deploying your app in a Node.js-based environment, like Vercel or Netlify:

1. Local Setup

Create a .env file in your project root:

DATABASE_URL=your-database-url

2. Accessing Variables

You can access them anywhere (client, server, or API):

const db = process.env.DATABASE_URL

There’s no special setup required — this is standard process.env.


☁️ Cloudflare Workers

When running on Cloudflare (using pnpm cf:preview or pnpm cf:deploy), you'll need to define and access variables using Wrangler and hono/adapter.

1. Declare Local Vars

Create a .dev.vars file in your project root:

DATABASE_URL=your-database-url
pnpm cf:gen

This generates cloudflare-env.d.ts using the schema defined in your wrangler.toml or wrangler.json.

3. Accessing in Backend Code

Use env() from Hono:

routers/post-router.ts

import { env } from "hono/adapter"
import { app } from "../shapeless"
 
export const postRouter = app.router({
  recent: app.procedure.get(({ c }) => {
    const { DATABASE_URL } = env(c)
    // Use your database here
  }),
})

This ensures full type safety and access to Cloudflare's runtime bindings like D1 or R2.


✅ Summary

TargetHow to DefineHow to Access
Vercel / Netlify (Node.js).env fileprocess.env
Cloudflare Workers.dev.vars + Wrangler config

env(c) from hono/adapter


For full Cloudflare support, make sure your wrangler.json includes bindings for D1, R2, or other secrets, and that you run pnpm cf:gen to keep types in sync.