Issue with building SPA (Single Page Application) on LWR (Lightning Web Runtime) with LWC base components

lightninglightning-web-componentslightning-web-runtimelwr

I'm building a Single Page Application on LWR by utilising Base Lightning Web Components, I followed following threads to understand the process and all-

But it didn't work for me, Here is my project details:

Project Structure

enter image description here

package.json file
{
  "name": "lwr-my-app",
  "version": "0.0.1",
  "license": "MIT",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "node ./scripts/copy-slds.mjs",
    "clean": "rm -rf __lwr_cache__",
    "dev": "lwr serve",
    "start": "lwr serve --mode prod",
    "start:compat": "lwr serve --mode compat",
    "start:prod-compat": "lwr serve --mode prod-compat"
  },
  "dependencies": {
    "@salesforce-ux/design-system": "^2.17.5",
    "cpx": "^1.5.0",
    "lightning-base-components": "^1.15.4-alpha",
    "lwc": "2.17.0",
    "lwr": "0.7.3"
  },
  "engines": {
    "node": ">=14.15.4 <19"
  }
}
lwr.config.json file
{
    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" },{ "npm": "lightning-base-components" }] },
    "routes": [
        {
            "id": "example",
            "path": "/",
            "rootComponent": "example/app",
            "bootstrap": {
                "syntheticShadow": true
            }
        }
    ]
}
app.html and app.js
<!-- app.html -->
<template>
    <main>
        <img src="public/assets/recipes-logo.png" alt="logo" />
        <h1>Hello World!</h1>
    </main>
    <lightning-card  title="Hello">
        <p class="slds-p-horizontal_small">Card Body here</p>
        <p slot="footer">Card Footer</p>
    </lightning-card>
</template>


// app.js
import { LightningElement } from 'lwc';

export default class HelloWorldApp extends LightningElement {}

Currently this is what i see when I load the URL (http://localhost:3000/) in browser:
enter image description here

As you can see the base LWC components are not loaded, if you want to try out and setup the sample project, please follow this link

If you want to clone my project and then directly work on that, click here

Best Answer

I was able to resolve the LWC base components styling issue with LWR SPA. Following things need to add in the SPA project to enable LWC component styling.

Refer Use Salesforce Lightning Design System with LWR on Node.js for more details about this.

In summary following instructions you can perform:

  1. Add a layout template html file in your SPA project, LWR documentation is not very clear about that, also their boilerplate example doesn't include it as well. So create a main.html file and place it in your src\layouts location.
main.html
<!-- src/layouts/main.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
        <title>LWR + SLDS Example</title>
        <link rel="stylesheet" href="$assetsDir/styles/salesforce-lightning-design-system.css" />
    </head>
    <body>
        {{{body}}} {{{lwr_resources}}}
    </body>
</html>
  1. Update your lwr.config.json to include the path for the layout template which you have defined.
lwr.config.json
{
    "lwc": { "modules": [{ "dir": "$rootDir/src/modules" },{ "npm": "lightning-base-components" }] },
    "assets": [
        {
            "alias": "assetsDir",
            "dir": "$rootDir/node_modules/@salesforce-ux/design-system/assets",
            "urlPath": "/assets"
        }
    ],
    "routes": [
        {
            "id": "example",
            "path": "/",
            "rootComponent": "example/app",
            "layoutTemplate": "$layoutsDir/main.html",
            "bootstrap": {
                "syntheticShadow": true
            }
        }
    ]
}

I was able to run the application and LWC base component styling was also applied but then there was some other issue with the LWC base components, whenever I use <lightning-input> tag it throws a run-time exception, I created an another bug for that purpose and referenced it here.

Issue with using LWC base components <lightning-input> with the LWR Single Page Application

Related Topic