Lightning Component Mocking

If you havn’t already, make sure to checkout Lightning Base Components (LWC Garden) as the components you wish to use locally may already be supported. This section is for building your own lightning-* components that are not currently officially supported by Salesforce for local development.

Before jumping into building lightning components, we need to edit our modules configuration in our lwr.config.json file.

lwr.config.json

{
  "lwc": {
    "modules": [
      { "dirs": "lightning-base-components" },
      {
        "dirs": [
          "./lightning",
          "./node_modules/lightning-base-components/src/lightning"
        ],
        "namespace": "lightning"
      },
    ]
  },
  "moduleProviders": [],
  "assets": [],
  "routes": []
}

Note

This is using @lukethacoder/lwc-module-resolver and @lukethacoder/lwrjs-lwc-module-provider under the hood to add multi-directory and namespace support. You can read more here.

Adding an array of dirs allows us to provide a set of components with the same (lightning) namespace.