What is the Lightning Component equivalent for Site.BaseUrl?

It seems that for now there is no equivalent to Site.BaseUrl. So I'm going to share what I've used to circumvent this:

On the component.cmp:

<aura:attribute name="baseUrl" type="String" default=""></aura:attribute>
<aura:attribute name="theme_ui" type="String" default=""></aura:attribute>

On helper.js:

getBaseUrl : function (component) {
  var action = component.get('c.getBaseUrl')
  action.setCallback(this, function (response) {
    var state = response.getState()
    if (component.isValid() && state === 'SUCCESS') {
      var result = response.getReturnValue()
      component.set('v.baseUrl', result)
    }
  })
  $A.enqueueAction(action)
},
getUIDisplayed : function (component) {
  var action = component.get('c.getUIThemeDescription')
  action.setCallback(this, function (response) {
    var state = response.getState()
    if (component.isValid() && state === 'SUCCESS') {
      var result = response.getReturnValue()
      component.set('v.theme_ui', result)
    }
  })
  $A.enqueueAction(action)
},

On the server-side:

@AuraEnabled
public static String getBaseUrl () {
    if (Network.getNetworkId() != null) {
        return [SELECT Id, UrlPathPrefix FROM Network WHERE Id = :Network.getNetworkId()].UrlPathPrefix;
    }
    return '';
}

@AuraEnabled
public static String getUIThemeDescription() {
    return UserInfo.getUiThemeDisplayed();
}

And where I need to make the redirect, I've used this:

if (component.get('v.theme_ui') === 'Theme3') {
  // salesforce classic
  window.location.href = component.get('v.baseUrl') + '/' + result
} else {
  // lightning experience
  sforce.one.navigateToSObject(result)
}

Our use case is like this: we have multiple communities with shared footer- means we can use same footer component in all communities. But problem arises with relative URLs- how to make it working for each community... For example- 'News and Alert' link redirects to https://communityOne/newsandlaert wherease same link for another community is https://communityTwo/newsandlaert

The above solution works as expected for me. But I don't want to make a server side call (just for good page performance). So, I came up with solution by using custom labels.

Approach:

  1. For each community, there is custom label to hold the base URL of each community.
  2. There is a design attribute in this Footer component to pass the name of current community's related custom label.
  3. Get the custom label's value in controller.js dynamically.
  4. When drag and drop the component, enter custom label for current community/org in design attribute.

CommunityFooter.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
  <aura:attribute name="currentCommunityBaseURLFROMLabel" type="String" default="My_Community_Base_URL_Label"/> 
  <!-- custom label name is "My_Community_Base_URL_Label" -->
  <aura:attribute name="currentCommunityBaseURL" type="String"/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
  <a href="{!v.currentCommunityBaseURL+'/news-alert'}"
</aura:component>

CommunityFooter.design

<design:component >
     <design:attribute name="currentCommunityBaseURL" label="Current Community Base URL's Label Name" description="" />
</design:component >

CommunityFooter.js

doInit : function(component, event, helper) {
    var keysite ="$Label.c."+component.get("v.currentCommunityBaseURLFROMLabel"); //= component.get("v.currentCommunityBaseURL");
    var sitePrefix = $A.get(keysite);
    component.set("v.currentCommunityBaseURL", sitePrefix);
    console.log($A.get("$Label.c.currentCommunityBaseURLFROMLabel")+ 'Key...'+sitePrefix);
}

If anyone comes here to find the JS only solution to this, then the following snippet of code could be a good addition in your already made component.

Just create an attribute to hold the base URL value.

 <aura:attribute name="cbaseURL" type="String"/>

And these lines of code into your JS controller.

 var urlString = window.location.href;
 var baseURL = urlString.substring(0, urlString.indexOf("/s"));
 component.set("v.cbaseURL", baseURL);

I used "/s" as the breaking point for my url you can provide any string according to your requirement.