How to get the Community URL in LWC?

Getting the Salesforce ORG base Url or Community Base URL in Salesforce Lightning is very important as there are various use cases where you need to use Salesforce/Community Url.

Use Cases

Below are some of the use cases when you need to get the org URL

• Navigate to Record Detail Page
• Preview the File in Salesforce or Community
• Download the file in Salesforce or Community
• Navigate to a specific Url
• etc

How to get the Community Url in LWC

There are 3 different ways you can get the Community base URL in Lightning Web Component

Method 1 – Use Salesforce Module

The very first step is to use the @salesforce module in LWC. This method is useful and recommended when you know that the component is used only in the Lightning Experience Community.

import the below two properties of the salesforce community inside the Salesforce Lightning Component

import networkId from '@salesforce/community/Id';
import basePath from '@salesforce/community/basePath';

Now use the below code where ever you want the base URL of your salesforce community

const before_ = `${basePath}`.substring(0, `${basePath}`.indexOf('/s')+1);

const communityUrl = `https://${location.host}${before_}`;

Method 2 – Use Network Class

Salesforce provides the network class that provides multiple standard methods for Salesforce Communities and this class is really helpful for getting the community base URL.

Add the below apex method to your LWC Controller class

@AuraEnabled(cacheable=true)
public static String getOrgBaseUrl(){
    String baseUrl = Network.getLoginUrl( Network.getNetworkId() );
    return baseUrl;
}

Use the @wire method to call the apex class and store the URL in the private property of the JavaScript Class.

import { LightningElement, track, wire } from 'lwc';
import getOrgBaseUrl from '@salesforce/apex/NetworkHelperClass.getOrgBaseUrl';
export default class NotificationComponent extends NavigationMixin(LightningElement) {

    communityBaseUrl;

    @wire(getOrgBaseUrl)
    wiredBaseUrl(result) {
        const { error, data } = result;
        if (data) {
            this.communityBaseUrl = `${data}`;
        } else if (error) {
            console.error('Error: ', error);
        }
    }
}

Now use the communityBaseUrl variable anywhere within the JavaScript method where you need to use the base URL of Salesforce Community.

Method 3 – Use JavaScript Object

You can always use a JavaScript location object to get the host while Lightning Web Component is running inside Salesforce Communities.

Below is the code that will give you the Salesforce Community base URL if the community path is the panther

const basePath = 'panther';

const communityUrl = `https://${location.host}$/{basePath}/`

Resources

1. https://developer.mozilla.org/en-US/docs/Web/API/Location
2. Network Class in Salesforce