Hi there,

This is my first blog on developer force, so let me introduce myself before I go into the actual blog content.

My name is Raja Rao DV. I am a new Developer Evangelist for Salesforce. I joined the team about a month back from VMware Cloud Foundry where I was Developer Advocate for Node.js. Prior to that I spent ~8 years at Zimbra (acquired by Yahoo!) – an Outlook like Enterprise email web-app. This was one of the early large-scale JavaScript single page apps that was doing AJAX before the term AJAX was coined. Over there I was managing 100s of JavaScript apps/plugins similar to Gmail apps. So as you can see my career has revolved mostly around JavaScript and Enterprise apps. I am really excited to be here because there is a LOT of JavaScript work going on within Salesforce especially around mobile stuff. And as you know, unlike consumer apps, most enterprise apps are not mobile yet so there is a massive opportunity to build them on top of Salesforce or convert existing Salesforce web apps into Mobile apps.   Another reason that makes me excited is that Salesforce already provides a World class backend with World class APIs and backend-features like Triggers, server validation etc. making it one of the best and the easiest platforms to build mobile apps on.  So anyway, I will be focussing mostly on JavaScript and Mobile Packs here at Salesforce and you can find me on Twitter at: @rajaraodv

As soon as I joined Salesforce, one of the first things I built was AngularJS mobile pack and KnockoutJS mobile pack (work in progress). And while building them, I noticed was how hard it is to deal with “Static resources” and found a workaround and decided to blog about it,  So here we go.

As you know Visualforce is great for rapidly building web apps on top of Salesforce. One of the features of Visualforce is called “static resources”. It allows developers to add any custom JavaScript, CSS and image files to Salesforce server and provide them a way to extend Visualforce capabilities to build different kinds of applications like using our mobile packs to build mobile applications on top of Salesforce.

But if you are building a mobile app and deploying it as Visualforce app, you’ll spend most of your time in editing your JavaScript files. For example, if you look into index page of AngularJS Visualforce mobile pack, you have two JS files (init.js and app.js) that makes up the mobile app that you’ll be editing constantly:

<head>
...

  <script src="{!URLFOR($Resource.MobileSample_Resources_Angular, 'resources/js/init.js')}"></script>

  <script src="{!URLFOR($Resource.MobileSample_Resources_Angular, 'resources/js/app.js')}"></script>
</head>

And when you modify these files, to test them, you need to re-zip, and re-upload these files to Salesforce every time you modify them. This could be laborious because you will be doing this 100s of times while developing an app.

Now, there are plugins like MavensMate (Sublime text editor’s plugin) and Eclipse plugin that automates the process of re-zipping and re-uploading after you run some commands in those editors. But it’s still not as efficient as “make changes locally and instantly see those changes upon browser refresh”.

Workaround is rather simple: Don’t upload your files as static resources until you are completely done developing your app. Instead simply serve these files from a local webserver. So all you need is to run a webserver on your localhost and configure it to server JS/CSS files and update the index (or main) html file to load from localhost.

Here are the steps to load static files directly from local server:

  1. Run a webserver (there are numerous options, below are few).

Use a Python server (Pre installed on Mac; Install Python otherwise):

Go to your JS folder and run python -m SimpleHTTPServer 3000

Or, Use a Node.js server (Install Node.js server if you dont have from http://nodejs.org/):

Go to https://gist.github.com/rpflorence/701407

Copy static_server.js to your JS folder and run node static_server 3000

  2. Modify JS files path to in Visualforce page to point to localhost like below:

<head>
...

  <script src="http://localhost:3000/init.js'"></script>
  <script src="http://localhost:3000/app.js'"></script>
</head>

Note: Change localhost:3000 to match your webserver’s settings.

And from now on if you edit you JS or even CSS file, simply refresh the browser to see the changes without any wait!

Notes:

  1. This won’t work on Google Chrome unless you serve localhost files via HTTPS. But it works fine in both Safari and Firefox.
  2. Once you are completely done editing, be sure to revert back src=”{!URLFOR($Resource…, zip and upload these files as you would normally do at the very end of the development cycle.

 

Happy coding! – Raja Rao DV (@rajaraodv)

tagged , , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • Anonymous

    Many thanks for this post Raja. I have been struggling with this very problem as an Angular developer on Salesforce. This is a great idea, as the auto-Zip plugin workflow you mentioned is problematic for my version control process. I have worked through some AngularJS specific gotchas- if you ever want to do a post on that I can give you some material. It’s not easy, but once you understand them can work OK. (try doing an ng-switch in Salesforce).

    • Raja Rao DV

      Thanks!

      Sure send me the gotcha lists to rraodv at salesforce. I was thinking about doing something along those lines as well for my new post as well

  • http://www.ywordpress.com/ Wordpress Development

    I’m really impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you customize it yourself? Either way keep up the excellent quality writing, it is rare to see a nice blog like this one nowadays..

  • http://twitter.com/KevinHenrikson Kevin Henrikson

    Nice post Raja but “an Outlook like Enterprise email web-app”… Zimbra was a bit more than a web-app :)

    • Raja Rao DV

      :) Whoa Henrikson!

      Yes Indeed Zimbra was/is much more than just a web-app!

  • Gulshan Middha

    Great Post Raja, Just to add one of the other way around I use is to create a VF page and add all my script in that and include that VF page in other pages. Once development is done we can move that script back to static resources.

  • Anand B Narasimhan

    Great workaround but I would say the %age of Visualforce devs that are adopting a Single Page app architecture is still low (I wish it were higher). The approach you mention won’t work for standard visualforce that references JavaScript (for visualization, DOM selection etc.). Eclipse and MavensMate have certainly made progress in that area that make this less painful.