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.