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-
- Use Base Lightning Web Components with LWR on Node.js
- Use Salesforce Lightning Design System with LWR on Node.js
But it didn't work for me, Here is my project details:
Project Structure
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:
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:
main.html
file and place it in yoursrc\layouts
location.main.html
lwr.config.json
to include the path for the layout template which you have defined.lwr.config.json
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