Plugging React JS app into lightning community

Question

I have created a react.js application where I have used SLDS for my styling and I have also installed Lightning container module to make direct API calls to APEX code in my org. I want to plug the component into my lightning component and then pull it to lightning community. I understand that, to embed react.js app into lightning component, i need to use lightning:container which is not supported in Lightning Communities. IS there any other way I can plug my react into communties. or embedding my react to VF and then to communties is the only way out now ?

Answer 1

Prior to the introduction of lightning:container, this could be done using VisualForce in Lightning Communities to host an iframe:

In order to use another framework as part of a package that uses Lightning, please use an iframe or Visualforce container until approved Lightning containers are published.

<div>
    <iframe aura:id="vfFrame" src="{!'https://' + v.vfHost + '/apex/GoogleMap'}" frameborder="0" width="100%" height="376"/>
</div>

which communicates with your external component via HTML5 postMessage:

({
    recordChangeHandler : function(component, event) {
        var id = event.getParam("recordId");
        component.set("v.recordId", id);
        var service = component.find("service");
        service.reloadRecord();
    },
propertyChangeHandler : function(component, event) {
    var property = component.get("v.property");
    var vfOrigin = "https://" + component.get("v.vfHost");
    var vfWindow = component.find("vfFrame").getElement().contentWindow;
    vfWindow.postMessage(property, vfOrigin);
}

})

References

• How to call a Salesforce REST URL from Lightning Component? - Salesforce Stack Exchange

• GitHub - ccoenraets/lc-vf-communication: Example of bidirectional communication between Lightning Components and Visualforce pages

• Use Visualforce in Lightning Communities