Environment Variables
Configure features and overrides with env values.
Overview
shipkit supports configuring features with environment variables. This is useful when you are shipping a landing page first or running without a database.
Override configuration values
If your project does not have a database configured yet, you can use environment variables to override configuration values that would normally live in the database.
Example: enable Plausible analytics before the database is ready.
- Find the variable names from the configuration list.
- Add the values to your env file.
Environment files:
- Development:
.env.localor.env.development - Production:
.env.production - Cloudflare Workers:
wrangler.toml
# plausible
plausible_domain=my-project.com
plausible_src=https://plausible.io/js/script.file-downloads.hash.outbound-links.pageview-props.revenue.tagged-events.jsVariable names can be uppercase or lowercase:
# plausible
PLAUSIBLE_DOMAIN=my-project.com
PLAUSIBLE_SRC=https://plausible.io/js/script.file-downloads.hash.outbound-links.pageview-props.revenue.tagged-events.jsCustom configuration values
You can also define your own env variables:
# api settings
NEXT_PUBLIC_API_BASE_URL=https://api.my-product.com
API_KEY=xxxxxxRead them with process.env:
// src/app/api/ping/route.ts
export async function GET() {
const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
const apiKey = process.env.API_KEY;
return new Response(`API Base URL: ${apiBaseUrl}, API Key: ${apiKey}`);
}NEXT_PUBLIC_ variables are available in client and server components. Variables
without NEXT_PUBLIC_ are server-only.
'use client';
export function Hero() {
const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
return <div>API Base URL: {apiBaseUrl}</div>;
}Use envConfigs
shipkit defines an envConfigs object in src/config/index.ts.
export const envConfigs = {
app_url: process.env.NEXT_PUBLIC_APP_URL ?? 'http://localhost:3000',
app_name: process.env.NEXT_PUBLIC_APP_NAME ?? 'shipkit',
database_url: process.env.DATABASE_URL ?? '',
database_provider: process.env.DB_PROVIDER ?? 'neon',
db_pool_size: process.env.DB_POOL_SIZE ?? '1',
auth_url: process.env.BETTER_AUTH_URL ?? process.env.NEXT_PUBLIC_APP_URL ?? '',
auth_secret: process.env.BETTER_AUTH_SECRET ?? '',
};Read from envConfigs:
import { envConfigs } from '@/config';
export async function GET() {
const authUrl = envConfigs.auth_url;
return new Response(`Auth URL: ${authUrl}`);
}'use client';
import { envConfigs } from '@/config';
export function Hero() {
const appUrl = envConfigs.app_url;
return <div>App URL: {appUrl}</div>;
}If you change env values in production, restart the app to apply the updates.