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. ⚡️

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

Configuration

  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.

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

How It Works

  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:remoteObjects>
<apex:remoteObjectModel name=”Post__c” jsShorthand=”Post”
fields=”Id, Name, Categories__c, Content__c” />
</apex:remoteObjects>

Promise-ify Remote Objects

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.

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

Live App (Same App on Heroku w/ more features):

https://protected-escarpment-79486.herokuapp.com

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

ES6

  1. 5 JavaScript “Bad” Parts That Are Fixed In ES6

WebPack

  1. Webpack — The Confusing Parts
  2. Webpack & The Hot Module Replacement [HMR]
  3. Webpack’s HMR And React-Hot-Loader — The Missing Manual

Draft.js

  1. Why Draft.js And Why You Should Contribute
  2. How Draft.js Represents Rich Text Data

React And Redux :

  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

Salesforce

  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🎉🎉🎉

Thanks for reading! 🙏👍