0

I've built an Aura app which we want to run in an external container. First, I'm testing this with my localhost with the right SSL cerficiates in place. The localhost address is also whitelisted within Salesforce. This is my locally hosted page which should retrieve the Aura app:

<!DOCTYPE html>
<html lang="en">

  <head>
    <script src="https://talisman--dev.lightning.force.com/lightning/lightning.out.js"></script>
    <script type="text/javascript" src="lib/jquery.js">  </script>
    <script type="text/javascript" src="lib/jqueryCookies.js"> </script>

    <style type="text/css"> 

      html,body {
        width:100%;height:100%;
      } 

      .slds-scope:not(html), .slds-scope body, .slds-media__body, .forceChatterStyle .cuf-preamble, .cuf-subPreamble .slds-text-body--small, .slds-post__footer {
        font-size: 1.0rem !important; 
      }  

    </style>   
  </head>

  <body>

    <div id="lexcontainer"></div>

  </body>

  <script> 
    var _lightningReady = false;
    if (!$.cookie("AccToken")) {
      alert("Login to Salesforce first!");
    } else {
      createCommunitiesComponent();
    }


    function setupLightning(callback) {
      var appName = "c:CommunitiesDayLayoutApp";


      if (_lightningReady) {
        if (typeof callback === "function") {
          callback();
        }
      } else {
        // Transform the URL for Lightning
        var url = $.cookie("InstURL");
        url = url.replace("my.salesforce", "lightning.force");

        $Lightning.use(appName,
          function () {
            _lightningReady = true;
            document.getElementById("lexcontainer").style.display = "block";
            if (typeof callback === "function") {
              callback();
            }
          }, url, $.cookie("AccToken"));
      }
    }

    function createCommunitiesComponent() {
      setupLightning(function () {
        $Lightning.createComponent("c:CommunitiesDayLayoutApp", {}, "lexcontainer");
      });
    }

    </script>

</html> 

And this is the Aura app:

<aura:application extends="ltng:outapp" access="global">
  <c:CommunitiesDayExternal />     
</aura:application>

The weird thing is; I see the console logs with the retrieved objects (from the controller/helper) when I open the app in localhost, so I know it works, but I don't see any front-end. The div with the id 'lexcontainer' stays empty. Does anybody know what I might be doing wrong? Thanks in advance.

Edit: When I remove the Lightning Component from the app, and make it only output some text, it still doesn't work. So it hasn't got anything to do with the component itself.

  • Just out of curiosity, are you sure the <c:CommunitiesDayExternal /> works on its own? There could be an error deep in that component that is being hidden through lightning out – Bryan Anderson Jan 15 at 14:08
  • Yes, it works on it's own. Even if I put some text within the app instead of an Lightning Component, it still doesn't display anything. – Rutger Jan 15 at 14:12
  • You mean like <aura:application extends="ltng:outapp" access="global"> Foo </aura:application> – Bryan Anderson Jan 15 at 14:14
  • Also have you setup your CORS access correctly help.salesforce.com/… ? – Bryan Anderson Jan 15 at 14:21
  • Yes like that for example. I've tested some more and found that I can't access the app from within Salesforce via example.lightning.force.com/c/App.app while extends="ltng:outapp" is in the <aura:application> line, it just says "Loading...". When I remove the extends="ltng:outapp", I can access the app again. Could that have something to do with my app also not displaying in external containers? I can't remove extends="ltng:outapp" there, because that's the one thing I need to make it run outside of Salesforce right? – Rutger Jan 15 at 14:22
1

I see the issue. You currently have this in your Aura App:

<aura:application extends="ltng:outapp" access="global">
  <c:CommunitiesDayExternal />     
</aura:application>

It should be this:

<aura:application extends="ltng:outapp" access="global">
<aura:dependency resource="c:CommunitiesDayExternal"/>
  </aura:application>
| improve this answer | |
  • Thanks for your answer Bryan. However, when I change that I don't even get the console.log's with the objects from my App. The page stays blank, as does the console unfortunately. – Rutger Jan 15 at 14:39
0

I resolved this issue;

The $Lightning.createComponent() function expected the name of the component, not the app (silly mistake). I changed this to the name of the component and now my Lightning Component loads within my localhost.

| improve this answer | |
  • So just to understand better now you can call the communities using lightningout. – Mitesh Jan 16 at 14:26
  • Yes, I've made a copy of a Communities page (Lightning component) I made and I put it into an aura:app. Then following these steps: jitendrazaa.com/blog/salesforce/… I made the Lightning component available in localhost. Now it works in localhost, so it will work in other external containers as well. – Rutger Jan 20 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.