App Configuration

Configure app name, site sections, themes, and organization settings.

The app configuration file (config/app.config.ts) contains application-wide settings including the app name, site sections, theme configuration, and organization settings.

Configuration File

config/app.config.ts

import { getBaseUrl } from '@/lib/utils';

export const appConfig = {
  appName: 'Acme',
  description: `Acme's description`,
  baseUrl: getBaseUrl(),
  // Contact information (displayed on contact page)
  contact: {
    enabled: true,
    email: 'hello@yourdomain.com',
    phone: '(123) 456-7890',
    address: '123 Main St, San Francisco, CA'
  },
  // Site sections - enable/disable major parts of the site
  site: {
    // Marketing website (landing page, blog, docs, etc.)
    // When disabled, all marketing routes redirect to /dashboard
    marketing: {
      enabled: true
    },
    // SaaS application (dashboard, auth, etc.)
    // When disabled, all /dashboard and /auth routes redirect to marketing homepage
    saas: {
      enabled: true
    }
  },
  // Theme configuration
  theme: {
    // Default theme for new users: "light", "dark", or "system"
    default: 'system' as const,
    // Available themes users can choose from
    available: ['light', 'dark'] as const
  },
  // Organization settings
  organizations: {
    // Allow regular users to create organizations
    // When false, only admins can create organizations
    allowUserCreation: true
  },
  // Pagination defaults
  pagination: {
    // Default page size for lists
    defaultLimit: 20,
    // Maximum allowed page size
    maxLimit: 100
  }
} satisfies AppConfig;

Configuration Options

App Information

appName: The name of your application, displayed throughout the UI
description: A brief description of your application
baseUrl: The base URL of your application (automatically detected)

Contact Information

The contact object configures contact information displayed on the contact page:

enabled: Whether the contact form is enabled
email: Contact email address
phone: Contact phone number
address: Physical address

Site Sections

The site object controls which parts of your application are enabled:

marketing.enabled: Enable/disable the marketing website (landing page, blog, docs)
- When disabled, all marketing routes redirect to /dashboard
saas.enabled: Enable/disable the SaaS application (dashboard, auth)
- When disabled, all /dashboard and /auth routes redirect to marketing homepage

Theme Configuration

The theme object controls theme settings:

default: Default theme for new users ("light", "dark", or "system")
available: Array of themes users can choose from

Organization Settings

The organizations object controls organization-related features:

allowUserCreation: Whether regular users can create organizations
- When false, only admins can create organizations

Pagination

The pagination object sets default pagination values:

defaultLimit: Default number of items per page
maxLimit: Maximum allowed items per page

Use Cases

Deploy Marketing Site Only

To deploy only the marketing site without the SaaS application:

config/app.config.ts

export const appConfig = {
  // ... other config
  site: {
    marketing: {
      enabled: true
    },
    saas: {
      enabled: false // Disables SaaS routes
    }
  }
};

Deploy SaaS Application Only

To deploy only the SaaS application without the marketing site:

config/app.config.ts

export const appConfig = {
  // ... other config
  site: {
    marketing: {
      enabled: false // Disables marketing routes
    },
    saas: {
      enabled: true
    }
  }
};

Restrict Organization Creation

To allow only admins to create organizations:

config/app.config.ts

export const appConfig = {
  // ... other config
  organizations: {
    allowUserCreation: false // Only admins can create organizations
  }
};

Customize Theme Options

To customize available themes:

config/app.config.ts

export const appConfig = {
  // ... other config
  theme: {
    default: 'dark' as const,
    available: ['light', 'dark', 'system'] as const
  }
};

Type Definitions

The configuration uses TypeScript types for type safety:

config/app.config.ts

export type ContactConfig = {
  enabled: boolean;
  email: string;
  phone: string;
  address: string;
};

export type SiteConfig = {
  marketing: {
    enabled: boolean;
  };
  saas: {
    enabled: boolean;
  };
};

export type ThemeConfig = {
  default: 'light' | 'dark' | 'system';
  available: readonly ('light' | 'dark')[];
};

export type OrganizationsConfig = {
  allowUserCreation: boolean;
};

export type PaginationConfig = {
  defaultLimit: number;
  maxLimit: number;
};

export type AppConfig = {
  appName: string;
  description: string;
  baseUrl: string;
  contact: ContactConfig;
  site: SiteConfig;
  theme: ThemeConfig;
  organizations: OrganizationsConfig;
  pagination: PaginationConfig;
};

Using the Configuration

Import and use the configuration in your code:

components/app-header.tsx

import { appConfig } from "@/config/app.config";

export function AppHeader() {
  return <h1>{appConfig.appName}</h1>;
}

lib/pagination.ts

import { appConfig } from '@/config/app.config';

export function getDefaultLimit() {
  return appConfig.pagination.defaultLimit;
}