How to bring lightning component loaded in to a VF page via a quick action?

Question

I have a lightning component which retrieve/update some account details.

I want to call this component from a quick action. In order to call it from a quick action I need this to be in a VF page.

Is there a way to directly access this component (without calling the application) in a VF page? (I do NOTneed to load the component through a domain->application)

I tried below code but it shows me just a blank page. Could some one please help me with this.

Please see the code below

visualForce page (I need the component to be displayed inside this VF page)

<apex:page >
<apex:includeScript value="/lightning/lightning.out.js" />
<apex:includeLightning />

<div id="lightning" />

<script>
    $Lightning.use("c:AccountsList", function() {
      $Lightning.createComponent("AccountsListTest",
      { label : "Press Me!" },
      "lightning",
      function(cmp) {
        var test = 'test';
          alert(test);
      });
    });
</script>

Apex Controller Class

public class AccountsController {
   @AuraEnabled
   @RemoteAction
   public static List<Account> getAccounts() {
        return [SELECT id, Name, Industry, CreatedDate
                FROM Account
                ORDER BY createdDate DESC];
    }
}

AccountsList lightning Component

    <aura:component controller="AccountsController">
  <aura:attribute name="accounts" type="List" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <!-- Use the Apex model and controller to fetch server side data -->
  <table class="slds-table slds-table--bordered slds-table--striped">
      <thead>
        <tr>
            <th scope="col"><span class="slds-truncate">ID</span></th>
            <th scope="col"><span class="slds-truncate">Name</span></th>
            <th scope="col"><span class="slds-truncate">Type</span></th>
            <th scope="col"><span class="slds-truncate">Number Of Employees</span></th>
            <th scope="col"><span class="slds-truncate">Ticker Symbol</span></th>
            <th scope="col"><span class="slds-truncate">Phone</span></th>
            <th scope="col"><span class="slds-truncate">Details</span></th>  
        </tr>
      </thead>
      <tbody>
      <aura:iteration items="{!v.accounts}" var="account">
       <tr>
         <td>{!account.Id}</td>
         <td>{!account.Name}</td>                 
         <td>{!account.Type}</td>
         <td>{!account.NumberOfEmployees}</td>                 
         <td>{!account.TickerSymbol}</td>
         <td>{!account.Phone}</td>
         <td>
            <c:button class="slds-button slds-button--neutral" 
                 label="Details" 
                 svgXlinkHref="/resource/slds0120/assets/icons/standard-sprite/svg/symbols.svg#account" 
                 svgClass="slds-icon slds-icon-text-default"
                 onclick="{!c.showDetails}"
                 data="{!account.Id}"
            />
          </td>
       </tr>
     </aura:iteration>
   </tbody>
 </table>
</aura:component>

Controller.js

({
     doInit : function(component, event, helper) {      
        //Fetch the expense list from the Apex controller   
        helper.getAccountList(component);
    },
    showDetails: function(component, event, helper) {
        //Get data via "data-data" attribute
        alert(event.target.getAttribute("data-data") + " was passed");
    }
})

Helper.js

    ({
     //Fetch the accounts from the Apex controller
    getAccountList: function(component) {
        var action = component.get("c.getAccounts");

        //Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set("v.accounts", actionResult.getReturnValue());            
        });
        $A.enqueueAction(action);
    }   
})

Thanks in advance.

Answer 1

From the docs blog, in order to add a lightning component to a visualforce page...

you need to reference a Lightning app. This app is globally accessible and extends ltng:outApp. The app declares dependencies on any Lightning definitions (like components) that it uses...

According to this walkthrough blog, the app acts as a bridge between the two:

In order to display a Lightning Component in a Visualforce page, you need to construct a simple Lightning Application that is used as the bridge between the two technologies. This needs to have a dependency on the Lightning Component that will display the content...

In your case you would want to have an app something like:

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:AccountsList" />
</aura:application>  

Then in your visualforce page you set the $Lightning.use is set to the application and $Lightning.createComponent is set to the component. Another great blog here that breaks it all down.

Answer 2

It appears that you are trying to load your component and then create some non-existing component.

Instead, you will need to load Lightning application and then dynammically create your component on the page.

Create new application and like in Jenny B answered, define c:AccountsList as dependancy.

Then, change your page to:

$Lightning.use("c:YourLightningApplicationName", function() {
  $Lightning.createComponent("c:AccountsList",