I am attempting to insert a lightning component into a visual force page for use on my site. I have the visual force page set up to use the lightning component, and the lightning component is properly connected to its controller. I know the lightning component works because I can drag it into a community portal page and it works perfectly. I have the necessary apex class is in the VF pages Apex Class Access but it is still not working. I don't even get a debug log when I run the page (indicating that the apex class doesn't run). The following is my relevant code:

VF Page

<apex:page controller="EntireSiteApexClass" showHeader="false" sidebar="false">
    <apex:includeLightning />
    <div id="lightning" />
       $Lightning.use("diznp123:lightningtest", function() {
              function(cmp) {
                console.log("button was created");
                // do some stuff

Lightning App

<aura:application  access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
   <c:EntireSiteComponent /> 

Entire Site Component

<aura:component controller="diznp123.EntireSiteApexClass" access="global" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction">
    <aura:attribute name="ScreenCounter" type="Integer" default="1" />
   <!-- Login Component --> 
  <aura:attribute name="Username" type="String"/>
   <aura:attribute name="Password" type="String"/>
    <aura:attribute name="Result" type="boolean" default="true"/>
    <lightning:navigation aura:id="navService"/>
      <aura:attribute name="pageReference" type="Object"/>
    <aura:if isTrue="{!v.ScreenCounter == 1}">
     <div class="slds-align_absolute-center" style="height:42rem;width:89.7rem;padding:2rem">
        <lightning:layout horizontalAlign="center"> 
               <lightning:layoutItem size="12">
                   <td><lightning:input aura:id="usernameId" value="{!v.Username}" minlength="0" maxlength="18" label="Username"></lightning:input></td>
               <lightning:layoutItem size="12">
                   <td><lightning:input aura:id="passwordId" type="password" value="{!v.Password}" minlength="0" maxlength="18" label="Password"></lightning:input></td>
                  <div class="slds-m-vertical--medium">
             <div >
             <td><lightning:button label="Login to Payment Portal" onclick="{!c.portalLogin}"  variant="brand"></lightning:button></td>
                      <lightning:layoutItem size="12">
                      <tr><td><lightning:button label="Forget your Password?" variant="base" onclick="{!c.forgotPassword}" disabled="true"></lightning:button></td></tr>
         <aura:if isTrue="{!not(v.Result)}">
             <p>Incorrect Password {!v.url}</p>

Entire Site Apex Class

public with sharing class EntireSiteApexClass {
    /////////// Login Controller ////////////
    public String Resource { get; set; }
    public String username {get;set;}
    public String password {get;set;}
    public static boolean loginFunction(){
        return true;

Any help would be greatly appreciated, let me know if I need to provide anything else.

1 Answer 1


Your Lightning App markup is incorrect. It should be:

<aura:application  access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
   <aura:dependency resource="markup://c:EntireSiteComponent" /> 

Everything else appears to be correct.

  • Hello, I've changed what you said and it still doesn't seem to connect to the apex class, is there anything else you could suggest? Oct 6, 2021 at 20:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .