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.

Improve this question

1 Answer 1

Reset to default
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

Improve this answer
9
  • 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, 2018 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, 2018 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, 2018 at 22:04
  • You parent div id should be lightning in static html body
    – Himanshu
    Feb 8, 2018 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, 2018 at 17:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .