Insert JavaScript vuejs/react/angular apps into SalesForce page

I will show in this short tutorial how to insert JavaScript application (in React, Vue, Angular) into SalesForce page (by Aura component). Our JavaScript 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 integrate e.g. ReactJS app with SalesForce and test it on SalesForce demo instance.

Embedding own custom JavaScript (React/Vue/Angular) 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 JavaScript 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. In my case I created VueJS application and I inserted it inside SalesForce page.

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.

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

1. Create an account on “SalesForce Developers”: developer.salesforce.com

   

   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 means SalesForce “Org”? This is more or less your SalesForce app demo instance with its own data, customization, workflows etc. Maybe “ORG” is shortcut from organization? I do not know 🙂

   

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:

   

   

   

8. As the result, your local SalesForce development project will be created and in the left pane you will see its whole structure:

   

9. Press now CTRL+SHIFT+P and type “SFDX: Authorize an ORG” and you and then, again, follow questions with giving the default answers:

   

   

   

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

   

   And your default browser will be opened with SalesForce default login 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:

   

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

   

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

   

   So it means now we have connected our local 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).

Prepare your JavaScript app (here VueJS project)

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

The most important thing with your custom JavaScript 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 application with name “external-frontend-app-for-salesforce” running during the development on address: http://localhost:8081/ like on screen shot below:

But we can’t just write in Vue CLI in terminal window command “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: './'
}

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:

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

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>

   

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 whole Vue JavaScript app’s distribution package files, just by copy-paste.
5. Result of all previous steps is like on image below:
   
6. Do right click on staticresources folder and click SFDX: Deploy Source to Org:
   
   And in bottom right corner you will see:
   
   After a while you will see: If you have big JavaScript (Vue, React, Angular) 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:
8. Next type name of your Aura component, in our case it will be just myFrontendApp:
   
   In next question just press enter:
9. As the result – Aura component is in place:
   
10. Next, open and edit 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 Vue JavaScript 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 important to make our component’s container 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 :
    
    This operation can take a while, as result you will see:
    
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.

Add aura component with your custom JavaScript app to SalesForce page

So now everything is in place from code perspective. We need only to place our Aura component with our JavaScript (here Vue app, but could be the same React or Angular) 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”:
   
2. In the main page, click “cog” icon and click “Edit page”:
   
3. Here, scroll down left column with “Components” where are “CUSTOM” components. Here you can find your own Aura component containing custom Vue JavaScript app myFrontendApp.
   Next: drag and drop your component in wanted place of you main page.
   Next: click Save.
   Next: click “Back” arrow button:
   You 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.
4. On main SalesForce page, after a while, your component with your Front-end app (here VueJS app) will be visible:
   

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

Related posts:

Create modal window in vanilla JavaScript VueJS – loading spinner component Send data between SalesForce and JavaScript Vue/React/Angular app in Aura component