Practice English Speaking&Listening with: Develop Lightning Web Components Faster with Local Development Server | Developer Quick Takes

Normal
(0)
Difficulty: 0

(Fast-paced techno music)

- Hey everyone.

I'm Mohith.

I'm a Developer Evangelist at Salesforce.

In order to start working with local development server

you will need to install Salesforce CLI.

You can install Salesforce CLI by visiting

developer.salesforce.com/tools/sfdxcli

You will also need the Visual Studio Code

with Salesforce extension pack.

You can obtain the Salesforce extension pack from

the Visual Studio code extension marketplace.

I have cloned LWC's recipes app project from git.

This recipe is part of our sample gallery apps.

I am in my VS code and I have the LWC's Recipes app.

I have connected to a dev hub

and also have created a scratch org.

Note that you will need to connect

your project to scratch org otherwise

the local development server will fail.

To preview the component locally,

right-click on the component html file,

and click on sfdx preview component locally.

Once I click, I have options to select

the platform for previewing the component.

For the scope of the video,

I'm going to just use desktop browser.

Notice that the local development server failed to start,

and there is an error.

Now this error is because we have not installed

Salesforce/lwc-dev-server CLI plugin

You can install the plugin by typing

sfdx plugins install@slaesforce/lwc-dev-server

Once the plugin is installed, you should see that

there is an installed 2.5.0 version.

Now to make sure that the plugin is installed type

sfdx plugins, and we should see that

there is a lwc-dev-server 2.5.0 installed.

All right now, let's get back to our Visual Studio Code

and try to preview the component.

So I'll click on preview component locally

and select the desktop browser.

Now you'll see that a local development server has started

and I can preview the component.

Let's say I want to make some code changes.

In this case, I just want to add a label.

Now, as I save, you will notice that the page

automatically reloads and I can see the latest changes.

I can view all of my components in my application

by visiting the home link,

which points to local host 33 33.

Note that some components require data

from Salesforce scratch orgs.

For example, let's say I am creating a record.

Now this requires an interaction

with Salesforce scratch orgs.

So you would see that from the local development server

I will still be able to reach out to Salesforce

and the component just works fine.

So here's the account we just created.

We support most of the lightning components,

but there are a few components

that we do not support at the moment.

And to find out the limitations of that,

visit our documentation.

So from the documentation, it is clear that

there are certain modules that are not supported.

For example, apex continuation module

or the navigation service,

or EMP API or platform show toast event.

Similarly, we have some base components that do not preview.

And there are certain features,

like lightning locker and pages,

which are not available in the local development server.

Now that you have learned how to install

the LWC-dev-server CLI plugin

and start with local development,

I hope this will speed up your LWC design and development.

Thanks for watching.

Thanks for watching! If you learned something, be sure to like this video.

If you want to get more content like this pushed directly to you

click subscribe and that bell to get notifications

The Description of Develop Lightning Web Components Faster with Local Development Server | Developer Quick Takes