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