Use Base Lightning Web Components with LWR on Node.js

Use base Lightning web components with your LWR application by setting up the lightning-base-components package.

Include the Salesforce Lightning Design System ("SLDS") with your app before setting up your app for base Lightning web components.

Before you begin, make sure you have already set up SLDS with your app.

To use base Lightning web components in an LWR application:

  1. Create a dependency on lightning-base-components by adding it to a devDependencies section in package.json:
  1. Make the lightning-base-components npm package available to your LWR app in lwr.config.json:

  1. If you’re creating your own layout template, include the lwr_resources context object property. (If you’re not creating your own layout template, LWR creates a default template for you that already includes lwr_resources.)

  2. Start using base Lightning web components!

Run the following terminal commands from the root of your project:

Open the site at http://localhost:3000. Read Get Started with LWR for details on LWR's Yarn commands.