Skip to content

Configuration

The following is a reference of all available values for the garden.config.js file.

If you are looking for component level configuration, checkout Component Configuration.

garden.config.js
import lwrConfig from './lwr.config.json' assert { type: 'json' }
/**
* @type {import('@lwc-garden/core/types').GardenConfig}
*/
const CONFIG = {
// lwr.config.json modules type
modules: [...lwrConfig.lwc.modules],
}
export default CONFIG

modules

type: ModuleRecord[]

Module records, usually pulled from your lwc.config.json file.

rootDir

type: string

Define the root directory to run your project. Optional, will default to process.cwd() (current directory).

ignore

type: string[]

Array of minimatch strings to exclude from the LWC Garden local dev server.

theme

type: GardenTheme

Configuration to adjust the theme. You may choose to bring your own theme or use one of the default themes.

Themes can be imported from:

import THEME_ROSE from '@lwc-garden/core/themes/THEME_NAME.js'

Available default themes:

  • green (default)
  • blue
  • orange
  • rose
  • yellow
  • zinc

GardenTheme

export interface GardenTheme {
light?: GardenThemeProperties
dark?: GardenThemeProperties
}
export interface GardenThemeProperties {
'font-family'?: string
'container-background'?: string
background?: string
foreground?: string
card?: string
'card-foreground'?: string
popover?: string
'popover-foreground'?: string
primary?: string
'primary-foreground'?: string
secondary?: string
'secondary-foreground'?: string
muted?: string
'muted-foreground'?: string
accent?: string
'accent-foreground'?: string
destructive?: string
'destructive-foreground'?: string
border?: string
input?: string
ring?: string
radius?: string
'dialog-background'?: string
'dialog-background-alpha'?: string
}

args

type: GardenArgsConfig

Args currently only contains one property, cache.

When enabled, arg values that are set on components will be cached to localStorage. This is true by default, but can be disabled by passing args.cache = false.

GardenArgsConfig

interface GardenArgsConfig {
cache?: boolean
}

slots

type: GardenSlotsConfig

placeholder

When true, will set children on <slot/>s when found in the HTML markup of your LWCs. Mark as false to disable.

components

Configuration object of components to use for their respective slot names. e.g.

const components = {
default: () => import('example/button'),
slot1: () => import('example/clock'),
slot2: () => import('example/button'),
}

NOTE: default is used to fill non-named slots.

GardenSlotsConfig

export interface GardenSlotsConfig {
/**
* @type {Boolean}[true] - Should slots have their children set
*/
placeholder?: boolean
/**
* Key/value object of slot names and dynamic imports to fill the slots.
* @example {
* default: () => import('test/button'),
* slot1: () => import('test/clock'),
* slot2: () => import('test/button'),
* }
*/
components?: {
[key: string]: () => Promise<any>
}
}

port

type: number

Port to run the local dev server on. Defaults to 3333

lwc

type: GardenLwcConfig

GardenLwcConfig

export interface GardenLwcConfig {
/**
* When enabled, will load SLDS
* @type {Boolean}[false] - Should '@salesforce-ux/design-system' assets be loaded
*/
enableSlds?: boolean
}