Setup
Prerequisites
To follow this guide, it is expected you have node
, pnpm
and sfdx
installed as well as a SFDX Project setup with a valid lwc.config.json
file.
-
Install the package
Run the following command in your terminal from the root of your SFDX Project to install LWC Garden:
Terminal window pnpm add @lwc-garden/core tsxTerminal window npm install @lwc-garden/core tsxTerminal window yarn add @lwc-garden/core tsx -
Create a
garden.config.ts
fileimport { GardenConfig } from '@lwc-garden/core/types'import lwrConfig from './lwr.config.json' with { type: 'json' }export default {// lwc.config.json modules typemodules: [...lwrConfig.lwc.modules],} satisfies GardenConfigYou may also choose to use a vanilla JavaScript config file,
garden.config.js
, but it is highly recommended to use TypeScript for proper config typing support. Here is an example of a basic JavaScript config setup:import lwrConfig from './lwr.config.json' with { type: 'json' }/*** @type {import('@lwc-garden/core/types').GardenConfig}*/const CONFIG = {// lwc.config.json modules typemodules: [...lwrConfig.lwc.modules],}export default CONFIGThis is the bare minimum configuration required to get LWC Garden working. This imports your module configuration from your existing
lwc.config.json
file.Don’t forget to add the
garden
config to yourlwr.config.json
file:lwr.config.json {"lwc": {"modules": [{"dir": "./.garden/components","namespace": "garden"},{"dir": "./force-app/main/default/lwc","namespace": "c"}]},"moduleProviders": ["@lwrjs/label-module-provider","@lwrjs/app-service/moduleProvider","@lukethacoder/lwrjs-lwc-module-provider","@lwrjs/npm-module-provider"],"routes": [{"id": "app","path": "/","rootComponent": "garden/app","layoutTemplate": "./.garden/layouts/index.html","bootstrap": {"syntheticShadow": true}}]} -
Run the local dev server
When working locally, the development server lets you preview your work and automatically refreshes your browser when you make changes.
Run the following from the root of your SFDX Project:
Terminal window npx @lwc-garden/core devThis will log a message to your terminal with the URL of your local preview. Open this URL to start browsing your LWCs.