How to pass url parameter from lightning application to lwc

Hello Trailblazers!!

While I was trying to implement a custom form element in Lightning we component, I wanted to open that in Lightning Application so that I can see the immediate results as I save the changes instead of putting it directly on the record page of the object. Apparently, I was not able to get the record id from the Lightning Application to LWC. I tried to search for many articles, documentation on this but I was not able to find the solution to the problem. The problem was, I was not getting the record in Lwc which resulted to fail uiRecordApi.

Finally, I found the obvious solution which I was not getting in my head.

1. Created public reactive for recordId.
2. Created an attribute in my lightning application with name = id, you can give whatever you want.
3. Passed that id attribute from lightning application to Lwc as a merge field.

And, yes it solved my problem. I was able to get the record id in my Lwc and uiRecordApi worked.

Here is my sample Lightning Application "TestApp"

<aura:application extends="force:slds">
    <aura:attribute name="id" type="String"/>    
    <c:formExample recordId="{!v.id}"/>
</aura:application>

Here is the code for LWC - Html markup.

<template>
    <div if:true={contact.data}>
        <div class="slds-form slds-form-element_stacked">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-firstName">First Name</label>
                <div class="slds-form-element__control">
                    <input type="text" id="form-element-firstName" placeholder="First Name" class="slds-input"
                        value={firstName} />
                </div>
            </div>

            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-lastName">Last Name</label>
                <div class="slds-form-element__control">
                    <input type="text" id="form-element-lastName" placeholder="Last Name" class="slds-input" required
                        value={lastName} />
                </div>
            </div>

            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-email">Email</label>
                <div class="slds-form-element__control">
                    <input type="email" id="form-element-email" placeholder="Email" class="slds-input" required
                        value={email} />
                </div>
            </div>

            <div class="slds-form-element">
                <label class="slds-form-element__label" for="form-element-phone">Phone</label>
                <div class="slds-form-element__control">
                    <input type="phone" id="form-element-phone" placeholder="Phone" class="slds-input"
                        value={phone} />
                </div>
            </div>
        </div>
    </div>
</template>

Here is the code for LWC - JS Controller.

import {
    LightningElement,
    api,track,
    wire
} from 'lwc';
import {
    getRecord
} from 'lightning/uiRecordApi';
 
const fields = [
    'Contact.FirstName',
    'Contact.LastName',
    'Contact.Phone',
    'Contact.Email',
];  
 
export default class formExample extends LightningElement {
    @api recordId;
    @track contact;
    @wire(getRecord, {
        recordId: '$recordId',
        fields
    })
    contact;
 
    get firstName() {
        return this.contact.data.fields.FirstName.value;
    }
 
    get lastName() {
        return this.contact.data.fields.LastName.value;
    }
 
    get phone() {
        return this.contact.data.fields.Phone.value;
    }
 
    get email() {
        return this.contact.data.fields.Email.value;
    }
}

Here is the code for LWC - Meta XML.

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

Here is how I passed the id to the TestApp.
https://mydomain11-dev-ed.lightning.force.com/c/TestApp.app?id=0030K00001LW1hMQAT
Hope you guys like it!
Cheers!!
Happy Coding!!!