BLOG ARTICLE

Quick guide to integrate react app with salesforce CRM

Share This Post

Whether you work as a Salesforce developer or architect, you have a JavaScript based app you need to integrate with Salesforce or you are a company creating third party services for the Appexchange ecosystem, you will find this article very useful.

As a trusted PDO provider, Nubessom has wide experience helping ISV Partners to efficiently create and market impactful products on the Appexchange.

Let's get to it!

JavaScript applications like React have become increasingly popular for building dynamic and interactive user interfaces. Salesforce, a leading customer relationship management (CRM) solution has also evolved to provide developers with more flexibility and options to build and integrate custom apps.

Combining the power of React with the robust features of Salesforce can help developers create powerful and engaging apps that deliver a seamless user experience.

How can you integrate Salesforce with React App

There are two ways on how you could integrate these technologies:

  1. Call Salesforce API’s from React App
  2. Expose Salesforce LWC components within React App

During this guide we will explore the second option mentioned above. We will divide it into three simple steps to help you do it on your own. 

Salesforce Lightning Out is a feature of the Salesforce Lightning Platform that allows developers to embed Salesforce components and functionality into external websites and applications. This allows developers to create a seamless user experience by integrating Salesforce data and functionality into their own custom-built applications.

Step 1 - Authentication

Lightning Out doesn’t handle authentication. Instead, you manually provide a Salesforce session ID or authentication token when you initialize a Lightning Out app.

In our example we’ll be using Visualforce and session ID using the expression {! $Api.Session_ID } for simplicity:

				
					<apex:page showHeader="false" sidebar="false" standardStylesheets="false"  applyBodyTag="false" applyHtmlTag="false">
<html>
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
    <form>
      <input type="hidden" name="session" id="session" value="{! $Api.Session_ID }"/>
    </form>
    <!-- reactjs -->
    <div id="app" />
    <script src="http://localhost:7777/index.js"/>
  </body>
</html>
</apex:page>

				
			

Step 2 - Lightning Web Component

Lightning Out requires an Aura Application that extends ltng:outApp and lists all components that we are planning to use as dependencies:

<aura:application extends=”ltng:outApp” access=”global”>

    <!–Lightning component–>

    <aura:dependency resource=”c:exampleLWCComponent”/>

</aura:application>

In this example we are defining  c:exampleLWCComponent LWC component as a dependency.

Now lets create a simple LWC that accepts one parameter:

				
					HTML
<template>
    <p>Hello World</p>
    <p>{additionalInfo}</p>
</template>


				
			
				
					JS
import { LightningElement, api } from 'lwc';

export default class ExampleLWCComponent extends LightningElement {
    @api additionalInfo;
}

				
			

Step 3 - React Component

Finally, we’ll now need to create a react component which will render our LWC

				
					import _ from "lodash";
import React from "react";

export class App extends React.Component{
    componentDidMount() {
        const componentName = 'c:exampleLWCComponent';
        const appName = 'c:exampleLWCDependencyApp';
        const token = JSON.stringify(document.getElementById("session").getAttribute("value"));
        const orgUrl = 'https://your-org.my.salesforce.com';
        //you can pass any data you may need to the LWC component
        const additionalInfo = 'Whatever info that needs to be passed to LWC';
        this.loadScript(componentName, appName, token, orgUrl, additionalInfo);
    }
    loadScript(componentName, appName, token, orgUrl, additionalInfo ) {
        const script = document.createElement("script");

        script.src = orgUrl + "/lightning/lightning.out.js";
        script.async = true;
        script.onload = () => {
            $Lightning.use(appName, function() {
                $Lightning.createComponent(componentName, { additionalInfo : additionalInfo }, 'lightning', function() {
                });
            }, orgUrl ,token);
        };
        document.body.appendChild(script);
    }
    render() {
        return (<div id="lightning"></div>);
    }
}

export default App;

				
			

Above React component will import LightningOut JavaScript framework and render our LWC component within div tag with id “lighitning”.

We can also pass any additional information from React to LWC via additionalInfo variable in this sample.

Summary

Now you can use Salesforce data within your React app and render the same React App within Salesforce instance to allow seamless user experience.

You can find all code referenced in this article available here: https://github.com/Nubessom/react-in-salesforce

If you have a JavaScript based app and you need help integrating it to Salesforce or distribute your app through AppExchange to millions of existing Salesforce customers, get in touch here, we are excited to hear from you and your challenge.

About the Author
Timur Begishev, Develeoper @ Nubessom

Timur Begishev, Develeoper @ Nubessom

Highly motivated and result oriented professional with extensive SW development expertise and good customer facing communication skills. Strong understanding of agile development methodology, experienced working with SCRUM.

Let´s talk about your challenge!

    In order to provide you the content requested, we need to store and process your personal data. If you consent to us storing your personal data for this purpose, please tick the checkbox below.


    You can unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

    Need more Inspiration? keep reading Our related content

    News

    2 best Salesforce Updates in 2023

    We are excited to share with you the two most significant updates that are coming to Salesforce in 2023 – Einstein GPT and Genie Data Cloud. These updates promise to revolutionize how businesses use Salesforce CRM, making it more intelligent, efficient, and effective than ever before.
    Read More »
    Blog Article

    Quick guide to integrate react app with salesforce CRM

    Whether you work as a Salesforce developer or architect, you have a JavaScript based app you need to integrate with Salesforce or you are a company creating third party services for the Appexchange ecosystem, you will find this article very useful.
    Read More »