LWC, Preact, Svelte, and Vue in Salesforce Example

This repository showcases how you can embed 3rd party frameworks within Lightning Web Components in a Salesforce org - without using static resources or lightning:container.

Setup instructions

You will get the best experience by using this repository in combination with LWC Local Development.

1. Set up your environment. Follow the steps in the Quick Start: Lightning Web Components Trailhead project. The steps include:

   • Enable Dev Hub in your Trailhead Playground or Developer Edition
   • Install Salesforce CLI
   • Install Visual Studio Code
   • Install the Visual Studio Code Salesforce extensions, including the Lightning Web Components extension (this is more or less optional, it gives you a better dev experience in VS Code though)

2. If you haven't already done so, authorize your Dev Hub org and provide it with an alias (myhuborg in the command below):

   sfdx force:auth:web:login -d -a myhuborg
   

3. Clone this repository (yup, this one, with the real long name):

   git clone https://github.com/muenzpraeger/sfdx-lwc-preact-svelte-vue-example
   cd sfdx-lwc-preact-svelte-vue-example
   

4. Create a scratch org and provide it with an alias (frameworks-example in the command below):

   sfdx force:org:create -s -f config/project-scratch-def.json -a frameworks-example
   

5. Push the Salesforce org metadata to the scratch org. This will also deploy an Apex class that will be used to retrieve org data locally:

   sfdx force:source:push
   

6. Install the LWC Local Development Server plugin:

   sfdx plugins:install @salesforce/lwc-dev-server
   

7. Install the project dependencies:

   npm install
   

8. Start Rollup in watch mode:

   npm run dev
   

9. Start the LWC Local Development server (in another terminal):

   sfdx force:lightning:lwc:start
   

Now you can experience the different components in LWC Local Development. For all frameworks Rollup runs in watch mode, so any changes to the frameworks also result in instant updates for LWC Local Development.

In case you want to see everything within a Salesforce org, run this command:

sfdx force:org:open -p /lightning/n/Examples

Project structure

All examples follow the same pattern. Just replace <framework> with the framework name. All code is documented to highlight the different implementation requirements and patterns.

force-app/main/default/lwc/container<framework> - LWC that consumes the generated ES6 module

force-app/main/default/lwc/<framework> - generated ES6 module

scripts/rollup.<framework>.js - Rollup configuration file

src/<framework> - source folder for every framework