Skip to main content

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 .

Popular posts from this blog

TLS 1.0 has been disabled For Sandbox - Salesforce

Salesforce has finally disabled TLS 1.0 in sandboxes .This is in preparation for disablement later in 2017 for PRODUCTION instances .

Now this would have not impacted your integrations in PRODUCTION org but if your integration is broken in your sandbox ,this means you have only few months to sort this and fix before this affects your integration for PROD live users .
Before we deep drive on how to possibly fix this and work with your external systems to figure solution ,lets first understand what is TLS and why did SFDC moved to 1.x and had to disable TLS 1.0
TLS 1.0 Explained























TLS 1.1 Improvements 
Added protection against cipher-block chaining (CBC) attacks. Support for IANA registration of parameters.

Clearly TLS 1.1 is more secure(Compared to 1.0) and protects salesforce resources against CBC attacks .
Identify if this change broke anything .The things that can be affected in your instances are as below Web requests to Salesforce URLs that require authenticationWeb requests to the login pag…

Opening Modal Using Lightning Component Framework of SFDC

One of my friend from India threw a challenge .The challenge was to open a modal by using latest and greatest lightning components framework and modals design from SLDS .For the love of community I thought of sharing the entire code base that I did .

So here we start ..

Business Use Case - Need a handy SalesLeader board component that can be used to display the Sales revenue generated by each sales rep for current year in the order of decreasing total revenue .On click of the tile ,we will show detail opportunity list aggregating the revenue .

The component can be dragged in lightning design experience or in App builder lightning Page .

Video Demonstration-



SalesLeaderBoard from Mohith Kumar Shrivastava on Vimeo.








Frameworks Used -
Lightning Design Systems (SLDS) for CSSLightning Component Framework for client side logicApex aura enabled class for backend logicApproach
The component hierarchy is very important to imagine or mindmap before we dig deeper- SalesLeaderMain
    -SalesLeaderBoard
    …

Customizing Napili Template Of SFDC For Communities - Community Cloud

Recently I have been busy working with salesforce community cloud platform and I am impressed by the new added features of Spring 16 .

You can watch the Release Readiness webinar for more details on what are added features for community cloud 

Lets talk about something which most of client (Either SI or ISV ) would love to have with the Napili template .The first question that clients ask with Napili is its flexibility to customize and tailor to their specific needs .

The very straight forward questions that people familiar with Napili template ask are as follows 

Can I change the CSS and look and feel ?  

Well yes and No ....The new branding editor you can sparingly use CSS and change look and   feel   and community editor can also help you to some extent to change labels and the color and you can really get closer to what you want .Just note that efforts will be high if we want to change the entire template design.

Will i be able to populate data from custom objects and standard objects a…