Access LWC via URL

Question

Is there a way how to access LWC component via URL?

As a playground I'm using https://github.com/trailheadapps/lwc-recipes and want to access WireCurrentPageReference component.

I've tried https://enterprise-computing-1068-dev-ed.lightning.force.com/lightning/cmp/c__wireCurrentPageReference, but all I've got is the "This page isn't available in Salesforce Lightning Experience or mobile app." error message, as if I did specify component name that does not exist.

As you could see in lwc-recipes repos, the wireCurrentPageReference.js-meta.xml file does have all of the necessary targets:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Bonus question, if there is a way to access it via URL, will URL query parameters be shown in a component?

UPD: per Phil W answer it is not possible. I will have to create a page with the /visualEditor/appBuilder.app and put the component there. In order to pass query variable I will have to add a "c__" suffix that will be digestible by LWC. Example https://enterprise-computing-1068-dev-ed.lightning.force.com/lightning/n/WireCurrentPageReference?c__recordId=123

Answer 1

Summer '24 Update

You can now navigate directly to a LWC.

Add lightning__UrlAddressable to the meta xml file.

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__UrlAddressable</target>
    </targets>
</LightningComponentBundle>

Then using the NavigationMixin, navigate the user to it.

this[NavigationMixin.Navigate]({
      // Pass in pageReference
      type: 'standard__component',
      attributes: {
        componentName: 'c__myLWC',
      },
      state: {
        c__propertyValue: 'any api property value in the target LWC',
      },
    });

See also: https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_UrlAddressable.htm&release=250&type=5

Answer 2

Short answer: No.

LWCs are not URL Addressable (unlike Aura components that can be).

You would have to create a page and drop the LWC into that page, then reference the page by URL (not the component).

Of course, the LWC can get access to the page's URL detail using the CurrentPageReference. Note that there are some strange constraints in flexipages around query parameters. This is covered in this previous Q&A.

Answer 3

You can via little known hack which is essentially emulating aura's navigateToComponent event.

javascript:

'/one/one.app#'+btoa(JSON.stringify({"componentDef" : "c:someComponent","attributes" :{"recordId" : "0031F00000rMHfAQAW"}}))

I use below bash script that opens currently open lwc component (via hotkey via intellij/webstorm External Tools feature):

res=$(echo 'console.log(btoa(JSON.stringify({"componentDef" : "c:'$1'","attributes" :{"recordId" : "0031F00000rMHfAQAW","testAttribute" : "attribute value"}})))' | node)
url=/one/one.app#$res
echo $url
sfdx force:org:open -r -p $url --json | jq -r .result.url

Webstorm config: