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. Commented 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 Commented 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. Commented Feb 8, 2018 at 22:04
  • You parent div id should be lightning in static html body Commented 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? Commented Feb 19, 2018 at 17:26

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.