Sunday 4 October 2015

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 .

17 comments:

  1. Nice blog.
    I've gone through the content regarding -Setting up Dev tools for Salesforce Project that uses ReactJs library and I am surprised that in a very short blog you've mentioned most of the points which should be there in any such education related blog.
    I was searching for hire expert react js developers and got this blog.
    Thanks for sharing.
    react js development services india
    hire reactjs development company in India

    ReplyDelete
  2. Thanks for sharing, nice post! Post really provice useful information!

    An Thái Sơn với website anthaison.vn chuyên sản phẩm máy đưa võng hay máy đưa võng tự động tốt cho bé là địa chỉ bán máy đưa võng giá rẻ tại TP.HCM và giúp bạn tìm máy đưa võng loại nào tốt nhất hiện nay.

    ReplyDelete
  3. If you are a youtuber, then know How To Get Sponsorship For YouTube Channel for free!

    ReplyDelete

  4. Power BI is a collection of various tools and services, applications that collaborate to produce interactive visuals and business intelligence capabilities of data. It helps end-users very much. Learn Power BI in real-time with ITGuru.
    Power BI Online Training India | Power BI Online Training Hyderabad

    ReplyDelete
  5. In the market, you can see a bunch of development service providers out there and individually promises that they are reputable ReactJS Development company in all forms. But I would recommend you choose the right one that helps your business grow.

    ReplyDelete
  6. Great Post. Very informative. Keep Sharing!!

    Apply Now for ReactJS Training in Noida

    For more details about the course fee, duration, classes, certification, and placement call our expert at 70-70-90-50-90

    ReplyDelete
  7. This is some real handy stuff about react js development, thank for sharing this with us.

    ReplyDelete
  8. Your Article is very impressed for me, because of all information. Full Stack Course in Hyderabad.


    ReplyDelete
  9. Thanks for sharing this informative article on Setting up Dev tools for Salesforce Project that uses ReactJs library. If you want to reactjs development company for your project. Please visit us.

    ReplyDelete
  10. That was worth reading blog.It was very informative and useful.
    also,check ReactJS classes in Pune

    ReplyDelete
  11. Great Blog Thank you for sharing..

    ELearn Infotech offers Real-time Node JS Training in Hyderabad. Our Node JS course includes from Basic to Advanced Level Node JS Concepts. We have designed our Node JS course content based on students Requirement to Achieve Goal. We offer both Node JS class room training in Hyderabad and Node JS Course online training by 10+ years Realtime Experts.

    ReplyDelete

Introducing Lightning Base Components

Lightning Base Components are great addition to the platform and in fact revolutionary .One of the concerns around lightning component ...