---
schema_version: "1"
id: e2658fbdf1560ea019819b97c3fccb28353780aeb79b695b309a6d74c96cebcf
title: Use Lightning Base Components with LWR on Node.js
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwr-node/lwr/guides/lwr-lwc.md
canonical_url: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-lwc.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 960769e05fc02651988ac50ced2ccbc0948786216da7d527a37b1146449cb7e0
products:
  - Lightning Web Runtime
---
# Use Lightning Base Components with LWR on Node.js

**important:** Lightning base components are currently **unavailable** via Node Package Manager (NPM). We're working on bringing them back. Stay tuned for updates.

Lightning base components (https://developer.salesforce.com/docs/component-library/overview/components) are out-of-the-box building blocks for user interfaces like LWR sites. To use base components in your LWR application, set up the [lightning-base-components](https://www.npmjs.com/package/lightning-base-components) package in your project.

## Set up Lightning Base Components

**important:** Before you begin, [**you have to configure the Salesforce Lightning Design System ("SLDS")** with your app](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-slds.md). Base components are built on SLDS.

### 1. Add a lightning-base-components dependency

Open your project's `package.json` file. In `dependencies`, add a dependency for the `lightning-base-components` package. Check [npm: lightning-base-components](https://www.npmjs.com/package/lightning-base-components) for the latest stable version of the package.

```
{
  "dependencies": {
    "lwc": "^6.2.0",
    "lwr": "0.11.13",
    "lightning-base-components": "^1.21.6-alpha"
  }
}
```

### 2. Declare the lightning-base-components package

Open your project's `lwr.config.json` file. To make the `lightning-base-components` npm package available to your LWR app, add an entry for it in the `lwc` module.

```
{
  "lwc": {
    "modules": [{ "npm": "lightning-base-components" }]
  }
}
```

**note:** For more information about what your `lwr.config.json` file does, check out [Understand lwr.config.json](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-configure-project.md#understand-lwrconfigjson).

### 3. Optional: Specify a layout template

If you’re creating your own [layout template](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-templates.md), include the [`lwr_resources`](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-compile-data.md#lwr) context object property in `lwr.config.json`.

If you’re _not_ creating your own layout template, LWR creates a default template for you that already includes `lwr_resources`. You don't have to do anything for this step!

### 4. Pull in Lightning Base Components

Run `npm install` in your terminal to pull the base components from the `lightning-base-components` NPM repo to your project.

Now you can start using base components in your project.

### 5. Run your app

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

```bash
npm run build
npm run start
```

**tip:** Read [Get Started with LWR](https://developer.salesforce.com/docs/platform/lwr/guide/lwr-get-started.md#set-the-lwr-server-modes) for details on LWR's NPM commands.

Open a local preview of your site at http://localhost:3000. If you're already using port 3000 for something else, review your terminal output for the alternative port being used.

## Example: lightning-button

Once you've enabled SLDS and LWC for an LWR app, you can add base components to it. This process requires revising and creating a few more files in your project.

Let's take a look at StaticSite, a simple LWR single-page app (SPA) that contains one [`lightning-button`](https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example) component. Here's what the site looks like in the browser with the developer console open.

![Screenshot of StaticSite with developer console view.](https://developer.salesforce.com/docs/media/example-LBC-site.png)

This is the file structure of the StaticSite project. Certain files had to be updated or created to support the `lightning-button` base component. We'll dig into those changes below.

```
scripts/
  └── copy-slds.mjs
src/
  ├── assets/             // NEW - generated at build time, stores SLDS resources sent from copy-slds.mjs
  ├── layouts/
  │   └── main.njk        // home page structure and link to SLDS stylesheet
  ├── modules/            // NEW - contains component folders
  │   └── example/
  │       └── app/
  │           └── app.css // optional
  │           └── app.html
  │           └── app.js
  │       └── button/
  │           └── button.html
  │           └── button.js
  ├── lwr.config.json     // CHANGED - configures SLDS and Lightning base components
  ├── package.json        // creates dependencies on SLDS and Lightning base components
  └── index.ts            // LWR server startup script
site/                     // NEW - generated at build time
node_modules/
__lwr_cache__/            // NEW - generated at build time
```

### modules/

StaticSite has a `modules` folder that contains the app's components, `button` and `app`.

#### `modules/example/button/`

The button component displayed on StaticSite is descended from the `lightning-button` base component in `node_modules`.

```
import { LightningElement } from 'lwc';

export default class Button extends LightningElement {
  handleClick(event) {
    console.log(`You clicked the "${event.target.label}" button`);
  }
}
```

To customize this button for StaticSite, set properties on the element in `button.html`.

```
<template>
  <lightning-button variant="brand" label="Click Me" title="Primary action" onclick={handleClick}
    class="slds-m-left_x-small"></lightning-button>
</template>
```

#### `modules/example/app/`

The `app` component configures what content renders on the home page. You can optionally have an `app.css` file for styling.

When you reference a component from `modules`, the naming syntax is `<parent folder-component name.>` For example, the StaticSite `button` component is declared in `app.html` as `<example-button>`.

```
<template>
  <main>
    <header>
      <h1 class="slds-text-heading_medium slds-m-bottom_medium">SLDS and Lightning Base Components</h1>
    </header>
    <example-button></example-button>
  </main>
</template>
```

```
import { LightningElement } from 'lwc';

export default class StylesApp extends LightningElement { }
```

### lwr.config.json

The project's config file was updated to include the `dir` module for `lwc` that points to the new `modules` folder. `lwr.config.json` also contains `rootComponent` property in `routes` that points to the new `app` component.

```
{
    "lwc": {
        "modules": [
            {
                "dir": "$rootDir/src/modules"
            },
            {
                "npm": "lightning-base-components"
            }
        ]
    },
    "routes": [
        {
            "id": "Home",
            "path": "/",
            <!-- Changed contentTemplate to rootComponent that points to app folder in modules/example -->
            "rootComponent": "example/app",
            "layoutTemplate": "$layoutsDir/main_layout.njk",
            "bootstrap": {
                "syntheticShadow": true
            }
        }
    ],
    "assets": [
        {
            "alias": "assetsDir",
            "dir": "$rootDir/src/assets",
            "urlPath": "/public/assets"
        },
        {
            "alias": "favicon",
            "file": "$rootDir/src/assets/favicon.ico",
            "urlPath": "/favicon.ico"
        },
        {
            "file": "$rootDir/src/assets/utilitySprite.svg",
            "urlPath": "/lightning.utilitySprite"
        }
    ]
}
```

### Content Generated at Build Time

After StaticSite gets built, LWR adds the following automatically generated files to the project.

- `node_modules`
  - Contains packages corresponding to project dependencies (like `@salesforce-ux` and `lightning-base-components`).
- `site`
  - Files generated by the `build` command.
- `__lwr_cache__`
  - Assets and modules generated by the `build` command.