Press "Enter" to skip to content

Embed front-end JavaScript (vuejs, react, angular) apps into SalesForce page (by Aura component)

I will show in this short tutorial how to embed our front-end application into SalesForce page (by component). Our front-end application can be done in whatever framework you want. It can be VueJS, ReactJS, Angular or even any kind of front-end application, also written in pure JavaScript code without frameworks.

I must admit that I’m not the SalesForce developer, but once I needed to play with that a little, and I found that this topic is not so well documented and might be helpful for many developers how to do it and test in on your own SalesForce demo instance.

Embedding own, custom, apps inside SalesForce page is done by Aura component. Aura components in SalesForce is more or less something comparable to SalesForce own front-end framework. It has its own xml-like markup syntax + JavaScript controller which has a little similar syntax to that what we know from other main JavaScript frameworks.

I will list whole instruction below, but in general the case is quite simple. We need to build our custom front-end app, publish it in SalesForce Org instance as a static resource, next create a new Aura component and link it with your app placed in static resources.

Sounds easy? Yes, and really it is easy, but you need to remember about a few important things which I will write down below. I will provide also instructions how your application can “talk” with Aura component inside SalesForce using LCC.

Let’s go through whole procedure step by step.

1. Create SalesForce demo instance, build your development environment and connect each other

  1. Create an account on “SalesForce Developers”: developer.salesforce.com
    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page

    Next you will be asked to fill in the registration form, receive confirmation email, login to your account and establish a password. If you do not receive verification email, check SPAM folder in your mail box. It happens for me quite often with emails from SalesForce.

  2. Once you will login into your SalesForce demo account find in top right corner button “Switch to Lightning Experience” like on image below:
  3. You will be moved to your main page of your ORG – it looks like on image below. What is “Org”? This is more or less your SalesForce app demo instance with its own data, customization, workflows etc.

    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page
  4. We need now to establish whole development environment on our computer. Visual Studio code is IDE suggested by SalesForce to use in that case. So first – please download the VSCODE HERE.
  5. Next download and install SalesForceCLI from here: https://developer.salesforce.com/tools/sfdxcli.
  6. Next in Visual Studio code go to extensions and installĀ  package “Salesforce Extension Pack”.
  7. In VS CODE press CTRL + SHIFT + P and type “SFDX: Create project”, than sfdx will ask you several questions, like on images below, answer it with default answers:
    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page

    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page
  8. As the result, your project will be created and in the left pane you will see its whole structure:

    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page
  9. Press now CTRL+SHIFT+P and type “SFDX: Authorize an ORG” and you and then, again, follow questions with giving the default answers:
    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page

    Next in bottom – right corner you will see notification box “Running SFDX: Authorize and Org” like on image below:

    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page

    And your default browser will be opened with SalesForce default login page:

    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page

    You need to put here your login and password. If you do not remember your login, go to your mailbox and find SalesForce verification email:

    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page

    Once you login, then the main page of your SalesForce Org (instance) will be opened:

    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page

    And in VS CODE in bottom – right corner you will see notification: “SFDX: Authorize and Org successfully ran”:

    Embed front-end apps into SalesForce page
    Embed front-end apps into SalesForce page

    So it means now we have connected our development environment with our SalesForce instance (ORG) and using SFDX we can create and deploy components or resources.

    In next steps I will show you how to build Aura Component, set your app as static resource and connect each other and deploy that to you SalesForce instance (ORG).

2. Prepare your front-end project (here VueJS CLI project)

We are going now to make the most important part of our short tutorial – to embed our front-end (react, vue, angular, pure js) app within SalesForce via Aura Component. So first, we need to have our front-end app. It is important how it is built for a distribution from your framework.

The most important thing with your front-end application is that it must be opened properly just by opening it’s index.html file (or other main file if it has different name). I will show you how to do that based on VueJS project with Vue CLI.

So let’s say we have very small VueJS project with name “external-frontend-app-for-salesforce” running during the development on address: http://localhost:8081/ like on screen shot below:

Embed front-end apps into SalesForce page
Embed front-end apps into SalesForce page

But we can’t just write in Vue CLI in terminal window comman “npm run build” because this build will not be prepared to open app directly by double click on index.html file.

In our Vue CLI project we must create file in root directory vue.config.js and put this simple code there, which is extending the webpack configuration in background:

module.exports = {
  outputDir: 'dist-local',
  publicPath: './'
}
Embed front-end apps into SalesForce page
Embed front-end apps into SalesForce page

When we run now npm run build command in terminal window in that project, it will create dist-local folder where all external JavaScript files will be placed with relative ./ path and when you click on index.html file – it will be opened correctly:

Embed front-end apps into SalesForce page
Embed front-end apps into SalesForce page
Embed front-end apps into SalesForce page
Embed front-end apps into SalesForce page

And now, in dist-local folder we have a right package to embed under the SalesForce Aura component. Of course, if you are using the different front-end framework you must prepare that in another way, this was only example for my favorite framework – VueJS.

3. Embed your front-end app within SalesForce Aura component

  1. First thing to do here is to create a staticresource with our app’s distribution package. The static resource is a directory in your’s SalesForce project where you keep, as name says, external files, like third-party libraries, static files (images), and, e.g. your own application.
  2. Next, we create xml file with meta description of our static resource in force-app\main\default\staticresources directory. It’s name must be in format “staticresource-name.resource-meta.xml”, where, of course, staticresource-name is name of our app. In my case it is external_frontend_app_for_salesforce so the meta description file name is as following:
    external_frontend_app_for_salesforce.resource-meta.xml.
  3. The content of external_frontend_app_for_salesforce.resource-meta.xml file is strictly defined and must be like below:
    <?xml version="1.0" encoding="UTF-8"?>
    <StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
        <cacheControl>Private</cacheControl>
        <contentType>application/zip</contentType>
    </StaticResource>

    Embed front-end apps into SalesForce page

  4. Next, we must create a new folder in force-app\main\default\staticresources directory with the name of our application, in my case it is external-frontend-app-for-salesforce where I copy all distribution package files, just by copy-paste.
  5. Result of all previous steps is like on image below:
    Embed front-end apps into SalesForce page
  6. Do right click on staticresources folder and click SFDX: Deploy Source to Org:
    Embed front-end apps into SalesForce pageAnd in bottom right corner you will see:
    Embed front-end apps into SalesForce pageAfter a while you will see:Embed front-end apps into SalesForce page

    If you have big application it can take even a few minutes.

  7. Next, we must create Aura component, which will host our application. Find folder aura in your SalesForce project, and do right click on it:Embed front-end apps into SalesForce page
  8. Next type name of your Aura component, in our case it will be just myFrontendApp:
    Embed front-end apps into SalesForce pageIn next question just press enter:Embed front-end apps into SalesForce page

  9. As the result – Aura component is in place:Embed front-end apps into SalesForce page
  10. Next, open myFrontendApp.cmp file. This file is more or less similar to XML code. Here we create the markup of our component, like in HTML for normal website. The content of that file in our case must like below. You can see that in lightning:container tag we make a linkage to our index.html file of VueJS app distribution package placed in staticresources folder:
    <aura:component implements="flexipage:availableForAllPageTypes" access="global" >
        <lightning:card title="VUE APP TEST">    
        
            <lightning:container aura:id="vueApp" src="{!$Resource.external_frontend_app_for_salesforce + '/index.html'}" />
    
        </lightning:card>
    </aura:component>
  11. Open myFrontendApp.css file and add there a following code. This is importnat to make our component higher in SalesForce page.
    .THIS {
      height: 600px;
    }
    
    .THIS iframe{
      height: 600px;
    }
  12. Do right click on myFrontendApp folder inside aura directory and click SFDX: Deploy Source to Org :
    Embed front-end apps into SalesForce pageThis operation can take a while, as result you will see:
    Embed front-end apps into SalesForce page
  13. Important tip: If “Deploy Sorce to Org” fails, then check your connection. maybe you are behind work VPN or some ports are being blocked in your network.

4. Add aura component with your front-end app to SalesForce page

So now everything is in place from code perspective. We need only to place our Aura component with our front-end (here VueJS) app into a SalesForce page. We will place our component into the main page of our Org (SalesForce instance). This is very easy, login again to you Org (you can find URL and login in confirmation email from SalesForce).

  1. When you are logged in click “9 dots button” in top left corner and click “Service”:
    Embed front-end apps into SalesForce page
  2. In the main page, click “cog” icon and click “Edit page”:
    Embed front-end apps into SalesForce page
  3. Here, scroll down left column with “Components” where are “CUSTOM” components. Here you can find your own Aura component myFrontendApp.
    Next: drag and drop your component in wanted place of you main page.
    Next: click Save.
    Next: click “Back” arrow button:
    Embed front-end apps into SalesForce pageYou can be asked also about creating this page as your main SalesForce page. Click then Activate, configrm and Save it again. After that press “Back” button”. You can find that option also under “Activation…” button.Embed front-end apps into SalesForce page
  4. On main SalesForce page, after a while, your component with your Front-end app (here VueJS app) will be visible:
    Embed front-end apps into SalesForce page

This is the end. Read next article about sending data (messages) to and back SalesForce from your external custom JavaScript app. READ IT HERE.