React Running Inside Salesforce
Embedding custom React SPAs inside Salesforce Lightning Web Components (LWC) to bypass standard UI limits.
Value Delivered:
Allowed sales representatives to configure custom complex product bundles in half the time by replacing a 7-step standard wizard with a single unified screen.
1. Project Overview
Salesforce LWC is powerful, but creating heavy interactive interfaces (like dynamic calendars or drag-and-drop bundle engines) is slow and complex. This project embeds a fully responsive React SPA inside Salesforce LWC.
2. Business Problem & Goals
Core Challenge
Sales representatives spent too much time loading, saving, and navigating through multiple custom objects to configure a complex consultation package. Standard page layouts forced user flows into repetitive clicks.
Key Project Goals:
- Consolidate a 7-step wizard into a single, high-fidelity React interface.
- Sync all changes back to Salesforce Opportunity Line Items in real-time.
- Leverage existing Salesforce login credentials, bypassing separate app hosting.
3. Technical Architecture
The container LWC acts as the bridge. It imports the React bundle, mounts it in a shadow DOM container, and exposes apex query actions. When React needs data, it dispatches events that LWC listens to and responds to using Apex database calls.
System Integrations Map
Mermaid Diagram Code representation:
graph TD LWC[Lightning Web Component Container] -->|Injects App| DOM[Shadow DOM Element] DOM -->|Mounts| React[React Bundle Asset] React -->|Dispatches CustomEvent| LWC LWC -->|Invokes Apex| Apex[Apex Database Controller] Apex -->|SOQL Data| LWC LWC -->|Message Event| React
Connected APIs
- Salesforce Apex Controller actions invoked asynchronously by Javascript
Component Stack
- opportunityBundlerContainer (Lightning Web Component)
- OpportunityBundlerApexController (Apex Class)
- OpportunityBundlerReactSPA (React Application bundle)
Key Design & Technology Decisions:
4. Screenshot Gallery
Embedded custom product configurator screen operating seamlessly inside an Opportunity record page.
Build in Public & Timeline
Project Timeline Phasing
Created mock LWC loading simple index.html asset.
Set up Vite compilation to generate single-file outputs.
Implemented event listeners mapping custom events to Apex calls.
Validated Opportunity CRUD security rules on 4 profile types.
Deployed to sales org, reducing configuration times by 50%.
Technical Build Journal
Salesforce LWC shadow DOM prevents global CSS sheets from leaking in. We solved this by compiling Tailwind utility styles directly into the React component bundle rather than linking external stylesheets.
Lessons Learned
Static resource cache validation in Salesforce can be tricky. When deploying updates, browsers served cached static JS files. We resolved this by adding version headers and using cache-busting queries during package deployment.
Future Roadmap
- Build a reusable LWC wrapper package to easily embed any Vite/React app.
- Add support for offline data syncing inside the mobile Salesforce app.
Start Streamlining Your Systems
Schedule a quick 15-minute consultation to walk through your operational bottlenecks. No corporate jargon—just practical engineering advice.