Build Connected Apps Anywhere Using Lightning Base Components :

Build Connected Apps Anywhere Using Lightning Base Components
by:
blow post content copied from  Salesforce Developers Blog
click here to view original post

Introduction

Getting your digital experience to market quickly has never been more important. Salesforce developers have enjoyed assembling exceptional digital experiences with a fast time-to-market. Now, we’re pleased to share that the same Lightning base components are available for building websites and applications anywhere! These components span common interactions like those found in a button, or feature more specialized capabilities like what you get with a datatable. They make building apps in the Salesforce ecosystem a breeze. Think of the components as building blocks.

Until today, these building blocks only worked on the Salesforce platform. However, now we are bringing the capability of using these powerful building blocks to create your own connected web-apps outside of the Salesforce Platform. In this post, I’ll introduce you to Salesforce’s Lightning base components and show you how to build a simple web application using them. You can find more information about the Lightning base components here.

Getting started with Lightning base components

This section will walk you through how to setup your environment in order to use Lightning base components. In just five minutes, you’ll be ready to use Lightning base components to build powerful applications off the Salesforce Platform.

Step 1 – Create an LWC app template

The open source create-lwc-app tool provides you a quick and customizable onboarding experience to setup and develop with Lightning Web Components. To get up and running execute the following command in a shell/terminal:

npx create-lwc-app your-app-name

This will run an npx installation of create-lwc-app, guide you through the short setup, and then create a new Lightning Web Components project for you. create-lwc-app is meant to be a one-stop-shop solution. The created project contains everything you need to get started. It adds the dev dependency lwc-services. More information regarding installing this tool and lwc-services can be found here.

Step 2 – Install the lightning-base-components package in your project

After creating your project, install the lightning-base-components package in your project. This will allow you to use the powerful building blocks to build your applications off the Salesforce Platform. The lightning-base-components NPM package includes only the base Lightning Web Components that can run outside the Salesforce platform. Some base components can only run on the Salesforce platform because they rely on Salesforce data to function properly. More information on which components are included can be found here.

You install the package by running npm install.

npm install lightning-base-components

Once lightning-base-components appear as a dependency in the package.json file, you have successfully installed the lightning-base components package.

"dependencies": {
    ".....": ".....",
    ".....": ".....",
    "lightning-base-components": "^1.10.2-alpha"
}

After successfully installing the NPM package add

{
    "npm": "lightning-base-components"
}

to the modules in the lwc.config.json file. To learn more about module resolution check out this wonderful blog post.

Step 3 – Install the @salesforce-ux/design-system package in your project

The Lightning Base Components work with the Salesforce Lightning Design System. The Salesforce Lightning Design System (SLDS) includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. SLDS is flexible, scalable, efficient, and accessible.

Now you don’t need to write thousands of lines of CSS code. Rather than focusing on pixels, you can focus on application logic. Alternatively, you can still choose to style the components using custom CSS code. To use SLDS, simply install this NPM package:

npm install @salesforce-ux/design-system

Once @salesforce-ux/design-system appears as a dependency in the package.json file, you have successfully installed the lightning-base components package.

"dependencies": {
    ".....": ".....",
   ".....": ".....",
    "@salesforce-ux/design-system": "^2.13.5",
}

After successfully installing the NPM package add

{
    "npm": "@salesforce-ux/design-system"
}

to the modules in the lwc.config.json file.

Step 4 – Additional steps to use SLDS with base components

In order to use SLDS, copy the assets folder from node_modules/@salesforce-ux/design-system and add it to the resources folder in src/client/resources.

Now you need to globally define the SLDS styles at application level. You do so by adding

<link
    rel="stylesheet"
    href="/resources/assets/styles/salesforce-lightning-design-system.min.css"
/>

in the header for the src/client/index.html file.

To use SLDS you need to import it in every CSS file. You can do that by using the following line of code:

@import '@salesforce/slds/legacy';

 

Step 5 – Override styles with Synthetic Shadow

Synthetic Shadow exposes the DOM structure of the lightning-base-components. Synthetic Shadow allows you to create global styles that target the interior elements of the Lightning Base Components. You can write CSS that targets the tags (the button, svg, span, etc.) or the CSS classes (slds-dropdown-trigger, slds-button, etc.) of the base component. In this way, you can add your own look and feel to the lightning-base-components.

In order to use Synthetic Shadow, you need to add the following line import '@lwc/synthetic-shadow';
to src/client/index.js.

Using Lightning base components to build applications

Now that you have your environment setup, you can begin building powerful applications using the Lightning base components. First and foremost, you can delete the existing template application src/client/modules/my that was created to make onboarding easier.

Lightning Base Component Library

The Lightning Base Component Library provides you with blueprints of how to use the base components in your applications. These blueprints include the HTML, Javascript, and CSS code snippets that you can copy-paste into your own applications outside the Salesforce platform. WOW! Now you can truly build highly functional, usable, and performant applications at the speed of Lightning. (I’m sure you guys LOVED this pun)

The library also provides a playground where you can edit the code and experiment with the Lightning base components. Below is an example of how you can use the lightning-input base component to create different kinds of date inputs in your application.

Building a sample application using Lighting base components

We’ve created a sample application where you can see the Lightning base components in action. This is a really barebones example of using Lightning base components, in case you run into any issues making the setup work.

Additionally, I went beyond the basics and re-created the Trailhead application using Lightning base components. And yes, this application lives outside of the Salesforce Core Platform. A sneak peek of the application lives here. You can see that using Lightning base components reduces the overall complexity and amount of code. The original project required a ton of CSS, and we reduced that to nearly nothing. We also added more capabilities simply by using the base components like lightning-card, lightning-formatted-email, or lightning-input.

Conclusion

Today you learned about how you can use our Lightning base components to build powerful applications. Our engineers are actively implementing new features to further improve our base components and deliver value to you. Look out for another blog post, where I’ll show you the various lightning-base-components I used to recreate the Trailhead application a lot faster. In the meantime, make sure to check out our Lightning Base Component Library and maybe create your first application using them. Show me the wonderful applications you make – tweet me @dhruv_kedia1.

About the author

Dhruv Kedia is an Associate Product Manager working on building a powerful library of Lightning Base Components that empower developers to build amazing applications. He is a recent Stanford Computer Science graduate. You can follow him on Twitter @dhruv_kedia1 and LinkedIn

Resources

Lightning Base Component Library
Lightning Base Components Documentation
Salesforce Lightning Design System
Lightning Base Components NPM Package
Create LWC App Template
Synthetic Shadow

December 15, 2020 at 10:45PM
Click here for more details...

=============================
The original post is available in Salesforce Developers Blog by
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================