Did you know that several parts of the tools you’re using on the Salesforce Platform are open source? That you can create a LWR Community using Lightning Base Components and Lightning Design System and host it wherever you want? That you can benefit from new features being part of LWC but not yet available on the Platform like Light-DOM or dynamic components creation? And that some of your existing components can be reused quite easily? If not, come and see how powerful Lightning Web Components Open Source are!

1. Build your apps everywhere with Lightning
Web Components Open Source
by Fabien Taillon

2. #CD22
Fabien Taillon
- 7x Salesforce MVP
- CTO at Texeï
- Paris Developer Group leader
- French Touch Dreamin team
- Serial speaker
- Not so serial blogger
@FabienTaillon
https://texei.com/blog

3. #CD22
● What’s Open Sourced at Salesforce
● What’s available as a public package
● What can be done
● Let’s build something with Lightning Web Runtime
● Demo
● Differences between OSS & Platform
Agenda

4. #CD22
A whole site dedicated to OSS (open source software):
https://opensource.salesforce.com
Some OSS Projects:
● Lightning Web Components
● Salesforce Extensions for VS Code
● Salesforce Lightning Design System
● oclif
● TransmogrifAI (automated machine learning)
● …
Not something new, Aura was already open source.
What’s Open Sourced at Salesforce

5. #CD22
Some other projects are not open sourced, but available as packages
(npm) for us to use:
● Lightning Web Runtime
● Lightning Base Components
● …
What’s available as a public package

6. #CD22
Benefit from all publicly available resources to build your own application
locally, hosted wherever you want:
● Lightning Web Runtime
● Lightning Web Components
● Salesforce Lightning Design System
● Lightning Base Components
What can be done

7. #CD22
Benefit from all publicly available resources to build your own application
locally, hosted wherever you want:
● Lightning Web Runtime
● Lightning Web Components
● Salesforce Lightning Design System
● Lightning Base Components
● Custom @wire api
What can be done

8. #CD22
Benefit from all publicly available resources to build your own application
locally, hosted wherever you want:
● Lightning Web Runtime
● Lightning Web Components
● Salesforce Lightning Design System
● Lightning Base Components
● Custom @wire api
● Use Lightning Navigation Service
What can be done

9. #CD22
Benefit from all publicly available resources to build your own application
locally, hosted wherever you want:
● Lightning Web Runtime
● Lightning Web Components
● Salesforce Lightning Design System
● Lightning Base Components
● Custom @wire api
● Use Lightning Navigation Service
● Use OSS first/only features (Light DOM, dynamic component creation)
What can be done

10. #CD22
Benefit from all publicly available resources to build your own application
locally, hosted wherever you want:
● Lightning Web Runtime
● Lightning Web Components
● Salesforce Lightning Design System
● Lightning Base Components
● Custom @wire api
● Use Lightning Navigation Service
● Use OSS first/only features (Light DOM, dynamic component creation)
● Any tool of your choice (Rollup, webpack, TypeScript…)
What can be done

11. #CD22
● LWR is a runtime built with performance in mind
● Loads modules/services, like routing
● Used by the latest Experience Cloud templates
● Configurable via lwr.config.json
Easy to start with: npm init lwr
https://developer.salesforce.com/docs/platform/lwr/overview
Let’s build something with Lightning Web Runtime

12. #CD22
● npm install @salesforce-ux/design-system
● Copy
node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-
design-system.min.css
to
assets/styles/salesforce-lightning-design-system.min.css
(or script it)
Add SLDS

13. #CD22
● Create src/layouts/main.html
○ see template here: https://developer.salesforce.com/docs/platform/lwr/guide/lwr-slds.html
● Add stylesheet link
https://developer.salesforce.com/docs/platform/lwr/guide/lwr-slds.html
Add SLDS

14. #CD22
Add synthetic shadow to lwr.config.json
SLDS needs Synthetic Shadow

15. #CD22
● npm install lightning-base-components
● Add "npm": "lightning-base-components" to lwr.config.json
Add Lightning Base Components

16. #CD22
Add routes to lwr.config.json
Server-side Routing

17. #CD22
Add routes in main app, and define
handler function:
Client-side Routing

18. #CD22
Add lwr-router-container to main app template
import { createRouter } from 'lwr/router';
Client-side Routing

19. #CD22
Basically just an ES6 module
with a few functions:
● constructor
● connect
● disconnect
● Update
https://lwc.dev/guide/wire_adapter
Custom @wire

20. #CD22
DEMO

21. #CD22
● Custom images/assets vs static resources (different import)
○ OSS: just add files to src/assets folder
○ Platform: import myResource from '@salesforce/resourceUrl/resourceReference';
● Custom @wire → not allowed on Platform, replaced by Apex Class
○ OSS: import { getUser } from 'c/usersWireApi';
○ Platform: import getUser from '@salesforce/apex/Namespace.UsersWireApi.getUser';
Differences between OSS & Platform

22. #CD22
● Navigation page names
○ OSS: whatever name you would like (eg. “namedPage”)
○ Platform: page names expected by Salesforce (ex: comm__namedPage)
● Metadata file (myComponent.js-meta.xml)
○ OSS: No need, but won’t complain if the file is there
○ Platform: expected by Salesforce,
Differences between OSS & Platform

23. #CD22
● Presentational components
● No Salesforce only import
● Navigation is OK
● Was designed to work everywhere from the start
○ Use Salesforce expected page names
● Won’t fit for all components
Components suited to use everywhere

24. #CD22
LWC:
● https://lwc.dev
● https://github.com/salesforce/lwc
LWR:
● https://developer.salesforce.com/docs/platform/lwr/overview
SLDS:
● https://www.lightningdesignsystem.com
● https://github.com/salesforce-ux/design-system
Resources

25. #CD22
Demo projects GitHub repositories:
https://github.com/FabienTaillon/lwc-lwr-oss
https://github.com/FabienTaillon/lwc-oss-on-platform
Create Components Dynamically in LWC OSS:
https://www.youtube.com/watch?v=KYRGmilJOrM
Resources

26. Thank you! #CD22