2

To test Lightning Out on an external site, I use the application created in the "Aura Components Basics" module: expensesApp

This one works very well the proof in image:

My app in Lightning Experience

Pour To make my application available with lightning out, I helped myself to this blog: https://newstechnologystuff.com/2019/05/28/use-lightning-web-components-in-lightning-out/

  1. I add the url of site which must integrate my application in the CORS
  2. I created a new dedicated application for lightning out "LightOutApp"
    <aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
    <aura:dependency resource="c:expenses" type="COMPONENT"/>
    </aura:application>

Here's the code for my expenses component :

```Lightning Aura Components
<aura:component controller="ExpensesController">

<aura:attribute name="expenses" type="Expense__c[]"/>

<aura:handler name="updateExpense" event="c:expensesItemUpdate"
              action="{!c.handleUpdateExpense}"/>
<aura:handler name="createExpense" event="c:expensesItemUpdate"
              action="{!c.handleCreateExpense}"/>

<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>

<!-- PAGE HEADER -->
<lightning:layout class="slds-page-header slds-page-header--object-home">
    <lightning:layoutItem>
        <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <div class="page-section page-header">
            <h1 class="slds-text-heading--label">Expenses</h1>
            <h2 class="slds-text-heading--medium">My Expenses</h2>
        </div>
    </lightning:layoutItem>
</lightning:layout>
<!-- / PAGE HEADER -->
<!-- NEW EXPENSE FORM -->
<lightning:layout >
    <lightning:layoutItem padding="around-small" size="6">
        <c:expenseForm/>
    </lightning:layoutItem>
</lightning:layout>

<lightning:layout>
    <lightning:layoutItem padding="around-small" size="6">
        <c:expensesList expenses="{!v.expenses}"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="around-small" size="6">
        Put something cool here
    </lightning:layoutItem>
</lightning:layout>

  1. I added the code JS on the page of the site which must display my component, here :

$Lightning.use("c:LightOutApp", function() { $Lightning.createComponent("c:expenses", { authToken: "3MVG9Ve.2wqUVx_Z3nFMx_ytwdm0WnBAnowDB1mvO.d6trt4DDAipWp7tno3.lNL2YWT.jj0h0MHoxKTObe3D" }, "lightning", function(cmp) { console.log("component was created"); // do some stuff } ); }, 'https://playful-fox-o26ov9-dev-ed.lightning.force.com/' );

but when I load the page, I always get the following error in my chrome JS console:

Access to XMLHttpRequest at 'https://playful-fox-o26ov9-dev-ed.lightning.force.com//c/LightOutApp.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT' from origin 'https://webidetesting6929559-p2000088220trial.dispatcher.hanatrial.ondemand.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. /webapp/resources/sap/ui/core/messagebundle_fr_FR.properties:1 Failed to load resource: the server responded with a status of 404 ()

I forgot something ? The syntax of my code is not good?

You can test the integration and see the error message at this address :

https://nashle.github.io/lightningout/


Here is the picture of my CORS:

CORS

I wonder if this comes from the configuration of the Online Application or the fact that it may be necessary to activate community. Do you know what settings I need to fill in when I create my Connected App?

So you need to configure a community to access my lightning-out application on a third-party portal that does not have to be hosted by the community to provide access rights?

I implement ltng: allowGuestAccess "to Share Lightning App with Non-Authenticaded Users.

Aloha!

  • Can you include a picture of your CORS setting in your SF environment? lightning/setup/CorsWhitelistEntries/home relative URL path of where this setting is in lightning – Bryan Anderson Nov 20 '19 at 17:51
0

This morning, I used Lightning Out with the Lightning Web Components and there, magically, it works perfectly!

So I will train at the LWC.

I would like to understand why integration does not work.

If anyone understands where it comes from, I'm waiting for you here!

| improve this answer | |

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.