Lightning Web Components: Build Once, Use Everywhere

As Technical Evangelists, we work every day with EMEA ISV partners, and we often get some interesting questions around all of our great technologies. We thought it would be a great idea to share these common questions and answers with everyone who might be interested. — Nicolas Pouilloux & co-author Kevin Reece

Lightning Web Components is the Salesforce lightweight frameworks built on web standards that leverage new language constructs available in ECMAScript 7 and beyond.

Sounds awesome, right? That’s because it is. Do you want to know the best part? Lightning Web Components can be used directly in core products such as Sales and Service Cloud, but also in App Cloud (Platform) and Community Cloud — the same component, re-used in multiple products. Let’s take a look at how this is done.

Prerequisites
To follow this guide, you must have Salesforce DX setup on your machine, be authenticated against a DevHub, have the GitHub CLI installed and setup VS Code!

Clone and Open the Project

First, let’s start by cloning the Github repository containing some example code.

git clone https://github.com/nicopollux/lwc_flow_communities.git

Now, you can open the cloned project in VS Code by either running this command from the cloned directory

code .

or manually by selecting File > Open and select your local folder.

Top Tip 💡

VS Code has many shortcuts already created for Salesforce DX, to access them simply press CMD+Shift+P together and you will see them all, and can easily search for the one you are looking for.

Create your Scratch Org and Push the Project Source

Creating your first scratch org is super easy, by selecting the VS Code shortcut “SFDX:Create a Default Scratch Org”, or typing this command

sfdx force:org:create -f config/project-scratch-def.json -s -a <ALIAS>

Note: -s sets this to be your default scratch org and -a is the alias name you want to give to this Scratch Org

Once your scratch org creation has completed, you can quickly push your newly cloned metadata to the org by selecting the VS Code shortcut “SFDX:Push Source to Default Scratch Org” or typing this command

sfdx force:source:push -u <ALIAS>

Now you have a scratch org with your super sweet carousel Lightning Web Component, you can open the org and check it out, you can select the VS Code shortcut “SFDX:Open Default Org” or typing this command

sfdx force:org:open -u <ALIAS>

Assign the Permissions

Like every good Salesforce ISV, this example contains a permission set to control access to your new app, so before we sneak a peek at the finished component, we need to assign this permission set to our scratch org user, and that can be done via the Salesforce Setup; or, if you prefer the CLI, you can script the assignment and opening of the org to the new component.

Permission Set Assignment — Setup Menu
To assign the permission set from the setup menu you will first start at Setup → Quick Find → Permission Sets → LWC → Manage Assignments.

Once this is done, your user now has access to the app so open the App Launcher → LWC → Welcome tab.

Permission Set Assignment — DX

sfdx force:user:permset:assign -n LWC

followed closely by

sfdx force:org:open -u <ALIAS> -p /lightning/n/Welcome

Discover Lightning App Builder

The Lightning App Builder is a point-and-click tool that makes it easy to create custom pages for the Salesforce mobile app and Lightning Experience, giving your users what they need all in one place.

So, how did that component make its way onto that page? Let’s check it out by editing this page, and that can be quickly accessed from the settings icon and ‘Edit Page’ and when Lightning App Builder opens, you will see the carousel component in the ‘Custom’ section at the bottom of the page.

Fun Fact: LWC components are not automatically available to Lightning App Builder, or Community Experience Builder, but it is really easy to expose the component to these tools, and to show you how, lets head back to VS Code and open the carousel (force-app/main/default/lwc/carousel.js-meta.xml) and it will look a little like this

<target>lightning__AppPage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>

As you can see, the ‘lightning__AppPage’ exposes the component to Lightning App Builder and ‘lightningCommunity__xxx’ exposes to Community Experience Builder.

Create a Community and re-use the component

It is super easy and fun to set up a Community, and you should definitely spend a lot of time on this in future so you don’t miss the amazing features of this product, but this will shortcut the steps to a basic community to show the amazing carousel component.

Create the Community — Setup menu
In the Quick find, search for Communities Settings → Enable Communities → Save

Once you have been redirected to the All Communities → New Community → Select the template you love (we 💙 Customer Service) → Provide a name → Create

Wow, that was really quick!

The next step is to open the Community Builder and find that carousel component to garnish your slick Community.

Open the Toolbox on the left side of the screen and you will see the Standard and Custom Components that are available to the Community Experience Builder and if you scroll down to the bottom, voila, there is the very same Lightning Web Component, without any additional configuration, ready to delight your community users.

You have gone from cloning a repo to creating a community and utilizing your Lightning Web Component for all users interacting with your customer, from their Employee in the Lightning App Builder to their customers in the Community, with clicks, not code in less than 10 minutes. This is the power of the Salesforce Customer 360 Platform.

Summary

Consider how your Lightning Web Components can be built to be utilized in every Salesforce UI tool, giving you greater flexibility in your app, and by not duplicating components, you are simplifying your package and reducing maintenance effort and cost.

Also, choosing to expose your innovation to your customers can enable them to create engaging experiences for all their users, helping them to achieve their business goals.