Introduction
Salesforce is a robust CRM platform, and integrating it with a modern front-end framework like React can enhance user experience significantly. One of the our customer wanted to use a open source React App to be able to create advance email templates in Salesforce using this plugin: https://github.com/usewaypoint/email-builder-js
This blog explores how we approached and tried different ways to integrate a React application into Salesforce, leveraging technologies like Aura, Lightning Web Components (LWC), Visualforce, or Lightning Out.
Why Integrate React with Salesforce?
- Enhanced UI/UX: React’s component-based architecture provides flexibility and a seamless user experience.
- Reusable Components: React allows you to reuse components, speeding up development.
- Real-Time Data Updates: Synchronize Salesforce data with real-time updates using React’s state management.
Integration Approaches
Using React with LWC
- Steps Taken: Created a React build, uploaded it as a static resource, and loaded it in LWC using loadScript.
- Outcome: Not functional; encountered issues with resource loading and compatibility.
Create React Build and Import via Static Resources
- Steps Taken: Bundled React components using Webpack and tried to integrate into LWC.
- Outcome: Not working; faced compatibility issues between React and Locker Service.
Use React with LWC via an iFrame
- Steps Taken: Bundled React components using Webpack and tried to integrate into LWC.
- Outcome: Not working; faced compatibility issues between React and Locker Service.
This approach is best approach as Aura supports Webpack and it worked for us, this is explained further.
Using Aura Components with Webpack
Approach
Use Aura components to bypass some of Locker Service’s limitations and use Webpack to bundle and integrate the React app.
Implementation Steps
- Setting up entry points and output paths.
- Adding loaders for JavaScript/TypeScript and CSS files.
- Including plugins like HtmlWebpackPlugin to generate the final index.html: https://webpack.js.org/plugins/html-webpack-plugin/
- Use Babel to transpile modern JavaScript/TypeScript syntax into a format supported by older browsers. The Babel configuration included presets like @babel/preset-env, @babel/preset-react, and @babel/preset-typescript.
- Some help article: https://rossmorran.medium.com/using-babel-to-support-older-browsers-7cbf239dfef2
- In the Aura component, use the Lightning Container Component (lightning:container) to load the React app via its Static Resource path of index.html.
- The container provides seamless integration between Salesforce and external applications, enabling bidirectional communication through messaging APIs.
- Use the Lightning Container’s postMessage API for communication between the React app and Salesforce.
- For example, the React app sends data to Salesforce using window.parent.postMessage(), and Salesforce Aura components listen to these messages using the message event.
- Here is Salesforce doc: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/container_sending_messages.htm
Conclusion
Ready to supercharge your Salesforce instance with the power of React? At Tenetizer Technologies, we specialize in bridging cutting-edge technologies with Salesforce, delivering tailored solutions that drive productivity and engagement. Whether it’s building React apps, integrating complex systems, or optimizing your Salesforce setup, our expert team has you covered. Let’s bring your vision to life— reach out today to explore the possibilities!