Silverline continues to see a large demand for heavy custom front-end development. To tackle these projects, we have adopted the ReactJS framework for building our applications’ views and Redux for managing their state. For an intro to using ReactJS and Redux on Salesforce, take a look at Bryan Anderson’s article, How-to Use ReactJS and Redux in Salesforce.

Working with JavaScript frameworks in the cloud can be tricky when you are accustomed to working directly with the servers that host your code. For instance, calling apex methods using JavaScript remoting won’t work if you are hosting your code on a local development server without a lot of extra error-prone work to make mock calls. That means that you are stuck compiling your code into a static resource and deploying to a sandbox any time you want to see your updates reflected in Salesforce. Luckily there are some really useful tools out there that make working with ReactJS and Redux much more efficient on the Salesforce platform!

Localforce

Localforce is a Chrome extension that allows you to inject visualforce and apex code onto a page you are running on localhost. What this means from a functional perspective is that you can test your React code and CSS styling locally without needing to deploy to Salesforce first, while still accessing the JavaScript remoting methods from your visualforce page. This lets you take advantage of things like Webpack’s dev server and hot module replacement if you choose.

Localforce is really useful when developing the initial build of an app, or working on any app that does not use the Salesforce REST API. It’s especially useful if your build process is slow, or you are just working on updating the styling of a page.

To set up Localforce:

1. Add it to Chrome in the chrome web store.
2. Go to the visualforce page on Salesforce that you want to run locally, click the Localforce icon, then click ‘Save Current Page’.
3. Navigate to a page you are running on a local dev server (for example, at localhost:8080), then refresh the extension by clicking the Localforce icon and selecting ‘disable’ then ‘enable’. Note: You will need to occasionally refresh the extension by clicking the icon and clicking the ‘disable’ and then ‘enable’ button when you notice your page is unable to find the visualforce methods anymore.

Proxly

Proxly is a Chrome app and extension combo that works similarly to Localforce but instead of injecting the visualforce and apex code, it allows you to replace the JavaScript and CSS source files on a webpage with local files on your machine. What this means for you is that you can run your local React code and CSS on a Visualforce page without compiling a deploying a static resource.

Proxly is useful in the same situations as Localforce, but in addition it works even if you are using the Salesforce REST API on your page, if you are navigating to your page from somewhere else in Salesforce and want to test that interaction, or if you want to see how your CSS interacts with the standard Salesforce CSS to ensure that your resets are working or that your CSS has enough specificity.

To set up Proxly:

1. Download the Chrome app and the Chrome extension from the Chrome web store.
2. Open the app either from the Chrome App Launcher or by right-clicking the Proxly icon in Chrome and choosing ‘options’.
3. There will be a default option for using a local directory and one for a web server. For our purposes, we will use the local directory option.
4. Give the local directory option a name, select ‘Browse’ and choose the folder that contains that code which matches what is in your static resource. Most likely this is your build folder.
5. Leave the regex in the ‘Match’ field alone, it defaults to the correct values.
6. Navigate to the page where you want to run Proxly, click the Proxly Chrome icon, and next to the option you set up click the ‘redirect’ toggle button. It should switch to ‘On’ now, and the two toggles at the bottom, ‘Server’ and ‘LiveReload’ should turn on as well.
7. Your page will refresh. In the URL bar in chrome, you will see a shield that says ‘This page is trying to load scripts from unauthenticated sources’ when you click it. Click ‘Load unsafe script’. This happens because the files that are being replaced in your visualforce page are not being served via https. Unfortunately, this is a necessary step to run Proxly. If you are not comfortable doing so, I recommend using Localforce instead.
8. Now whenever the files in the folder you selected are updated, the page will refresh and reflect the changes that were made.

Ngrok

Ngrok is another nice tool for working with code locally and having it run on Salesforce without deploying the code. It allows you to expose your local code via a public URL, so you can simply import the code from their directly on your visualforce page. There is an excellent write-up of how to work with it in Salesforce specifically in Developing React Redux Apps In Salesforce’s Visualforce. The benefit of Ngrok compared to Localforce or Proxly is that it is not browser dependent. You just set it up from the command line and then include your code on your visualforce page using the public URL provided by Ngrok. You can run it for free, but note that in order to use a stable URL that does not change, you will need to purchase a license. Check out the Ngrok website to purchase licenses and to get more information about NGrok.

Mavensmate

Mavensmate is an add-on for Sublime Text, Atom, and coming soon to Visual Studio Code that allows you to create new files, run tests, view metadata, and deploy to a Salesforce instance. If you use one of these text editors, it is a much nicer experience than using the built in Salesforce developer console.

One of the killer features for working with React on Salesforce is the ability to create Resource Bundles from static resources. You can view and update the files in a static resource and then deploy them back to Salesforce with a single command.

For more information, and for instructions on how to install Mavensmate, check out the Mavensmate website and the GitHub repo.

React Developer Tools Browser Extension

The React Developer Tools Extension is useful for debugging your React code in Chrome or Firefox. It allows you to inspect an element on the page, and then see the React parent and sub-components that your code creates. For instance, if you have a <Silverline/> component in React, it might ultimately render as a table with a header but in your React code you broke it up into a <Header/> and a <Table/> component and passed some props to each. With this dev tool, you will be able to see that Header and Table are both sub-components of Silverline, and you can see and edit the props that are passed to them.

For instructions on where to find it and some more information on how to use it, see their Github repo here.

Redux Developer Tools Browser Extension

The Redux Developer Tools extension is another extension that makes working with Redux a blast. It allows you to see the state of your application at any point in time, to see each action that is called and the data that is passed with that action, and it allows you to traverse those actions to set your state to the state resulting from those actions. This makes testing things like spinners that pop-up while waiting for data much easier. You just move your state back to when you called your waiting start action, and inspect and adjust the CSS to your heart’s content.

For more details on using and installing this extension, go to their Github Repo here.

If you are looking for some general tools for working efficiently with Salesforce, Kara Lawhorn wrote about some in her article 6 Tools to Help you be Ridiculously Efficient in Salesforce.