3

I am trying to load a lightning out app in a static site hosted via an S3 bucket. I started with a lightning app that extends ltng:outApp and it describes a single component as a dependency. The app loads and the component is rendered, but only some of the styling is actually being applied. The component does contain a flow, so maybe there's something I forgot there?

In the developer console I see

Access to Font at 'https://[MY_SANDBOX]/_slds/fonts/v2.3.0/SalesforceSans-Regular.woff2' from origin '[MY_STATIC_SITE]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '[MY_STATIC_SITE]' is therefore not allowed access.

Access to Font at 'https://[MY_SANDBOX]/_slds/fonts/v2.3.0/SalesforceSans-Regular.woff' from origin '[MY_STATIC_SITE]' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '[MY_STATIC_SITE]' is therefore not allowed access.

aura_proddebug.js:2411 GET https://[MY_STATIC_SITE]/_slds/icons/utility-sprite/svg/symbols.svg?cache=8.2.0 net::ERR_ABORTED

However, I have listed the static site in the sandbox's CORS and remote site settings. I have also made sure CORS is enabled on the S3 bucket.

S3 CORS settings:

<?xml version="1.0" encoding="UTF-8"?>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Static Site Code:

<html>
    <head>
        <script src="[MY_SANDBOX]/lightning/lightning.out.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jsforce/1.7.0/jsforce.min.js"></script>
    </head>
    <body>
        <button onclick="login()">Login</button>
    <script>
        jsforce.browser.init({
            loginUrl : 'https://test.salesforce.com',
            clientId: '[    MY_CLIENT_ID    ]',
            redirectUri: '[ MY_REDIRECT ]'
        });
        function login(){
            jsforce.browser.login();
        }
        jsforce.browser.on('connect', function(conn) {
            if(conn.accessToken && jsforce.browser.isLoggedIn()){
                $Lightning.use("c:DEPENDENCY_APP", function() {
                    $Lightning.createComponent("c:CONTAINER_COMPONENT",
                    {},
                    "lightningout",
                    function(cmp) {
                        //nothing yet
                    });
                },
                'https://[MY_URL].lightning.force.com', 
                conn.accessToken 
                );
            }
        });
    </script>
        <div id="lightningout">
        </div>
    </body>
</html>

The lightning out app looks like this:

<aura:application extends="ltng:outApp">
    <aura:dependency resource="c:MY_COMPONENT" type="COMPONENT"/>
</aura:application>

The lightning component looks like this:

<aura:component access="global" controller="My_Ctrl">
    <div aura:id="flowContainer">
        <lightning:flow aura:id="newFlow" onstatuschange="{!c.handleStatusChange}" />
    </div>
</aura:component>

I was under the impression the SLDS styles come over with ltng:outApp apps. The only SLDS styles applied are the button colors, but not the shape/font/size of them. The fonts, grid system, and everything else is missing.

2

No it doesn't come out of the box with lightning. Either you need to extend force:slds in your lightning app or use <apex:lightning/> in your Vf page but as you are not using vf page you can't use <apex:lightning/>

As you are already extending ltng:outapp you can't extends force:slds at same time so as a solution upload slds css in your s3 bucket and add that in your static html code

<link rel="stylesheet" href="css file path from s3 bucket">

You can download this from https://www.lightningdesignsystem.com/downloads

  • As I mentioned before, its an external site hosting a lightning out app. No visualforce. so <apex:lightning/> wouldnt do much. And I think you're right. I think I misread the documentation around ltng:outapp. I'm pretty sure styling comes through in a VF environment, but not an external environment. I will probably end up hosting the CSS myself, unfortunately. – Ross Bassett Feb 8 '18 at 18:23
  • i agree we do have lightningStylesheets tag but that doesn't work in salesforce classic (developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/…). so at the end in your case you need to host css – Himanshu Feb 8 '18 at 18:36
  • So I tried that and it had no effect. I was initially confused because the "app" starts out with a flow, and then displays some information in a lightning component. The lightning component stuff renders fine, even without the link reference to the SLDS stylesheet, but everything inside the flow renders incorrectly. – Ross Bassett Feb 8 '18 at 22:04
  • You parent div id should be lightning in static html body – Himanshu Feb 8 '18 at 22:06
  • the id is lightningout because that's what i specified in the CreateComponent parameter. should lightning be added to the div id to enable styling? do you have any documentation around that? – Ross Bassett Feb 19 '18 at 17:26

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.