1

i am trying to use an aura component using lightning:container (which renders a static resource react app), in a visual force page.

for that i have created a classicAppDep.app with this code -

<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="lightning:container" />
</aura:application>

and then i use this in the visual force page as -

<apex:page standardController="Case"  html-width="100%" html-height="100%"  sidebar="false" showheader="false"
           standardStylesheets="false" docType="html-5.0" id="myPage">
    <apex:includeLightning />
    <div id="lightning" />
    <script>
        $Lightning.use("xyz:classicAppDep", function() {
          $Lightning.createComponent("xyz:app",
              {},
              "lightning",
              function(cmp) {
                console.log("app rendered");
                // do some stuff
              }
          );
        });
    </script>
</apex:page>

where xyz:app is my aura component which uses lightning:container to render a static resource react app.

But when i am adding this visualforce page to my page, i am getting this error in my console-

Refused to display 'https://mydomain.container.lightning.com/lcc/1569347477000/reactApp/index.html?sflocale=en_US' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://mydomain.visualforce.com"

Basically some mismatch in the domain of my static resource and that of the visualforce page.

How can i resolve this, so that the static resource (react app) renders on the visual force page? Please help.

0

The reason you use lightning:container is because a library is not allowed to modify DOM directly in lightning. However there is no such restriction in visualforce. So you can directly load that application in visualforce.

  • How do i run the react app (in static resources) in visualforce? – ghostCoder Jul 26 at 12:19
  • Copy paste html in vfp. Refer to js file using script. – salesforce-sas Jul 26 at 12:27

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.