[SalesForce] Lightning Out SLDS Weirdness

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.

Best Answer

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

Related Topic