If you have this question in your mind that “Can we create a lightning web component using the Salesforce developer console?” the answer is “No”. Still, many developers who haven’t worked on the lightning web components assume that the developer console is the go-to tool for the LWC development like we do for Apex and Visualforce.
In this Salesforce tutorial, I will explain how to create a Lightning Web Component in Salesforce using an alternative approach.
Why Can’t We Create a Lightning Web Component in the Developer Console?
The Salesforce developer console is suitable for development in Apex and Visualforce Pages. However, Lightning Web Components use modern JavaScript, HTML, and CSS, which require a different environment.
The developer console lacks the handling of the file structure required for an LWC component. Therefore, it is not possible to compile and preview JavaScript-based components effectively.
Alternative Method of Creating Lightning Web Component
Since the developer console doesn’t support LWC, another way is to create lightning web components using an IDE such as VS code, but that is also an another task to setup a project and integrate your Salesforce org with VS code IDE.
The other alternative and easy way is using the Lightning Studio Chrome extension, which does not require integration.
Follow the steps below to set up the Lightning Studio Chrome extension and create a Lightning web component.
1. Open the Google Chrome web store, then search and selectLightning Studio.
2. In this step, click the Add to Chrome button to add Lightning Studio as a Chrome extension.
As we click the Add to Chrome button, it will display a pop-up; there, click the Add Extension button.
3. After installing the Chrome extension, log in to your Salesforce org. in the Chrome browser. After this, click on the extension icon and select Lightning Studio.
4. In the next window, we will see the setup of the Lightning Studio developer edition.
Here, go to the left sidebar, and there in the Lightning Web Component folder, we can see all the existing lightning web components.
To create a new lightning web component, click on the three dots next to the LWC folder and select New Component.
5. In this window, enter the name of the lightning web component in the field Component name and make sure to write that in camel case. For example, I have labeled it as myLwcComponent.
To make the component accessible, select the checkbox isExposed that determines whether a component can be used in the Lightning App Builder for deployment.
Select the targets to deploy the lightning web component in the Target Configuration. In this example, I have selected Target as the lightning home page, app page, and record page.
6. In this example, I’ll display a sample text message in the lightning web component. To do that, open the component’s HTML file and enter the code below.
<template>
<lightning-card title="Lightning Studio LWC" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<p>Hello, This is the lightning component from Lightning studio</p>
</div>
</lightning-card>
</template>In the previous step, we exposed the lighting web component and set its targets. In this LWC, we will display a sample text, so no logic handling will be needed, and the JS file will be as it is.
7. After creating the lightning web component, save the changes with the save button icon.
After saving the changes, a success message will appear on the screen stating that the component or the changes have been deployed successfully.
Deploy the Lightning Web Component:
The LWC file is deployed in the Salesforce org data, but to make the component visible to the users, we need to deploy it on the lightning page.
1. Navigate to a Lightning app or home page, click on the settings icon, and select Edit Page.
2. In the lightning app builder, from the Components tab, select the Lightning Web Component that we have created and drag it to the template region. After this, click Save to apply the changes.
Now, on the lightning page, you will see the text message that we have entered in the HTML file.
This way, we can create a lightning web component using the Lightning Studio Chrome extension and get results similar to what we would have gotten by creating LWC from any IDE, such as VS code.
Conclusion
In this Salesforce tutorial, we learned that the Developer Console cannot be used to create Lightning Web Components, as it doesn’t support the modern JavaScript-based structure LWC requires. Instead, we learned about an alternative using the Lightning Studio Chrome extension.
This tool allows us to create, edit, and deploy LWCs directly from the browser without needing an IDE setup like VS Code.
You may also like to read:
- How to Use Lightning Message Service (LMS) in Salesforce LWC?
- Create an LWC Data Table With Nested Iterators in Salesforce
- Display Toast Notifications in Lightning Web Components (LWC)
- Decorators in Salesforce Lightning Web Component(LWC)
- How to Use Visualforce Page in Lightning Web Component?
- Retrieve Data From Salesforce in LWC Without Apex
I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.
