Instantly reloading Visualforce static resources

Visualforce allows you to upload JavaScript, CSS and image files for your app as “static resources” to extend its capabilities. But since they are static, you need to zip and re-upload them if you modify them. This could be laborious when you are editing 100s of times during development. The workaround is to setup a local web server and simply serve JS/CSS files from it instead of uploading them as static resources until you are done editing.

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 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:

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:

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/):