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:
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/):
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:
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:
- This won’t work on Google Chrome unless you serve localhost files via HTTPS. But it works fine in both Safari and Firefox.
- 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)