I’ve been working on a Javascript/CSS heavy Visualforce page this week and it can be a real pain tweaking the code, saving the library, zipping up the static resource, uploading it to Salesforce, testing the change and then repeating the process. Alternatively, I could put all my JS/CSS inside the VF page until I’m done but it still makes for time consuming saves up to the Salesforce cloud.
The following tip is a variation on a trick John Conners showed me, the difference being I’m using Dropbox as a temporary webserver instead of rolling my own.
A much quicker way of working is to take your JS and CSS libraries out of your static resource and put them in your public Dropbox folder while you’re working on them.
Once in your dropbox folder you can right click and get the public link:
Next simply comment out the references to your static resource and replace them with your dropbox public links …
<apex:page>
<!-- <apex:includeScript value="{!URLFOR($Resource.MyStaticResource, '/MyStaticResource/web/js/myjslib.js')}"/> -->
<apex:includeScript value="https://dl.dropboxusercontent.com/u/26FG9442D4A/testscripts/myjslib.js" />
<!-- <apex:stylesheet value="{!URLFOR($Resource.MyStaticResource, '/MyStaticResource/web/css/mycss.css')}"/> -->
<apex:stylesheet value="https://dl.dropboxusercontent.com/u/26FG9442D4A/testscripts/mycss.css" />
...
</apex:page>
You can then code away in your favourite editor and save your changes direct to your dropbox in seconds, reload your VF page and test your changes.
When you’re all set pop your scripts back, zip up your static resource and don’t forget to replace your temporary dropbox links with the static resource links.
Author, brainstormer, coder, dad, explorer, four chord trickster, gig goer, home worker, inquisitor, joker, knowledge seeker, likes: marmite, note scribbler, opinionator, poet, quite likes converse, roller skater, six music listener, tea drinker, urban dweller, vinyl spinner, word wrangler, x-factor hater, Yorkshireman (honorary), zombie slayer (lie).
