Skip to main content

​
Config file

// veryfront.config.ts
import { defineConfig } from "veryfront";

export default defineConfig({
  title: "My App",
  description: "A Veryfront application",
});
defineConfig provides TypeScript autocompletion but doesn’t transform the config. It’s a pass-through for type safety.

​
Options

​
Project metadata

defineConfig({
  projectSlug: "my-app",         // Project identifier
  title: "My App",               // Default page title
  description: "A great app",    // Default meta description
});

​
Directories

Override the default directory conventions: 
defineConfig({
  directories: {
    app: "src/app",              // Override page/route directory
  },
});

​
Router mode

defineConfig({
  router: "app",    // "app" (default) | "pages"
});

​
Build

defineConfig({
  build: {
    outDir: "dist",              // Output directory
    trailingSlash: false,        // Add trailing slashes to URLs
  },
});

​
Layout

defineConfig({
  layout: "components/layout.tsx",  // Custom layout path
  // layout: false,                 // Disable layout
});

​
React version

defineConfig({
  react: {
    version: "19.1.1",           // Override detected React version
  },
});

​
Experimental features

defineConfig({
  experimental: {
    rsc: true,                   // React Server Components
    precompileMDX: true,         // Pre-compile MDX at build time
  },
});

​
Environment variables

Set environment variables in .env files or your deployment platform:

​
Provider API keys

VariableDescription
OPENAI_API_KEYOpenAI API key
ANTHROPIC_API_KEYAnthropic API key
GOOGLE_API_KEYGoogle AI API key

​
Framework

VariableDescription
PORTServer port (default: 3000)
NODE_ENVdevelopment, production, or test
REDIS_URLRedis connection URL

​
Observability

VariableDescription
OTEL_ENABLEDEnable OpenTelemetry tracing
OTEL_ENDPOINTOpenTelemetry collector endpoint
OTEL_SERVICE_NAMEService name for traces

​
Environment-based config

Use getEnv to read environment variables inside your config: 
import { defineConfig, getEnv } from "veryfront";

const isProd = getEnv("NODE_ENV") === "production";

export default defineConfig({
  title: isProd ? "My App" : "My App (Dev)",
  build: {
    outDir: isProd ? "dist" : ".dev",
  },
});

​
Reading config at runtime

The framework reads veryfront.config.ts automatically. Your config values are available to the build system and dev server. Pages and API routes access config indirectly through the features it enables (port, build output, router mode, etc.).

​
Next