How to use visualforce page with lightning:container React in Lightning app builder?

Question

I try to create a React app inside visualforce page via lightning. When I click preview in visualforce setting, everything is fine.

But when I use it in Lightning app builder it does not work. It shows

The error: Refused to frame 'https://mirage-video-dev-ed--ltng.container.lightning.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://mirage-video-dev-ed--c.visualforce.com". Also really weird that if I right click and choose "Reload frame", it works.

Visualforce code

<apex:page >
    <apex:includeLightning />
    <div id="hello" />
    <script>
        $Lightning.use("c:myFirstApp", function() {
            $Lightning.createComponent("lightning:container",
              { src: "{!$Resource.hello + '/index.html'}"},
              "hello",
              function(cmp) {
                console.log("created");
                // do some stuff
              }
          );

        });
    </script>
</apex:page>

myFirstApp

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

Is there a way to fix it? I cannot find the way to load aura:application directly so if there is a way please show me.

FYI, please use salesforce.stackexchange in the future for questions related directly to SF — NSjonas

NSjonas NSjonas · Accepted Answer · 2020-08-25T01:03:54

You've got a bit of a inception problem going on... You just need to mount your react app directly inside of the VF page. No need to use a lightning:container.

See my B.A.S.S. project. This is proven to work and be extremely scalable.

Example VF Page with react app:

<apex:page showHeader="true" sidebar="false" standardStylesheets="false" docType="html-5.0">
    <script type="text/javascript">
        //rest details
        const __ACCESSTOKEN__ = '{!$Api.Session_ID}';
        const __RESTHOST__ = '';
    </script>
    <div id="root"></div>
    <!-- Your react entry point -->
    <script type='text/javascript' src="{!URLFOR($Resource.app, 'dist/app.js')}"></script>
</apex:page>

It is also possible to to run a React App directly inside a LWC, although no recommended.

How to use visualforce page with lightning:container React in Lightning app builder?

1 Answers