Krdytkyu

I Create an sfdx scratch org using Quick Start: Lightning Web Components
. I also created a sample hello world lightning web component and pushed it to the scratch org and everything works fine as I was able to preview my hello world lwc in the app builder. I also created an aura component from dev console and was able to pull it to vscode.

Now here comes the issue, Later I created couple of more lwc from the vscode and used push command after saving them, then It shows me what was pushed to the scratch org and everything was fine, but when I actually went to the app builder page of the scratch org that the code was pushed I don't see the newly pushed Lightning web components. Also every time I try to push some deltas I can see the deltas getting pushed.

How do I verify this issue? At least for aura components I can look into lightning resources to see the components but for lwc Im not sure of a way to verify whether they are pushed or not.

Below are the commands used:

sfdx force:source:push // for push



sfdx force:source:pull // for pull

Note: I was able to see the actual lightning web components in the force-app folder in my local host.

PS: From your scratch org

• setup


• Lightning component


• opens a list view where you can see aura components and lwc and I can see all the lwc

Even though all the lightning web components are available in the org,
I was not able to see them in the app builder except for the first
one!

Solved the issue by defining the targets definition in the xml file of the lightning web component.

From the Developer Guide:

There are a few steps to take before you can use your custom Lightning web components to create a Lightning page in Lightning App Builder. One of them is Define Component Metadata in the Configuration File

The .js-meta.xml file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder. Edit the configuration file to:

• Define what types of Lightning pages your component can be used on.


• Configure your component’s properties.


• Set your component’s supported objects.


• Make the component usable outside of your own org.

Added Definition:

  <targets>

      <target>lightning__RecordPage</target>

      <target>lightning__AppPage</target>

      <target>lightning__HomePage</target>

  </targets>

There is also another way to see these components , thats using the tooling API query from the dev console .Check the tooling checkbox in the dev console.

The below query should show you if your org has these components

Select Id from LightningComponentBundle



Select Id from LightningComponentResource

The Bundle is the whole bundle and LightningComponentResource are each files.Docs will be out soon then we can get more definitions .