How to get Community Id and base path in lighting web components(lwc)

This post explains how to get community Id and base path in lightning web components(lwc)

HTML Code

<template>
    <lightning-card>
        <div class="slds-text-heading_medium slds-text-align_center">
            <b>Community Id:</b> {currentcommunityId}
        </div>
        <div class="slds-text-heading_medium slds-text-align_center">
            <b>Community Basepath:</b> {currentcommunityBasePath}
        </div>
    </lightning-card>
</template>

Javascript Code

import {LightningElement, api, track, wire} from 'lwc';
 
// We can get the community Id for use in the callout
import communityId from '@salesforce/community/Id';
 
// Get the base path for navigating to non-named pages
import communityBasePath from '@salesforce/community/basePath';

export default class CommunityName extends LightningElement {

    currentcommunityId;
    currentcommunityBasePath;

    connectedCallback() {
        this.currentcommunityId = communityId;
        this.currentcommunityBasePath = communityBasePath;
    }

}

Configuration File

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>52.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightningCommunity__Page</target>
		<target>lightningCommunity__Default</target>
	</targets>
</LightningComponentBundle>

Output

how to use lightning web component(lwc) in lightning communities

This post explains how to use lighting web components in communities.

To use the lightning component in communities component must implement the forceCommunity:availableForAllPageTypes interface but in lightning web components we will use the Configuration file.
Ex: <componentname>.js-meta.xml
Config the Configuration file as per the requirement.

Example:

lwcCommunitiesDemo.html

<template>
    <lightning-card title="Design Attribute Demo" icon-name="custom:custom19">
        <center>
            <h3>HI, <b>{strName}</b></h3><br />
            <div if:true={showDetails}>
                <ul>
                    <li> Emp Name: <b>{empName}</b></li>
                    <li> Emp Department: <b>{empDepartment}</b></li>
                    <li> Emp Location: <b>{empLocation}</b></li>
                    <li> Emp Age: <b>{empAge}</b><br /></b></li>
                    <li> Emp Gender: <b>{empGender}</b></li>
                </ul>
            </div>
        </center>
    </lightning-card>
</template>

lwcCommunitiesDemo.js

export default class lwcCommunitiesDemo extends LightningElement {
    @api showDetails = false;
    @api strName;
    @api empName;
    @api empDepartment;
    @api empLocation;
    @api empAge;
    @api empGender;
}

<target>
1.  This property indicates that where we need to use the component(record page, app page, and home page, etc).
2.  To use component in communities add lightningCommunity__Page, lightningCommunity__Default targets in Configuration file.
<targetConfigs> 
These properties are used to design your component as per your need.

lwcCommunitiesDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcCommunitiesDemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
      <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>

      <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="strName" type="String" default="Salesforce Code Crack" label="Enter the Employee Name"/>
            <property name="showDetails" type="Boolean" default="true" label="Do you want to Show Details ?"/>
            <property name="empName" type="String" default="" label="Enter Employee Name"/>
            <property name="empDepartment" type="String" default="" label="Enter Employee Department"/>
            <property name="empLocation" type="String" label="Enter Employee Location" datasource="Hyderabad, Delhi, Pune, Noida"/>
            <property name="empAge" type="integer" label="Enter Employee Age"/>
            <property name="empGender" type="String" label="Enter Employee Gender" datasource="Male, Female"/>
        </targetConfig>
      </targetConfigs>

</LightningComponentBundle>

Result