3

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

9
  • 2
    You can see the card is present, but the styling is missing. Try: How to Use Lightning Design System in LWR?.
    – sfdcfox
    Aug 8, 2022 at 8:24
  • @sfdcfox, I checked that thread before, unfortunetly I didn't get one part from this question, why we need to add layoutTemplate in lwr.config.json. It is not a staticSite, it is SPA, so if we need to add this layoutTemplate like the one which is shown in the referenced question, where should I add it and second what should I write, that is confusing. Also another possibility which I see here is may be something is not referenced properly, when I use @track or @wire in the js file, It throws error on load and page is blank. Aug 8, 2022 at 9:31
  • @sfdcfox, I tried rebuilding of the whole project, which resolve that blank page error but it seems something off with the lightning-base-component package, When I use lightning-input it doesn't compile and throw some reference error. Any idea about that or known limitation. I checked with some other base components and it works. Aug 8, 2022 at 11:23
  • 1
    I build a package a while ago, but I haven't used lwr recently, so I'm not sure what the syntax for it today is. If I find a recent example, I'll let you know.
    – sfdcfox
    Aug 8, 2022 at 11:25
  • 1
    Thanks @sfdcfox, also let me share the codebase, that will help someone to understand and try out it. Aug 8, 2022 at 11:29

1 Answer 1

3

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .