Developing React Redux Apps In Salesforce’s Visualforce

At Salesforce, we have tons of customers developing all sorts of apps (web, mobile, IOT and so on), and using all sorts of technologies and libraries to develop them.

In web apps category alone, we see people building web apps using either:

  1. Salesforce’s Visualforce or Lightning Components framework
  2. Open Source frameworks such as Angular, Backbone, Knockout etc., and usually use them inside Visualforce so they can run those apps within Salesforce. i.e. Use Visualforce mostly as a shell/wrapper to these apps.

Recently we are seeing a lot of interest in learning how to build React and Redux apps “Salesforce” app similar to Angular, Backbone etc. Let’s see how it can be built.

React App Development — Difference

Unlike, Angular 1, Backbone etc libraries where we simply load the framework’s single JS file and start using it, we can’t do the same in the React apps. This is because a “typical” React + Redux development has heavy dependency of Node.js, ES6, Babel, Webpack and so on and is developed almost like a Node.js (i.e. server-side) app.

Note: We can load several JS files corresponding to React, Redux and so on, individually into the browser, but that’s not practical. And also almost every example requires you to have a Node.js setup.

That means we now have Visualforce +Salesforce servers on one end, and React app + localhost on the other end. How to bring them together?

Let’s take a look at the setup:

The Development Setup

BTW, a quick note: The setup may look difficult but once you understand it, there’s really nothing to it and also most of the steps are “automatic” making it a breeze to build React Redux Apps in Visualforce. ⚡️

Image for post
Image for post

Please Note: You can click on the picture to zoom and read

  1. Terminal 1 — This is your 1st Mac Terminal. This is where you’ll run Webpack (React + Redux) server on port 8080 (default). This server also waits for any changes to the source code and generates a final JS file called “bundle.js” file when there is any change to the code.

“bundle.js” is essentially all the JS required for your app to work + JS required to create the HTML for the app. Note: if you are new, in React, even the HTML is represented in JS.

bundle.js = React.js + Redux.js + your app’s JS + your app’s HTML (in the form of JS) + any other JS lib you are using😮.

2. Terminal 2 — This is your 2nd Mac Terminal. This is where you’ll run ngrok. ngrok helps you expose bundle.js on your localhost to outside World (i.e. Visualforce in our case). You install ngrok and point it to port 8080 so that you can expose “bundle.js” to Visualforce.

Image for post
Image for post

3. Text Editor — This is your favorite text editor to build the app.

  1. Make changes to the code in your favorite editor and save changes. This is automatically picked up by the React +Redux server.
  2. The React server takes all the JS in the app (written in ES6), JSX (HTML part of the app), React, Redux and other libraries and compiles them into a single JS file called “bundle.js”. This single file is your entire app!
  3. Now, Refresh your Visualforce app, Visualforce tries to load the bundle.js from ngrok server (https://<blabla>.ngrok.io/bundle.js).
  4. ngrok server is configured to point to our localhost:8080 and so it uploads the new bundle.js from localhost.

This means, every time you make changes to the source, a new bundle.js is created instantly and is available in your Visualforce page! Just refresh the browser to see the changes!🎉

In Production

Once your are all done building your app, testing it and so on, all you need to do is it manually upload the final bundle.js file as a static resource and change the url in Visualforce.

<! — Uncomment and use the below for production to point to final static resource “reactreduxblog”(bundle.js) →
<! — <script src=”{!URLFOR($Resource.reactreduxblog)}”/> →

AJAX Calls — Visualforce Remote Objects

There are various ways of making AJAX calls to Saleforce server. For the demo app, I am using Visualforce Remote Objects because it’s the simplest.

<apex:remoteObjectModel name=”Post__c” jsShorthand=”Post”
fields=”Id, Name, Categories__c, Content__c” />

One caveat of using Remote Objects is that they don’t provide Promise interface for the AJAX calls. This makes it hard to use Redux’s “Actions”, so wrap CRUD functions in Promise like below.

export function getPosts() {
return new Promise((resolve, reject) => {
var post = new SObjectModel.Post();
// Use the Remote Object to query
post.retrieve({limit: 10 }, function(err, records, event) {
if (err) {//Promise Reject
return reject({data: {message: err.message}, status:400});
return resolve({data: {records: posts}}); //Promise Resolve

Get Started — Sample App:

The sample app is the same blog post app I’ve been using for regular React Redux apps. It has 3 pages that show routing, CRUD, form-validations and more. Learn more about how to build it here.

Image for post
Image for post
  1. Install Unmanaged Package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000YACJ
  2. Open: https://login.salesforce.com/apex/reactreduxblog


Get Started — Development Setup

Read the detailed instructions here: https://github.com/rajaraodv/react-redux-blog-vf

I plan to write more blogs related to this, so stay tuned 😃

That’s it!👍

My Other Blogs

  1. 5 JavaScript “Bad” Parts That Are Fixed In ES6
  1. Webpack — The Confusing Parts
  2. Webpack & The Hot Module Replacement [HMR]
  3. Webpack’s HMR And React-Hot-Loader — The Missing Manual
  1. Why Draft.js And Why You Should Contribute
  2. How Draft.js Represents Rich Text Data
  1. Step by Step Guide To Building React Redux Apps
  2. A Guide For Building A React Redux CRUD App (3-page app)
  3. Using Middlewares In React Redux Apps
  4. Adding A Robust Form Validation To React Redux Apps
  5. Securing React Redux Apps With JWT Tokens
  6. Handling Transactional Emails In React Redux Apps
  7. The Anatomy Of A React Redux App
  1. Developing React Redux Apps In Salesforce’s Visualforce

🎉🎉🎉 If you like this post, please 1. ❤❤❤ it below on Medium and 2. please share it on Twitter. You may retweet the below card🎉🎉🎉

Image for post
Image for post

Thanks for reading! 🙏👍

Written by

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store