Appexchange app, should I build for classic along with lightning component

Question

I've an appexchange app that puts a widget on Salesforce record using inline visualforce page. It works in both classic and lightning(under details tab).

However, I'm now considering to move away from the inline vf page to lightning component. My question is would I still need to keep the visualforce page to be used in classic? I need to keep supporting classic as some of our customers still use it.

The visualforce page uses AngularJS and the lightning components will be using lightning component framework as recommended. If I need to keep the vf page, do I need to keep and maintain two code bases?

Answer 1

You can use lightning component inside a VF page. In this way you can avoid maintaining the separate code base for VF Page. When VF Page will render it will display the lightning component.

Create a lightning Application

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

Create a VF Page

<apex:page standardController="Account">
    <apex:includeScript value="/lightning/lightning.out.js" />
    <apex:stylesheet value="/resource/slds0120/assets/styles/salesforce-lightning-design-system-vf.css"/>
    <apex:includeLightning />
    <div class="slds" style="margin-top:10px;margin-left:10px;"> 
        <div id="lightning" />
    </div>

    <script>
        var recId = "{!$CurrentPage.parameters.id}";
        console.log(accountId);
        $Lightning.use("c:MyLightningApp", function() {
          $Lightning.createComponent("c:MyComponent",
                { "recordId" : recId },
                  "lightning",
                  function(cmp) {
                     // alert("{!$CurrentPage.parameters.id}");
                    // do some stuff
               });
        });
    </script>
</apex:page>

Create attribute in your lightning component and use that attribute value in init call of lightning component.

<aura:attribute name="recordId" type="String" />

Hope it answer your question!!