Packages and Modules in LWR on Node.js

Do you want to add dependencies to your project? What about customizing module support for your Lightning Web Runtime (LWR) on Node.js app? Read on to discover how.

You can also check out the Configure Your Project page for other configuration options.

Package - A set of files that provides a functionality or feature that you can add to your project. For LWR on Node.js projects, you can add packages using package manager toolchains like npm and Yarn.

Module - After you install a package, the resulting set of copied files inside your project is called a module. All of your modules are stored in the node_modules folder.

Lightning Web Runtime (LWR) on Node.js supports only ECMAScript (ES) and Lightning Web Components (LWC) modules.

Dependency - A reference to a package in your project's package.json file. Each reference tells your project which version of a package to install.

Your Quick Start project’s package.json file looks something like this, with both the lwr and the lwc packages included as dependencies. When you install a package in your project, the project automatically gets added as a dependency in package.json.

LWR projects are standard npm packages, so you can add other project dependencies with typical package manager toolchains such as NPM or Yarn. (The examples that follow use npm, but the general guidance applies equally.)

For example, running the following code on the command line interface (CLI) installs the best-library-ever package.

After you run that command, your project's package.json file changes to include a dependency on the new best-library-ever module.

Finally, you can import the module in your component source code and use it.

Adding a Lightning Web Components (LWC) package as a dependency to your project is different than the general case described in Manage Project Dependencies.

LWC packages are Lightning web components that someone else created and made distributable for reuse. If you’re curious about including an LWC package in your project, search the npm package registry for “LWC” or “Lightning Web Components” and discover what’s on offer. If you're interested in distributing your own Lightning web components, check out Package and Distribute LWC OSS Components (video) or Distribute Your Component Using npm.

To add an LWC package to your project use npm to install the module.

When you run that command, npm adds a dependency on the module to your package.json file.

Next, you have to add a directory module record to your LWC configuration in lwr.config.json. If you don't complete this step, your LWC module won't work as expected.

The LWC documentation has more details on how LWC module resolution works, as does this blog post.

You can add module records to lwr.config.json from any of these sources:

  • Alias module record: A file path where a module can be resolved.
  • Directory module record: A folder path where modules can be resolved.
  • npm package module record: An npm package that exposes one or more modules.

Here's an example of module records in a config file. The order of the array matters. LWR iterates through the modules array and uses the first module that matches the requested module specifier.

Modules are located and served by module providers. Your project's LWR server contains a module registry, which maintains a list of available module providers and helps match module requests to the appropriate module provider.

To learn more about how to create and use module providers, read Module Providers for Lightning Web Runtime on Node.js.