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/coreTerminal window npm install @lwc-garden/coreTerminal window yarn add @lwc-garden/core -
Create a
garden.config.js
fileimport lwrConfig from './lwr.config.json' assert { 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.