Lightning Web Components Hello World Example

Let’s discuss the Salesforce Lightning Web Components with hello world example which is the perfect start to understand how the Lightning Web Components worksWeb components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior. Lightning Web Components is a new programming model for building Lightning components. It leverages web standards breakthroughs, can coexist and interoperate with the Aura programming model and delivers unparalleled performance. To create and develop Lightning Web Components and leverage their powerful features and performance benefits, you need to set up Salesforce DX.

Environment setup

  1. Sign up for spring 19 pre-release org from here.
  2. Enable Dev Hub
  3. Install SFDX CLI spring 19 version. Please check the SFDX version to be matched to 45.0.X on CLI
  4. Download and install the latest version of Visual Studio Code  if not available
  5. Install visual studio code Salesforce Extension Pack extension 
  6. Install Lightning Web Components extension for visual studio code

Time to Code “Hello World” Component 

Now your development setup is complete and you can able to start coding the helloworld web component and let us get the start.

  1. Open Visual Studio Code and run the SFDX  commands from the visual studio code command palette.To open command palette press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
  2. Run SFDX: Create Project command to create a project from Command Palette and Enter helloworld as the project name.

            3. Authorize a Dev Hub by using SFDX: Authorize a Dev Hub command from the command Palette and Log in using your pre-release Dev Hub org credentials. Click Allow.

        4. Create a Scratch Org by using SFDX: Create a Default Scratch Org command from the command palette. Press Enter to accept the default project-scratch-def.json. Press Enter to accept helloworld scratch org alias.
           5. Now Create a Lightning Web Component using SFDX: Create Lightning Web Component. Press Enter to accept the default to force-app/main/default/lwc folder. Type helloworld for the name of the new component. Press Enter. You can able to see the newly created component under force-app/main/default/lwc folder. 

Now in the helloworld.html file copy and paste the below code.

In the above HTML markups, you can able to template based binding syntax {greeting}  that is used to bind the properties from the controller.

In the helloworld.js JavaScript file, copy and paste the following code.

@track is used to track the property’s value and re-render a component when it changes.

In the XML file helloWorld.js-meta.xml, copy and paste the following code which will indicate where in the app builder this lightning component is available.

Push to a Scratch Org

Now push your changes from the local dev env to Salesforce scratch org.  Run the following command from the visual code command palette SFDX: Push Source to Default Scratch Org.

Add Component to App in Lightning Experience

  1. Select SFDX: Open Default Org command from the command palette to open the scratch org 
  2. Add the helloworld Lightning web component form to the contact record page and save changes.

That’s it. Now you have successfully created your first lightning web component. But just let us make some more changes to a lightning web component. Let’s call the simple hello world message from the server side apex class

Create Apex Class 

Now create an apex in SFDX env . To create an apex class from the SFDX run the this SFDX :Create Apex Class command from command palette. 

Here is the simple apex class “HelloWorld”

Change your helloworld.html code as shown below

Change your helloworld.js code as shown below

In the above code, you have to import the apex class in the JavaScript controller and use the @wire property to bind the apex method.

Now push the changes from local development to scratch org .to push the changes from the SFDX local to scratch org run the SFDX: Push Source to Default Scratch Org command from the command platter.

Now refresh the record page and you can able to see hello world message from the apex class as shown below.

 

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.