Setting up Dev tools for Salesforce Project that uses ReactJs library

Problem Statement :

You are building a visualforce page which has React JS library and you want to split your React code into multiple files as per javascript best practices and maintain your React JS folder inside your mavensmate project .You need your tooling to help you with local development in offline as well you are in search of a convenient mechanism to handle pushing your changes to SFDC static resource with minimum effort . 

The static resource once zipped in salesforce ,its hard to edit even for awesome tools like mavensmate .Mavensmate tool is a well known IDE and it comes with resource bundle for this process where one can create a bundle with JS ,CSS and image files and then convert these bundles to the static resource .

This process will not work for the React JS files as React JSX needs to be transformed into JS files before the actual code is shipped to the Production .

There are multiple ways to solve this tooling problem and in this post we  will set up our tools for salesforce project using combination of gulp and mavensmate

Prerequisite:

1. You have node installed in your system
2. You understand gulp.js (Using gulp you can automate your workflow build for JavaScript Projects)
3. You are in process of learning React JS and understand the library
4. You are familiar with mavensmate IDE for apex and visualforce development

In my last article we created a simple page with React and all code was inside the single visualforce page  making it harder to maintain and debug .We will use the same Visualforce page and I will walk through the process of how we can be more structured and modular making life simpler for debugging and deploying and of course having fun by doing development locally .

To get started you can clone the repo below and have gulpfile.js and package.json copied to your project folder and also you can create a sample folder structure for ReactJs as per my git project

Observe the gulp file ,it has two major tasks

1)Build task


This will create a separate folder dist/build and concatenate all JS react modules using browserify(Browserify will transform using JSX to JS files) .Also note in JSX files how we have used require and module.exports function .If you are familiar with node.js this is common pattern to export module and configure dependencies .

2)Zip task


This task will zip our final JS files from build folder and place in our mavensmate static resource folder .Note its ideal to create Static resource on server (Salesforce)and sync to mavensmate so that you have meta xml .Else you will need to create your own meta xml for pushing from mavensmate.(Remember deployment to salesforce need meta xml for each component ).

You will need  node now and once you have package.json and the gulpfile.js you can run install command to have all node modules and dependency configured on your local machine

npm install 

• Keep your static resource file name and the file name in the gulp file path

Observe the RESOURCE_NAME Parameter and it has same name as static resource and its key assumption here .

Following are the three process you will need to follow once you change code to sync to salesforce server

1)Run gulp build
2)Run gulp zip
3)Save mavensmate static resource file

Note :You can set up gulp default and configure both to happen in one command but my personal preference is to go step by step .

Notice that from previous sample our entire visualforce is reduced so much


To make more things clear lets watch it in action the flow of tooling workflow .You can check my  git repo for entire work 

This is not the end of the world .You can further use jsforce and automate further .Also you can set up gulp watch task to watch only for changes and run your process automatically and deploy to salesforce.

Kindly note that this process or having gulp set up you can do more magical stuff and become efficient .

Lot to expore.Need to make some time and kick some ass :) .I hope you enjoyed this small blog and thanks for your time .